Welcome back.
We just talked about this Div ID equals route where we only have this on our page, but somehow react,
grabs it.
And displace this, so let's figure that out.
We see here that we have index dot.
This is the entry point of our app.
This is the first file when we look at the a.m. page, says Div idea of route.
The first thing that we're going to do when we build our React app is we're going to look at the index
logs.
This is the first thing that is read by the computer.
And in here we see that we import react from react.
So this is the React package that we need to.
Well, right react.
We have react, Dom, which what it does is connect the React package to the DOM.
So that is the document object model of.
Our browser.
Of our page.
And the reason they're separated into two is because react can be used with anything it doesn't have
to be just for apps on the browser, it can be for mobile.
That's why React Native is for it could be for VR and virtual reality.
So based on where you using React, you need a package to essentially two packages for the main React
library and whatever the connector is.
We have indexed access, so that is where we add all our niceness, all our success for our app.
So you can see here if I go to actually indexed access.
This is the CSIS that applies to all or the entire page.
And then we have important app from app.
Now this is right here, and we're going to talk about what this exactly is.
Later in the videos, but as you can see here, what we're doing is we're using React Dom, and we're
saying, Hey, react to the thing that interacts with the document object model on the browser.
Use this method that comes with React Dom and honestly with React Dom.
We pretty much just use this render.
And in here, I want you to render this.
And what is this?
The first parameter is I want you to render this.
Put this on the page.
The second line is this.
Put the above on the page in here, which is document again, document is something that comes from
the browser, so document get element by ID route.
So all we're saying is this I want you to render inside of this div.
And that's what we do.
We grab the root and then react renders this part and what is this part, this app that we import?
If we go to app, yes.
Well, this is what it is.
This is what we see on the screen.
Remember the image, the logo that's spinning?
Well, that's that's right here.
Remember the edit source app and safe to reload?
Remember the learn react if we change that to learning react.
We see the change right away.
So what we see on the screen is contained inside of this app component.
Now, this looks really confusing.
I know it's like a whole new world we've just entered, but we're just getting started.
This is just a high level overview.
We still got a lot more to learn.
So for that, let's take a break and I'll see you in the next video.