You learned that React does not create real DOM nodes.

By DOM nodes, I mean an actual h1, div, span, or a text node.

Instead, React creates plain JavaScript objects that describe DOM nodes.

For example, in the previous video, we used React.createElement

to create a React element that describes an h1 with an id and

title attribute and text as its children.

So how does this object representation of a DOM node get rendered and

displayed on the page?

Well, the ReactDOM library,

included in our project, provides DOM specific methods.

The one you'll use the most is ReactDOM.render(),

which renders React elements to the DOM.

Back in app.js below the title variable,

let's call ReactDOM.render.

So this is the function that actually does the creating and updating of the DOM.

It's what connects React to the DOM.

Render accepts two arguments.

The React element or JavaScript object that describes the element you'd like to

render and the actual HTML element you want to update or render to.

So to render the title React element to the page,

let's pass title as the first argument.

And as the second argument, we'll use the plain JavaScript

document.getElementById method to target a DOM element with the id root.

So this is the container element where our code will be rendered by React and

there is no significance in the id root.

You'll often see it named app or container,

you can name it anything you want.

Next, we'll need to create this root element in our HTML file.

Open index.html and

create a div just below the opening body tag and above our scripts.

Add an id and set it to root.

And that's really all the work we'll need to do in index.html.

The React code we write in app.js will be rendered into this root div.

Or in React terms, this is where we will be mounting our React application.

Over in the browser when I refresh,

we see the heading displaying the text on the page.

And if we inspect the DOM with Chrome dev tools, we see the h1 element with

the id and title attributes we described with createElement.

Any existing DOM elements inside the root div will be replaced

when render is first called.

So for example, if I add the text Loading inside the div when I refreshed

the browser, you'll see the text get immediately replaced with the h1.

So everything inside the root DOM element gets managed by ReactDOM.render.

Now applications usually consist of more than just a heading.

So let's create other elements and compose them together.

I'll create a description element and a header that wraps both the title and

description.

So just below the title variable, I'll create a new variable that named desc or

description, Assign it React.createElement.

And I wanna create a paragraph so I'll pass the string p as the type argument.

I'm not gonna assign this element any properties, so

I'll pass it null as the second argument.

And as the third or children argument,

I'll pass it the string I just learned how to

create a React node and render it into the DOM.

You can provide the children as any number of arguments after the props argument.

createElement considers anything after the second argument as children.

Next, I'll create a header element by declaring a variable

named header and assigning it React.createElement.

I want to describe a header element here so

I'll pass it to string header as the first argument.

I will pass it null as the second argument since I don't wanna sign

the header any properties.

Now this header is going to contain the title and

description elements we just created.

So I'll pass it the title and desc variables as the children.

Finally, let's render the parent header by

passing the header variable to ReactDOM.render.

I'll give app.js a save, and over in the browser when I refresh, great.

We see a header element with child h1 and p elements.

So the main takeaway here is that React never touches the actual DOM directly.

It just manages what gets rendered to the DOM and

what gets updated via reactDOM.render.

It's not until render that the browser creates actual DOM elements

like our header and its children.

So in other words, it's renders job to interpret the element objects and

create DOM nodes out of them.

At this point you might be thinking, wow, it took three function calls and

way too many lines of code just to create three elements.

How exactly does React make it easier to build and maintain my UI?

And you're probably right.

React.createElement doesn't seem all that convenient right now.

It makes it tricky to visualize the elements you're creating.

But don't worry, React uses a faster, easier, and

friendlier way to create elements with a special syntax called JSX.

You'll learn about it in the next video