All language subtitles for 008 Create React App 2_en

Now, let's take a look at what create react app has made for us, so we're going to go into our monster's

Rolodex.

And if we hit El's, we see that it's actually generated this project for us, it's got all our dependencies

inside of node modules and it's got a package, JSON and then some of these other folders and files.

So now if we open that up.

And take a look, let's look at the package, Jason, first.

We see that it's included for us react and react, Dom, which is great, as well as this other library

called Riak Scripts.

Now, what Riak Scripts does for us is it's what makes create react so great, it's actually what allows

us to have to not worry about web pack and babble.

It includes these four scripts for us, and it calls that library reac scripts to do these four things

start, build, test and eject.

Now, what START does is it actually starts the project.

So let's try that first.

So if we call yarn start.

Riak scripts start right there, and what this does is it serves up this sample application of react

inside of our localhost, which is pretty awesome.

We have a working react app right away if we look at the next one built.

So before we start looking at the script, let's actually look at these two folders.

Now, the source folder is actually where our application lives.

All of the area code that we write for our application is going to go into the source folder.

This public folder is actually where all those files that I mentioned earlier, where our browser needs

an older version of JavaScript in HTML to understand so well, this is actually the folder where all

that's going to go.

So when we call this build script, what create racked up is going to do is it's going to turn all of

the area code in our source folder into that version that the browser understands and put it inside

of this public folder.

Tests just runs the test code that we're going to write.

And then eject will actually take out all of the configuration files that it's hidden from us for babble

and in case we wanted to manage it ourselves.

Now, now that we understand what the basics of what create react has done for us here, let's actually

look at some of the code.

Now, the first thing I want us to look at is this after James file.

Now, I know this looks a little overwhelming, but let's just take it line by line.

So first, we're going to import all the things from react that we need.

And it's called react, right?

We import, react from react.

And that's going to hold everything related to react that we need inside of into this file.

Then we're going to import the logo from Logo SVG, which is essentially just this logo image.

Then we're going to import the excess.

And now let's look at the actual meat of this vile.

Let's look at line five.

This is just a function called app that returns a block of HTML.

That's all it is.

So everything that we see here is actually just the HTML here.

Now, how this works is that when we look at this index, such as file.

We see that we import that app function that we were just looking at and then there's this react dom

library that calls render and then it renders our app function in the form of what looks like an HTML

tag.

Right.

And then you see this thing here that says document element by ID of root.

So what this is, is it's looking on the document object for some elements with an idea of root, and

it's replacing it with this function that we saw that returns HTML.

So it's going to replace that element with the idea of root with all of that HTML from our function.

And where that Divx is with the idea of it is inside of index ideational, inside of this body tag is

a single div with the idea of root.

And this is the entry way for our application, it's essentially just this library replacing that div

with the idea of it with our function that returns some HTML.

Now, one of the great things about Create React app is that if we make any changes to any of our files,

it'll automatically update inside of our localhost.

So if I wanted to change this to say hello, my name is EOWA.

We will automatically see this update, and that's really awesome, because that means that we don't

have to worry about refreshing anything.

We just code and see those changes like.

Now, let's get started with actually converting this into this.