All language subtitles for 9. Setting Up a Project With Create-React-App

Welcome back.

So now that we know that we want to use Create, React app for small course projects, let's actually

set up our very first project.

Now with the Create React App tool.

Now Create React app is a command line interface tool.

And so now we need actually a terminal or a command prompt as it's called, on windows.

So if you're on Windows, go ahead and open up your command prompt.

And if you're on a mac, then open up your terminal.

Okay, let's make this a bit bigger.

And there's not a lot of things that you need to know about the terminal.

So all you need to know is that in the terminal or also in the command prompt, which I'm just going

to use interchangeably, you're always in a folder and that folder is usually displayed here in the

command prompt.

Now this command prompt here.

So this thing probably looks very different for you than it looks for me, but that's just because I

have this kind of extension here installed.

So for you, it's probably just all black.

And most likely you will see the folder that you're currently in here.

So I'm currently in this folder, which is basically just the home folder and you can see the contents

of the folder by writing.

LS on the Mac.

And on windows.

The same thing is Der, which stands for directory.

So again, with this you can see the contents of the current directory.

So what I want to do now is to navigate to another directory, which is where I ultimately want to run

the Create React app tool.

So for me that's the desktop again.

And so I can write CD and then the name of the folder and hit enter.

And this command is actually the exact same on Windows.

So that's also CD.

And so make sure that you navigate to the folder in which you want to create the new project.

So again, for me, that's on the desktop and just to make sure these are the two folders that are on

my desktop, which are exactly these two, right.

Now, later on we will actually use the terminal that is integrated into VS code, for example, to

start and stop the application.

But to create an application, we will always keep using this terminal here because the terminal that's

in VS code is usually tied to the project folder itself.

But here we don't have a project folder yet.

Instead we will now create it using create React app.

Once you're in the folder where you want to create the new project, type NP and then create React app

and then the name of the app that you want to build.

Now, in our case, that's going to be pizza dash menu because this is our very first project that we're

going to build in this course in the next section.

However, we're not really ready to run this yet because I want you to actually use the version five

of Create React app.

So please write this at and then five to lock in version five of Create React app.

And that's important because this tool will most likely change in the future and then it might work

in a slightly different way than the one that I'm showing you here.

But in order not to run into any problems, let's just fix this on version five for the rest of the

course.

And then later, if you want to build your own projects outside of the course, you of course no longer

need this.

Then you will just run, create, React app like this without the version number.

But here, let's do it like this.

So once you have it written like this, just hit enter and this will then take a long time to download.

Well actually, first it asks me if I want to proceed, so just type Y and then enter or return.

And so yeah, now it is starting to download like thousands of packages, which will take a lot of time,

but you see it already created the folder with the name of the app that we specified here.

So Pizza menu.

So go ahead and pause the video right now and I will be back here once downloading all of these packages

has finished.

Okay.

And it's done installing all the packages.

And so now we can actually close up this terminal or the command prompt.

Now, before I open up this folder here, I will quickly rename this folder just so they stay in the

order that I want them to be.

But this is totally optional.

So number two will be for the next section.

That's why this one is number three.

Okay.

And now we're ready to open up this project as our project folder in vs code.

So once again, I will drag and drop it onto the VS code icon down here.

Or optionally, you can also just open a new vs code window and then open up the project folder right

here.

But anyway, let's now explore the file structure that has been created for us by Create React App.

And we can already see that this is actually just a regular NPM project that we could also have manually

created using the NPM init command.

So we have a package.json file here which contains the name of the app, the version, the dependencies

and also the NPM scripts.

Right.

And we also have the node modules folder, which is where all the NPM packages have been installed and

you see that there are hundreds, maybe thousands of them.

But I'm just looking for the React ones here.

And yeah, here they are.

So here is the React package and here the React Dom package.

And remember that these two are exactly the ones that we also included into our file in the pure React

lecture.

Right?

But we did it back then using the script tag and of course not using NPM install.

Right.

Now if this whole concept here of the NPM project, so this node modules and the package.json is a bit

strange for you, then don't worry, you don't really need to understand all that.

But if you want you can just try to read something on it or watch a video or I also explain it all in

my complete JavaScript course.

But again, it's not really necessary.

Just know that this is a very, very standard and basically all modern JavaScript projects that have

a build tool associated.

Okay.

But anyway, let's now check out these other folders that have been created for us.

Now most of our development work, or basically all development will happen here inside the source folder.

So here we have a bunch of files where most of them we actually don't need and so we will get rid of

them soon.

But for now, let's just leave everything here as it is.

And checking out the other folder, which is the public folder.

And this is where basically all the assets that will end up in the final application go.

So all the images like the fav icon and also the index.html file.

And if we open that up, we have a bunch of stuff here and well, all of these comments here which you

can read if you want, but I just wanted to draw your attention to this div with the ID of root.

So is that familiar to you?

Yeah, we wrote exactly the same thing in the Pure React lecture and used this as the root of our app.

And so exactly the same convention has been used here by Create React app.

So create React app created this index.html file already for us.

And then if we open index.js, you see that here, it also selects that route, that root element.

So the element with the ID of root and then it creates the root using react dom dot create root and

then renders the app into it.

So exactly like we did in the pure React lecture.

But more about all this at the beginning of the next section when we actually start building this project.

For now, I just want to explore the file structure here a little bit.

Now what I do want to say in this video is that all of these files and this entire file structure here

has been created by Create React App in a way that its developers thought was best, but it could be

all completely different, like this index.html could be out here or it could be inside here, or we

could maybe have no folders at all because React really doesn't care about any of that.

And the proof for that is that in the pure React lecture, we didn't need any of this, right?

All we had was one index.html with some JavaScript in which we basically had this.

So this part here is actual react and it's this part which takes care of rendering this app component

into the Dom.

So this app component is here inside this app file, but we will open up all of these files and clean

them up.

Also once we start actually building the app.

For now, I just wanted to explore this a little bit and also I actually wanted to now start this app.

So to start a Create React app, we can use this NPM script right here.

So this NPM run start.

So let's open up the terminal again.

But as I said in the beginning now we will actually use the integrated terminal that comes with VS code.

So for that open up terminal right here and now, the big advantage here is that we are already automatically

inside our project folder.

So if we run LHS here or dir on Windows, then you will see exactly the same files and folders that

we have here in the sidebar.

But anyway, now to start the project, all we need to do is to run npm run start because this is how

you run these commands right here.

So you write NPM run and then the name of one of these four in this case.

And we could also create our own, but we don't need to.

Now, in the case of the Start command, we actually don't even need to write run.

We can just type NPM, start, hit, enter and that will then start up our application and even open

up a new browser tab.

And there it is.

So Create React app created a web server for us and made our application run here on localhost port

3000.

Okay, Now let's just one more time, come back here and open up this app component.

So this app component here is inside the app file.

And so let's well, let's just take everything here and just very quickly, type one.

Hello, react, give it a save.

And then once we go back, it should automatically have updated and indeed it did.

So this was one of the things that we were missing in the pure React lecture.

But now here we are actually using a web server and so we get hot module replacement with that.

Great.

So congratulations.

You just created your very first Create React app application.

And with this we actually reach the end of the first look at React section.

Now, the next section is a quick review of the essential JavaScript that you need for react.

And so you can see if you need any of those lectures.

But if not, then just move on right to the next section where we will then start building this pizza

menu that we started here to learn all the fundamentals of React.

So hopefully I see you there very soon.