00:00 Great, so let's take this message component. I'm going to add a console log right here. Console log calling message, and we'll put in children right there. We don't need three yeses. And then we'll add another console log right here.

00:18 Console log element right there. So let's take a look at the console right now. Here we're calling message hello world, calling message goodbye world, and then we get our element. Now I want you to pay attention to what happens with those console logs when we switch over to create element calls. So I'm going to say, we're still going to interpolate this, say create element.

00:38 Here's the type of element I want created. I want a message element created. And then here are my props. Here's my children. And then we'll close that. Now of course you could change this to have children be hello world, and then your props could be null. Here, let's do that. We'll do both. So we'll do it that way for this one. And then create elements for the message on this one.

00:57 And yeah, thanks coding assistant, but we don't need that help there. Okay. And create element is not defined. That's right. We need to do react.createElement because we updated our import to import everything as React. So that works. Okay. Great. So result is good. We can take a look at that.

01:16 We got our message and everything is working properly. We can change this to add box and that still is going to work as desired. So no problem there. But something did change. Let's take a look at our console now.

01:29 So now we're getting the element and then we get these console log or yeah, the logs called for the message before these logs were called before the element. And that should make sense, right? Because before we were calling it in the process of creating the element.

01:48 Now we just pass it to React and we say, React, you call it whenever you're ready and go ahead and pass it the props so that it can use those props to generate its own elements. So when we do that, React actually defers calling this until it's necessary.

02:04 And it's not necessary until we actually are trying to render this to the page. If we also take a look at what the props look like here and see our children. Now this child is a type of message that was not the way it was before.

02:22 Before it was a type of div. And so there's like this special type of React element. We also have the props right here. Hello world. Okay. That's interesting. That is the idea behind create element is that React makes a special type of element

02:40 and it will call your component when it's necessary and actually continue to call it when it's necessary as we add state to these components and things that can keep that isolated from the rest of the application. That's part of the composability story that we get out of using React components. So there you go.

02:59 Now it's working semantically the way that a custom component works, that React is the one that's calling the function, but we're still not quite there with entirely the syntax for how you use custom components. So that's what we're going to get to next. But hopefully that was an interesting exercise for you to kind of get a little bit more of

03:18 an understanding of how the create element API works and how these custom components operate.