All language subtitles for 004 Creating a new React Project_en

Now to start our work on this course project

and to finally start writing some React code

we need a React project.

And the easiest way of getting started with a React project

is to use a tool called Create React App.

You can simply Google for a Create React App

to find this GitHub repository

with more information about it.

You can also visit, create-React-app.dev

for the full documentation.

Now this is a tool which you can use

to create React projects.

Which are basically pre-configured folders

with some basic React code files and most importantly

a bunch of configuration files which help you build

that React App for production use

because it turns out that there will be

a couple of transformation and optimization steps

between developing any React App

and running a React App in production

but more on that later.

And in addition, this project which is created

with Create React App, will give you

a nice development environment

with a development web server which allows you to preview

the application locally on your machine.

And it will allow you to preview this application

in a way where the browser will automatically update

the page whenever you make changes in your code and so on.

That's why we use a tool like Create React App.

It simply simplifies our development process.

It adds a couple of key transformation steps which we need

and it will later also help us optimize our React code

before we push it to a production server.

Now getting started with Create React App is simple.

In the end you find all important steps here.

However, to execute these steps

you first of all need to visit nodejs.org.

Node js is a technology which is not directly

related to React.

It isn't the end a runtime for JavaScript

which would allow you to run JavaScript code

outside of the browser.

And therefore of course, it's not something we need at all

for React.

Because React code is JavaScript code

that runs in the browser.

We will need node js however,

for this Create React App tool.

To run this command here we'll need node js installed

on our system, otherwise this will fail.

And behind the scenes the project

which is generated by a Create React App

will use node js for this development preview server

and for this behind the scenes transformation

and optimization steps which we also need

to build production ready applications.

Therefore you should visit nodejs.org

and simply download that latest version here

whichever version that is when you were visiting this page

the exact version doesn't matter.

Simply download this version here

save it somewhere on your system

and walk through the installer this gives you.

I'm on macOS here but you'll get a similar installer

on windows and you should simply walk through the installer

except all these default settings here

and in the end simply finished as node js installation.

Again, it works in the same way on macOS and Linux

and windows.

Once you've got node js installed, you are ready to execute

these commands to create a new React application

and therefor a new folder, to then navigate into that folder

and to then run a special script, which exists inside

of that project folder to bring up a development server

this preview server I was talking about.

But we are going to do that together.

So simply copy this command and then open

your default terminal or command prompt on windows

and then important, navigate inside of this terminal

into a folder where you want to create your React project.

You can navigate around with this cd command

which stands for change directory

and you then should ultimately go into a path

where you do want to create this new project.

For me I'll just navigate into my desktop folder here

and then simply copy in this NPX command.

However, I'll change the name of the to be created project

to React complete guide, since that is what this course is.

Simply hit entered there after

and this will now create this new React project

in the destination where you execute this command.

It will create a folder with that name you picked here

in my case, react complete guide.

And inside of that folder, it'll set up all the key files

you need to write React code

and build your React application.

Now, as you can see, this might take

a couple of minutes here to finish

and therefore I will be back once it is finished.

If you are facing errors here, definitely also

check the Q and A section, but most importantly make sure

that you don't have a proxy firewall or VPN client

that might be blocking outgoing connections

or might be interfering here.

The same goes for antivirus software.

Now, once this finished, you should see something like this

and you can now cd introduce created folder

simply by running cd and then the folder name.

And then in there run NPM start.

And this will now start this development server

which hosts a preview of this React application.

And it will automatically open up this application

on localhost:3000.

If it doesn't open this page automatically

you can manually visit localhost:3000 in your browser.

Now there, you should see something like this

the exact look and what you see in detail here might change

over time, but you should see some starting page

some dummy React application, which has set up for you.

Now, of course, we're ready to edit this code.

And for this, I already recommended visual studio code

as a code editor in the first code section.

(indistinct) I also explain my visual studio code set up

and how you can make sure that it looks and works for you

as it does for me.

So on code dot visual studio.com

you can download and installed it for all operating systems.

But again, make sure you have a look

at this first core section where I walked

through that in detail.

Therefore, once you did all of that

simply open visual studio code and then opened

this created project folder with visual studio code.

simply with file, open and then pick that folder

which was created, which holds your React project.

And you should see something like this there.

You might not see all these sub folders and files

as this can also change over time

but you should definitely see a source, a SRC folder

and the package.json file.

The package.json file in the end holds all the dependencies

of this project, for example, React, but also a couple

of development dependencies, which are involved

with these transformation and optimization steps

I was talking about.

The SRC folder holds the actual source code

you will be working on.

And you will see more files in there than I have it here

because I already cleaned up that folder.

And speaking of that, I wanted to show you

how you can create new React projects

because ultimately that is what you need once you're done

with that course, but to make sure that we're all starting

on the same page and we're all working

on the same kind of project setup

attached you find this cleaned up starting project

which I created for you.

Simply download it unzip it and then open that

with visual studio code.

That's the project we should continue on

because here we'll all have the exact same starting state

and you will learn the latest version

of React with that as well.

So make sure you download unzip and open

that attached starting project, which is this cleaned up

project, originally created with Create React App.

Once you did that

make sure you cancel that running development server

which we started a couple of seconds ago

by going to the terminal where this server is running

and hit control C in there.

Which will cancel it and now, by the way,

if you reload localhost:3000, you'll no longer see

the website therefore.

But we'll restart it in a second.

But now based on this adjusted starting project

I provided to you.

Now here's a nice trick which I recommend that you use.

We again, need to start this development server

to have that automatically updated preview

of the application we're building.

Now the best way of starting that server again

is to go into visual studio code

into that project which you opened up.

And then here in the menu, go to terminal, new terminal

and open a new terminal here

which is now your default system terminal or command prompt

just integrated into visual studio code.

And in there you need to run two commands.

First of all run NPM install, this will look into

the package.json file and download and install

all the required packages and dependencies

into this project folder, simply entered this and hit enter.

We didn't have to do this earlier

because when we ran NPX Create React App

this was already included in the overall setup process.

Now that I shared my starting project with you

you need to run this once to download

and install all the dependencies.

They are not part of the shared zip file

since that would unnecessarily bloat that zip file.

Indeed all course attachments which you find

will be missing these locally downloaded

and installed dependencies

since that would just increase the zip file size

and in the end, you just need to run NPM install

in the downloaded and extracted zip files to recreate

and re-download all the dependencies.

You will now have a node modules folder here

which holds all these dependencies.

That's by the way a folder you should never edit or work in

because that's really just all these third party packages

downloaded onto your local system.

Now, once that's done, you can run NPM start again

and this will again, bring up this development server.

Use it all to keep that development server running as long

as you're working on the code, because if you shut it down

you can't preview your application anymore

though you can always restart it by running NPM start again.

And as long as this process is running here

it will automatically watch your code files.

And whenever you change something in code

it will automatically update the loaded page in the browser.

So keep this process up and running here.

Don't close this terminal.

Don't quit it with control C

unless you're done for the day.

Now on localhost:3000, you should see something like this.

Simply some 'let's get started' text

which isn't particularly easy to read

but that's really just a dummy starting state

on which we're going to build up on.

And that is the starting project we're now

going to work with.

That's now our starting state, where we can now finally dive

into the React source code and start learning React.