To set ourselves up for building a React application in this tutorial, we first need to install a few tools.
NodeJS
NodeJS is a version of the popular JavaScript programming language that can run on your computer. We need it to power the development server which we will be running on our computer to develop our application.
To install NodeJS, go to to nodejs.org and install the version for your operating system.
Code Editor
To write code, we need a code editor. Visual Studio Code is a popular code editor created and maintained by MicroSoft, and is recommended for this tutorial.
Go to code.visualstudio.com to install a version of VSCode for your computer.
Shell
To start a development server for building our application, we need to use a shell or command line.
On Mac you can use your built-in Terminal app.
On Windows you can use the Command Prompt app.
The shell allows us to use some of the tools we have installed. Open your command line and type (without the $
at the start):
$ node -v
and press enter. This tests whether you have installed NodeJS correctly. If you have, it should print the version of NodeJS which you have installed, such as 16.15.0
.
NPM - Node Package Manager
Installing NodeJS also automatically installs NPM (Node Package Manager) which manages JavaScript packages for your projects. To check that it has installed properly, type into your command line:
$ npm -v
If installed properly it will show its version, such as 8.5.5
.
Git
Git is a version control system for code. It manages versions of a software project and allows multiple people working on the same project at the same time. This tutorial series won't require you to work with someone else on the project, but you'll use git to download the initial template project.
First, open a shell and check whether your system already has git installed by running the command:
$ git --version
If it is already installed it will show you the version you have installed such as 2.32.0
. If you don't already have git installed, go to git-scm.com/downloads and download the latest release for your OS.
Then check that git is now installed with the above command. Next, configure git with your name and email so git knows who your work belongs to (yourself).
$ git config --global user.name "John Doe"
$ git config --global user.email [email protected]
Now, use git to download the template project for this tutorial. We'll use the starter ReactJS project at github.com/dqna64/reactjs-project-tutorial.
$ git clone https://github.com/dqna64/reactjs-project-tutorial.git
Once it has downloaded, go into the folder of the project.
$ cd reactjs-project-tutorial
Also open up the project in VSCode by opening up VSCode and opening the folder reactjs-project-tutorial.
![Open VSCode and open a folder](https://imgur.com/T6kP1ov.png)
![Select the my-react-app folder](https://imgur.com/vts088y.png)
You should now be able to see the source code of your new React app in your code editor!
![Your React source code app in VSCode](https://i.imgur.com/0uACQX4.png)
In the children we'll explore all the different parts of the code that create-react-app has given to us.