Hello everyone and welcome to the first tutorial in our learn ReactJS tutorial series! The first thing that we’re going to 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. If you enjoy this tutorial, you will LOVE The Complete Full-Stack JavaScript Course on Udemy!
The first thing we’re going to do is install NodeJS. Let’s navigate to the NodeJS official website to download the installer. If you’re on Windows then you’re going to download the Windows Installer. If you are on Linux, you can open up the terminal to check if Node is already installed. 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 on your system. We will also need npm, the JavaScript package manager. You can can check to see if npm is installed by using the command npm –version in your terminal.
If you’re on Windows, which I think many of you will be, you will go to the NodeJS website to download the installer. You’re going to install LTS because it’s more stable, and I feel safer using that for production. If you want to check out the latest features you can install current, but for this tutorial we’re going use LTS. Download the Windows Installer, either a 32-bit or 64-bit. I believe 32 bit processors are no longer in production (I could be wrong), so you’re most likely going to download the 64-bit version.
If you’re on Windows, the way you can verify which version you need is to right click on the Windows icon and click on System. It will say 32-bit or 64-bit. If you have a 64-bit system you can download the 64-bit version. Otherwise, install the 32-bit version. You’re going to click on the download button and it’s going to download the .msi file. The installation process is very straightforward. By default, the installer is going to add the Node library to the PATH. This is important.
Now the next thing we’re going to need to install is Visual Studio Code. Click and download it for Windows. It’s going to download an installer file, you can click keep, and then you’re going to run that. 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.
The next thing we’re going to install is React itself. You can install React through npm. Go ahead and open powershell, terminal, depending on your host system. If the following commands do not work and you have already installed the prerequisite software, go ahead and open up a new instance. It will load in the new PATH variables and it will be be able to find the Node and npm libraries. Now there are two ways to install Node libraries. 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. That is the method we’re going to use, npm install -g and then the package name. That is the syntax for installing global packages. If you’re in a projects directory that does have a package.json file, that means it’s a node project. So, you can install directly into that project. We’ll get more into that later. For right now, go ahead and type in the following command and hit enter:
npm install -g create-react-app
This process will take a few minutes to complete.
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. Let’s also create a directory for our projects. I will create my project directory in the users directory on Windows. You should see pictures, music, downloads, etc. Just create a new directory, a new folder, and call it projects.
We’re also going to install React Developer Tools for Chrome. If you’re not using Chrome this is highly advised, install Chrome. You can go to chrome.google.com, install Chrome and then Google for React Developer Tools. You’re going to find that this package is offered by Facebook, click Add to Chrome. We’ll get more into what this does later on, however now is a great time to install it.
So what we’re going to do is change directory to projects, and then we’re going to issue the command create-react-app demo. This will create the directory that will host our React project. So in this instance, it’s going to be named demo.
In the next video we’re going to be looking at the basic project structure in React.
You can get The Learn to Code Course Bundle to get access to this and 7 other courses! Our Forever Course Bundle gets you every course I produce, for life!
