So the first thing we're gonna have to do is set up an environment to work in. So we're going to need
to install a few dependencies and tools that we will use to develop using React and JavaScript.
The first thing we're going to need is to install NodeJS. So I don't recall the exact you URL so
I'm just going to Google nodejs download.
And this is going to direct you to, hopefully, nodejs.org/download.
And if you're on Windows then you're going to download the Windows Installer.
So, there's a few different things here.
If you are on Linux what you're going to do is open up terminal and type in, well, node might actually
already be installed.
But if you pull up terminal, you can type in node --version and it should
give you a version number. If it doesn't
that means that you don't have node installed. And, also, another thing we're going to need is npm, which
you can do the same thing to verify if you'd like, npm --version.
Now if you don't have either of these installed and you're on Linux, I believe it's just...
well, let's say you're Ubuntu.
OK,
so you actually need to add a PPA to your system on Linux in order to install it.
So sudo apt install curl, and then you're going to copy this. Well, here, just search install node.
It's going to give you instructions that you should copy into your terminal to install. And then you can
install node and NPM and you can verify that they're installed using these commands. In the discussion
on this video
I will post this link.
So let me just paste that over on the side here, install node Ubuntu.
Although if you're using Ubuntu, you probably won't have any trouble with that at all.
If you're on Windows, which I think a lot of you guys will be, you will come to nodjs.org/en/
download, and you'll find the Windows Installer here.
You're going to install LTS just because it's more stable, and I feel safer using that for production.
If you want to check out latest features you can install current, but for right now we're going
to go with LTS. Download the Windows Installer, either a 32 bit or 64 bit.
I believe they have actually just straight up stopped making a 32 bit processors.
I could be wrong.
So you're most likely going to want the 64-bit version. If you're on Windows, the way you can verify
which version you need is to go to
this PC, you're going to right click and click properties, and it should tell you somewhere here
system type.
It will say 32 bit or 64 bit. If you've got 64 bit follow along with 64 bit version, otherwise, install
the 32 bit version. You're going to click on it and it's going to download the .msi file.
I've already got this installed so I'm going to go a little bit through the setup. It's very straightforward.
It's just, you know, you hit next,
next,
just like other installers,
and it will install node to your system.
It's very important,
and by default the installer is going to add the node library to the path.
I'm going to show you this
just so you guys can confirm and make sure that that's happening.
And this will, basically,
it will allow your system to know where node is for when you run the command, and
I'll give you guys a breakdown here in a second.
So hit next. I accept the terms, next.
You can choose a directory, hit next. And then right here, on the screen, you're going to want to make sure
add to path looks like this.
This means we'll be installed on harddrive, and these are what the other icons mean.
Make sure add to path is going to be installed. And then hit next,
and then you're going to install. I'm going to cancel out of this because I already have it installed. When
you've got it installed, you're going to hit finish.
It shouldn't take too long.
Now if I go back to here and right click on properties, the advanced system settings on the left hand
side, that opens up way over to the left.
Let me bring this over here.
If you click on environment variables at the bottom you're gonna get this list here,
and path is right here.
I'm going to click edit. And what we see is a list of directories that when we run a program from
terminal,
it will first look in the system 32 directory on the hard disk to see if it can find it there.
Otherwise, it's going to come to this list right here.
So we can see that, where is it, this one right here would be the one that that was added, I guess, when
you install NodeJS. Make sure you see npm, or node, or something there, and then open up command line,
power shell, terminal, and run these two commands. You're going to run node --version and it should
print out version number on the next line right here. And you're also going to do the same with npm,
and it should give you a version number.
Now if we run node we should get this, which is an interpreter and we can write JavaScript. So I can say..
then we can of course console.log(varname).
So we are good to go.
So I'm going to control + c out of here, clear. Now the next thing we're going to need to install
is Visual Studio Code
So just Google for this.
Actually, you can go directly to this link.
I'm going to have this there as well,
code.visualstudio.com. Click and download for Windows.
It's going to download an installer file, you can click keep, and then you're going to run that. And the process
is exactly the same, you're going to hit next, next, next, and it's going to install Visual Studio to your
system.
Now the next thing we're gonna have to install is React itself.
If you go to reactjs.org, which I will also post here in the video.
You can click get started and
...
I don't think it's going to tell us how to install it.
All right.
Oh create a new...
All right.
Well what we're going to do is install a program through npm.
So once you've got it installed.
If you had powershell open, and then you installed node, and those commands aren't working by the way,
you're just gonna want to close powershell and open up a new instance.
It's going to load in the new path variables and it's gonna be able to find the node and npm libraries.
Now in order to install node libraries, there's two types of ways you can do it.
You can install it globally to the system, which means you can use it in any directory. It's not part
of a project, it's not a project dependency, it's just an application that you've installed to your computer
using Node. And how we're gonna do that is npm install -g,
and then the package name would go here.
So that's the syntax for installing global packages.
Now if you're in a projects directory that does have a package.json file, that means it's
a node project.
And so you can install directly into that project.
We'll get more into that later.
So for right now go ahead and type in npm install -g create-react-app and hit enter.
Now this process will take a few minutes to complete.
I've already got installed so it actually didn't take that long at all, which is awesome.
So this means now that from the command line we can use the command create react app.
And that's exactly what we're going to do.
So, what I want you guys to do is create a directory for
your projects.
So how I do this,
sorry about that,
how I do this is I go to my users directory.
You should see pictures, music, downloads, etc. Just create a new directory, a new folder, and call it projects,
which I've got here.
We're gonna be using this name for our first react application so I'm gonna delete that now.
Now while that's actually deleting, and it's huge because it's deleting node modules as well from that
project, we're also going to install react dev tools for chrome.
Now if you're not using chrome, this is highly advised, install Chrome. So you would go to chrome.google.com,
install Chrome, and then Google for React Developer Tools. You're going to find this offered by
Facebook,
click Add to Chrome. And we'll get more into what this does later, just now is a great time to install
it.
So get that started and let's jump back in to terminal. So you can pause this video to install react dev
tools. Come back to it and I will be right here.
So what we're going to do is change directory and to projects, and then we're going to issue the command
create-react-app, space, and now we're going to name a directory name for where we want to create
the project in.
So in this instance it's going to just be demo.
And this is going to take a few minutes
so I will leave you guys here.
This has been how to setup an environment to get working in react. In the next video we're going to
be looking at a basic project structure, going to be going over how to install,
well, no, I'll probably go over installing libraries to the project a bit later.
So for right now, we're just going to look at the project itself and let's do that.