00:00 So, we've got Marty the Moneybag helping us out a little bit here to help us import these files. And so, if I save that and we go take a look at our network, we're going to see we're loading in React and ClientJS, so that is working as expected.

00:15 And now, we still can get the root element, so we've got our HTML ID of root here. And so, we're going to grab that root element. We still want to append something to it, but it's going to be a little bit different with React. So, we still need to create an element that's a little bit different with React as well. So, rather than document create element, we're just going to use create element from React.

00:35 And we are going to create a div, but in React, you don't typically mutate the elements you create. Instead, you pass the properties that you want that element to take. So, we're going to have our class name and our text content here. So, in React, this is also called class name, so we'll say class name, and that's a container.

00:55 And then, in React, rather than using text content, we're using children, and this prompt can be called children, or you can set it as a third argument. So, if we move this over here and remove that, those are functionally equivalent to one another,

01:13 and they do have some slight differences that we can talk about as we dive into the children prompt a little bit more later. Okay, so then we're also going to need to append this. If I were to save this right now, then we're going to get object to object in the page

01:28 because the browser's like, wait, you're appending just an object, it's not a DOM thing, so I guess I'll two-string it, and that's what we're appending. So, that's not exactly what we're going for here. So, instead, we're going to tell React, hey, I've got this React element. In fact, let's take a look at that.

01:44 Console log element, and this is what a React element looks like. It's got this type of thing, that's how React knows that it's a proper React element, is this special symbol. It has a type, that's the type of element we're creating, and then it also has props,

02:03 and the props are children and class name. Sweet. So, it's like what we provided. So, this is just like a description. We called it UI descriptor of this element that is supposed to be on the page.

02:16 So, we need to turn this from a React element into a document or a DOM element, and we're going to use create root with the render API to make that happen. So, we're going to say create root, the root of our application will be this root element,

02:35 and then we're going to render this element into that root. So, if I save that now, we're going to get our hello world, we can take a look at our UI, and yep, inside of that root element, this is our root for our application, we're going to render this element, which we created right here.

02:53 So, that is how we create a React element and get it onto the page using the create element and create root APIs from React. Awesome job.