When working in react, it's easy to forget that your app is still running in a plain old HTML file. In our case, that is the index HTML file that code sandbox created for us. If I open it up and take a look, you can see that there's not much HTML markup in the body other than this empty div. Just to prove that this is indeed the page we're rendering in the browser, I'm going to go ahead and add a custom message and save. Once I save, you can see that this copy now appears along with the Hello code sandbox message, which is coming from our app component. But we don't see the copy for the app component anywhere in this HTML file.

So how is it that we're seeing it in the browser? The reason is that react is handling the rendering of the app component for us, and it manages creating the DOM elements that display in the browser. But how does the elements created by react end up in the index HTML file, React requires that you provide it with a DOM node to render into, which is referred to as the root DOM node. In our case, the root DOM node is this empty div I pointed out earlier, which conveniently enough has an ID attribute equal to root. We go back to the app component and see we were making a call to react Dom dot render react Dom package is separate from react and contains methods that are Surprise, surprise, specific to dealing with the DOM. If you ever end up working with server side rendering, you'll find yourself working with react Dom as well.

Now back to our app component. When react Dom dot render is called, it's passed the component and a reference to the route DOM element. React Dom render is usually only called once and once it's called everything inside the root DOM element is now managed by react. Just to demonstrate, I'm going to pop up my Chrome Dev Tools and inspect the DOM. Here I can see the root div element that was empty in our HTML file, but now instead of being empty, it contains the elements being managed by react. Now that we know how react renders into the DOM, let's take a closer look at how it handles rendering updates.