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.

You should now be able to see the source code of your new React app in your code editor!

In the children we'll explore all the different parts of the code that create-react-app has given to us.