All language subtitles for 009 React Project Setup_en

Hey, it's Andre here.

I just wanted to spend a quick moment looking at what create react that gives us now the first thing

we saw in the previous video is that we have this package that Jason file, and we also saw that we

had these commands available to us.

Now, if I open up the terminal here in my visual studio code, make sure that we're inside of our project.

In my case, I will code into the test folder.

And for some of you, maybe when you ran yard start, nothing happened.

And that's because you may not have a yarn installed on your computer.

Instead, you might have NPM.

So if you do npm start.

This should now work.

Now, for those that don't know, NPM is a package manager, it's essentially a way for us to automate

the process of installing, upgrading, configuring or removing any libraries that we want.

For example, installing react which create react app did automatically for us.

Now, there's also this other package manager called Yade.

You can use whichever one you want.

The only difference is the commands that you put into your terminal.

So it could be npm start or you can start.

Yarn was actually created by Facebook at a time where AMPM had a few issues.

So this is just up to you, whichever one you choose.

Now, one thing you notice here is that I've successfully start my app, but it didn't show up on my

browser.

Sometimes that could happen.

So all you have to do in that case is just go to localhost three thousand and you'll see that your app

is now here.

Everything is working.

Now, the other thing I want to talk about is this NPM run, build.

If I close this application.

Again, I can use either AMPM or Yade, but if I do ampm run, build.

I want you to notice what's going to happen over here, as you said, we have the source folder where

we have all our files, and you can think of this as our workspace.

This is our workbench where we're going to work on our application.

But when we actually put it to the outside world, when we actually deploy our application, if we give

all these files to the browser, the browser is going to be like, I have no idea what are trying to

do.

I have no idea what this syntax is.

Yeah, I'm going to pass.

I have no idea.

And it's going to erupt instead by running NPM run, build.

I want you to notice what's going to happen to the public folder.

You see here that says it's creating an optimized production built one of the beauty things of create

reactor is that it optimizes the code for you.

Let me show you what I mean.

You see here that we now have a build folder.

If I click on this build folder, you see that I have all my files in here that well, some of them

I've seen before like the fabric on.

Our index dot e-mail file, but you see, this has been minified, so it's going to take less data that

we can send from our server.

If we go to the static, we see that we have our access files, which again, have been minified.

We have our JavaScript files, which over here it looks like we have a bunch of them, all of them minified.

It kind of looks like gibberish.

But inside here we have all the code that we wrote.

In our source folder, and it went through this step to create optimized, built files for us.

So what we want to do now is take this built folder and put it on a server.

Now, we're going to go over deployment later on in the course, but I want to go back to the power

of reactor.

You see, it uses -- and Bable, something we'll talk about later on in the course.

Now, Bable and Watpac allow us to take our source folder, which I mean, we had a lot of JavaScript

files and we're going to write a lot more throughout the course.

What they're going to do is they're going to take these files and Bable is going to do this thing first.

Babo is going to say, hey, all these JavaScript files with that weird react syntax that we're not

really too sure what's what's going on.

Well, I'm going to take all those files for you and remember how traditionally we had all these browsers

that, well, implemented the browser differently.

Bable is going to make sure that our JavaScript files are going to work on all these browsers no matter

what version, no matter how old they are, how new they are.

They're going to make sure for us that, hey, every single one of these JavaScript files is going to

be understood.

So it's kind of like Jaquie did back in the day when we had this idea of making sure that the browsers

understand us.

Awesome.

But what about weapons?

Well, Watpac is a module bundler, it's letting us right to modular code.

So what does that mean?

This built folder, you'll see that we have a lot of JavaScript files in our source folder, but the

build folder actually has, well, just a few JavaScript files.

It has the main.

JavaScript file, see that we only have actually three JavaScript files.

And that's because -- is going to take all our JavaScript, remember all these imports that we're

doing and create, well, bundle everything up together and optimized for production.

Now, you don't need to understand this whole process because the beauty is that REACT has a dedicated

team of developers, really, really smart developers that implements this behind the scenes for you.

That's the power of a tool like create racked up.

It's a Seelie or command line interface.

Other frameworks like Angular or View have the same thing, a way for us to start a project really,

really fast.

Have all this configuration done for us, optimized for us, so that we can build really nice performant

applications.

So remember, this built folder is what we'll use to actually deploy our application.

This source folder is our playground, our workplace.

Now, let's go back to Pakistan, Jason, when we look at Pakistan, Jason, the reason we have this

is that it allows us to have this package manager so that remember how he said react is all about this

component architecture and we can use other people's code and other components.

Well, we can use this package that, Jason, to install other perhaps reac components.

So if we go to something like material UI, you'll see that I can install component library material

UI just by running NPM install and it's going to get added to our package, that JSON file we're going

to be exploring, create, react app and other parts of this application throughout the course.

But the last thing I want to touch on.

Is what reactors actually doing underneath the hood, if we go to the public folder and go to index

e-mail, we have all this pre set up code for us.

But the key thing is that when we look at the body tag, the only thing we have is this div ID of root.

Now this is where we're going to inject our react application.

But at the end of the day, all we're doing is just replacing whatever is here with a react application.

But that doesn't mean that I can't keep just coding along and building something else, like a Halo

HTML tag.

If I say this and run, npm start.

If I go back to my app over here.

And I scroll down, you'll see that look at that I've added hello, so my app is part react, part HDMI.

Very, very cool, so react is something that we can inject even into parts of our application.

If I right click here and do inspect and go to the elements, you'll see that this application is,

well, d'Hiv Idea route and then we have this app inside of here that is just HTML tags if I open up

my react developer tools.

Once again, you'll see that the developer tools actually just notices are reachout.

And it has this app component that it's created for us, but at the end of the day, it's the same thing

as the e-mail we see here.

Finally, if we go to App Dogs, we'll notice that we are importing react and if we go to index dogs,

we have something called react Dom.

Now, moving forward, I want you to think of these two libraries are just doing these things.

One is that this REACT library allows us to write this XML like syntax inside a JavaScript file, and

it understands it because of this react library.

The second thing is that this react, Dom, is that little robot from our previous section.

Remember this little guy that actually interacts with the dump, that's the reactor dump, that's the

little robot that can be replaced with, well, different robots, maybe the one that interacts with

a mobile phone or a desktop.

This is the react package, it allows us to right Jeff Sachs and bill components and build that virtual

dome and react.

Dom is this little robot that interacts actually interact with the dome.

So if we go to the code, you see that reactant render allows us to grab an element from HTML and insert

app into it.

That's all it's doing.

All right.

That's enough for now.

Let's keep going in the next video.