Hello YouTube, today I'm going to show you what you need to install in your computer
in order to develop react.js applications.
This will also be true for any node.js application you want to develop, so the first step to do that
will be to download and install node.js so we will click over here and save in node.js.
I will leave all of those links in the description down below, ok?
So... while node.js is downloading we can go to visual studio code,
click on download for windows and this will start the download as well.
Now the last one is "cmder". This one is optional, I prefer commander compared to
the "cmd" from windows, but if you prefer the "cmd" from windows this one is just optional!
Let me start to download this one as well and I will download
the full version that will bring git and all the tools with it, ok?
I will start the download of this one, I will click save and when this finishes
we will have all the files in our downloads folder.
I will wait for them all to finish download,
I will fast forward the video for you and we will start to install node.js.
Right now all the files are downloaded so we can start to install node.js. I will double click on
this one click next, and now this is to accept the terms and conditions... so we will just
blindly accept them without reading. Click next and now it's where node.js will be installed,
usually I'm quite happy with this default location - if you want you can change it, the same will
happen for the custom setup, I'm happy with it and in the last screen we will have this checkbox.
I will usually recommend that you tick that checkbox
because it will install a lot of development tools like the compiler for C and C++,
it will install python for you. Some of the packages that we install from "npm"
sometimes require to be built from source, so as a "safety net" I usually recommend
that you install it. If you are just doing react, probably you don't need it.
Keep in mind that if you select that check box when you click "next" it will take
probably 20 or 25 minutes to install - in my computer. In yours it can be a bit faster, it
will depend on the network speed, it will depend on the speed of your disk and also your CPU.
At this stage we are just installing normal node.js
like you would install if you didn't check that checkbox.
So this will take one or two minutes at most.
When this finishes you will have the option to click on this finish button, and when you
click it, then it will start to install all of the tools from that "checkbox".
You will have to press continue over here, so I will press now.
I will press enter again and now it's a good time for you to probably go for
lunch or dinner or something, because it will take roughly 20-25 minutes.
We will say yes over here. It might prompt you
with something during the installation but if it does I will point that when I'm
editing the video, so for now I will just fast forward to when this one finishes!
Now that node.js is installed we can come over here and type "cmd" to open our command prompt.
In our command prompt we can do the following: "node -v" and "npm -v".
Now in order to create our first react applications we can create a new folder called
my-projects for example. Now we just go inside the my projects folder
and create our first react application: "npx create-react-app bruno --template typescript"
and this is creating the application with typescript instead of JavaScript.
If you prefer JavaScript, just remove everything after the
"--template": "npx create-react-app bruno" . Now that our application is starting to be created,
at the same time we can start to install visual studio code,
because visual studio code will be much faster than the creation of our application.
I will click on accept, I will go forward,
I will install in that location - seems good to me - it will be called vs code,
yes, and now usually I like to select those three options over here to open the default files with
visual studio code and at the same time in folders to do right click and have the option to say
open with visual studio code that folder so I will select those four over here do next install
and you will see that this one, "visual studio code" will be quite fast to install.
It will be much much faster than for us to create our react app over there,
so when this one finishes we can start also to go to our "cmder"
and we will extract "cmder" to a folder that you want it to be installed.
I usually just put "cmder" on the root of my C partition,
but you can put it anywhere you actually want.
I will click "extract", and this one will also be slow, so now we have two slow processes running.
We have the extraction of "cmder" we have our react application being created.
Visual studio code is already installed. I will not launch visual studio code, I will finish
and when these two processes are over I will come back to you to show you the last few details.
All right, now that "cmder" is also extracted,
you can also see that our react application is finished over there,
but let's take care of "cmder" first before we look into our react application.
So, we will click over here in the "cmder.exe"
and it will ask us to "unblock and continue" - we will click there and now a few scripts will run.
Those scripts will probably take again a few minutes to run.
Those scripts already finished running, so the first thing we can do is
right click on that icon and pin to taskbar, so now every time
I close this one, I can open it through here and it will always go to the root of your
user. In my case it will be "C:/Users/IEUser" - this is really good we can now look into our
command prompt, so in our command prompt we can already see that our react application finished.
It's created and installed, so now in order to start our application we can do "npm start".
Let's do that let's do "npm start", and now ooooops wrong folder!!!
This is something that you will probably make the same mistake.
You created the application and then you immediately after do "npm start",
but in reality we called our application "bruno", so we need to do "cd bruno",
that's the name of our application and now inside "bruno" you can do "npm start"
and our application will be building and then when it starts it will ask you permission to open, it
will also ask you to to have permission to open your default browser which is this one.
We will say "OK" and after a few seconds
you will see that we will have our react application over here.
If you want to make changes to this application we can open,
for example, "cmder" go to the folder where that application is - which is "cd
my-projects" and inside "my-projects" I have "bruno" and so I can for example "code .".
When I do "code ." it will open visual studio code in that specific folder.
We can go to the source, for example,
and say instead of saying edit this I will just say "bruno".
I will save and immediately after I save I can go over here
and you see that this application is already refreshing so you now have "bruno" over there.
I really hope this was helpful that you can now install node.js,
visual studio code and if you like to use "cmder"
you can also use "cmder" because already comes with git and a lot of nice tools from Linux.
For example, you can come over here and do "cat package.json" and you see everything
from your "package.json". if you are using the normal command prompt from windows
you will not have that, so I hope to see you in the next video.
Like the video if you liked it subscribe to the channel if you
are not already and I see you soon. Bye, Bye! =)