In this video we will generate our initial react project.
So our first step is to install NodeJS on your machine.
And in order to do that you must jump to the official website nodejs.org.
And here you can see two versions, either LTS version or current version.
I highly recommend you to always install LTS version as it is more stable at the moment of this video.
The version is 20, but even if you are getting higher version, this is totally fine.
You just need to install version.
So you simply need to download an archive, install it like any other program and you are good to go.
The main question is how we can test that.
You successfully installed node on your machine and in order to do that we must jump to the terminal.
This is how it looks like for me.
You might know it as a console.
If you don't know what it is, don't worry.
Even if you are on windows where you are getting quite bad terminal out of the box, you have different
solutions you can install.
Additionally, a terminal that will work just fine.
So if you are on Linux or Mac OS, you don't need to do anything.
There is a good terminal there out of the box, but if you are on windows, you have different ways.
First of all, you can install CMD.
As you can see here, this is completely free tool and you are getting the terminal on windows, which
will work just fine.
Another possibility is to install git on windows and it will give you git bash.
This is how it looks like.
So it is also a terminal that you can use just fine.
And another possibility if you are using VS code editor.
And actually if you don't know what editor to use, I highly recommend you to use VS code.
This is a free editor for any platform, but most importantly, inside this editor you are getting on
the bottom the possibility to open a terminal.
And then there you can type your commands.
In our case, after node installation, we must jump inside our terminal and write node minus version.
As you can see here I have version 18.
You might have 20 or higher.
It is totally fine.
So our node is installed.
Now the main question is how we can generate our react application.
And in order to do that we will use such tool which is called Create React app.
This is a super popular tool.
Exactly.
To generate a react application.
What we are getting inside are some default files and a web server, which will automatically restart
our application every single time when we are making some changes.
This is why here we must click on Get Started and here is how we can use it.
So inside quickstart section you can see that it is enough to write NPCs and NPCs.
We are getting together with node, then create react app.
This is our generator and then the name of our project.
After this we can jump directly inside this file and start our project.
But here is a super important point.
As you can see on the bottom, we have created an app and here is an important line.
You need to have at least node 14 or higher on your local development machine.
So if you are checking your node version and you are getting like 18 or 20, this is totally fine.
Everything will work, but it should not be less than 14.
And also, as you can see here, you can use different tools like npm and yarn.
It doesn't really make any difference.
In my case I want to use yarn.
You can just find use npm for example or npm.
The result will be exactly the same.
So I'm copying this command and I'm pasting it here.
So it is yarn or in peek.
So npm create.
Then the name.
This is our generator react app and then the project.
And as we are talking here about the project quiz I want to name it React Quiz.
I'm hitting here enter and it will install this package and generate for us our project.
As you can see here, everything was installed for me.
Now I can just write, CD, react quiz to jump to this folder and then yarn start in order to start
my web server.
And this is how my output of the web server is looking like.
So after starting our web server, we are getting compiled successfully and we can jump on localhost
3000 to see our project.
And as you can see in browser, this is how our project is looking like.
This is just a generated project.
And if you see such page inside your browser, it means that you successfully generated your first react
project.
Now let's look on the source files.
And as you can see here, this is how our project looks like.
We have in the root yarn log package.json readme source and our node modules.
And first the most interesting folder is source.
And as you can see here, we already got quite a lot of stuff.
In order to simplify understanding, I want to remove all stuff that was generated.
This is why here let's remove Epic's app test index.
Logo.svg.
Report.
Web.
Vitals and set up tests.
So now we have just two files, index.js and app.js.
And it is much simpler.
Now we must jump inside index.js to tune it a little bit.
First of all, here we must remove CSS file because we removed it and report web vitals on the top and
on the bottom.
And as you can see here we are talking now about file source index.
And this is the first file which is executed inside react.
And here is what we are doing.
First of all with the help of react Dom create route, we are creating the route of our project for
react where inside we will render our components and inside react.
We are talking a lot about components because we isolate some markup with some business logic inside
the component, and then we can put one component in another, then in another, and we have this tree
of components.
For example you can say the top component is your layout.
Then inside you have a header component a body component or footer component.
These are all react components.
And this is what you can see inside.
We are getting here react strict mode and then app.
And actually app is our first and only component that we have inside this generated project, this react
strict mode we are getting.
So react can help us to debug some strange behavior if we are writing our code wrong.
Now let's look on the file which is app.
And this is exactly our first component.
And as you can see here, it is quite big.
First of all let's make it smaller.
I want to remove here logo.
And this is just a function.
And inside we want to return some markup.
I just want to write here a div and inside hello react.
The basic react component is just a function.
We can write it with the function keyword or we can change it to the arrow function.
This is why here const app is just an arrow function and we are returning some markup.
So the main point is that components inside react are returning some markup.
Let's look in browser.
Now as you can see we are getting the message hello react.
And our page is fully blank.
Because we successfully generated our react project.
We cleaned everything and now we can start with developing our project.