Before setting up a React App or project, first you’ll need to see whether NodeJS is installed on your system. NodeJS is required to be installed for having Production-Ready apps so that you don’t run into any trouble from here on.

So, in order to see whether Node is installed on our system, type this in the Terminal (or PowerShell on Windows) :

node -v

If Node is installed on your machine, it’ll display the version. If not, then go to nodejs.org to download and install the latest version of NodeJS ( preferably LTS version). Next, check again by running the above command again. It should display the version.

Next, check whether NPM (Node Package Manager) is installed. Type npm -v to check. You should see that the version is being displayed on the terminal. NPM comes with NodeJS so you don’t have to install it separately.

You’re now ready to set up your first React project development environment. To create a project, cd into a repository of your choice using the terminal and run these commands :

npx create-react-app my_first_project

It will now create a React project folder with the name my_first_project (you can give it any name you want) in the destination. This folder is like a template which already contains all the things you need to write your react codes and build an app/project. It’ll take some time to download.

Next, run the below terminal commands :

cd Desktop/my_first_project
# first cd into the location of the react project (this, in my case, yours might be different)

npm start
# to start the project

The above commands will start the development server where our my_first_project is hosted.

It will open up automatically in localhost:3000 in your default browser. If it does not open up of itself, you can always visit the page manually by typing the address http://localhost:3000/ in the browser.

Here, you’ll see the dummy React project for now. This is editable.

Now you can open up this project folder in your favourite code editor.

In order to stop or terminate the React app development server type Ctrl + C (cancel). Now if you reload the React app page it will terminate or cancel the server from running.

So, to start and stop your React project these are the commands:

npm start
# to start the project/app in the development server

Ctrl + C
# to terminate or shut down the server from running your project and 'npm start' again to start again

You’re now ready to create your very own React project for the first time! Learn more on React on the official site here.