Current section: Custom Components 22 exercises
Problem

Raw API

Loading exercise

Transcript

00:00 So, we're going to get this to a point where it's at least working semantically the way that React components work. And that is the createElement API. Using the createElement API, we can pass a function to the createElement API. So, before we were saying div right here, no, now we want our function to be the special element.

00:19 So, we've got like these special kinds of elements that are functions. And then you can pass your props and then you pass your children. And then that function, React will call that function. We don't call it anymore. We're just passing the function. And React will call that function when necessary. With the props, the props children will be that array of the children that was passed.

00:38 And then the rest of the props object are just whatever is on here. If you recall, when we create an element, the props all get slurped up into that one object of props. That's what's going to be passed to your function component. And then your job is to just return some renderable thing. And that is what a React component is.

00:55 In this exercise, we're going to switch from calling our message function to passing it to createElement so that we are taking advantage of the semantics of how React elements work. This will mean a lot more when we start using things like hooks and stuff in the future.

01:13 But yeah, there are some slight differences that I think that you will appreciate. Maybe add a couple console logs before and after. Take a console log in the message function and then put another console log that logs out the elements.

01:27 And notice how this changes before and after once you've made this move over to createElement. It's kind of interesting. All right. I think that's enough. Have a good time.