To run any React application, we must have NodeJS installed on our PC. So, the very first step will be to install NodeJS.
Step 1: Install NodeJS. You may visit the official download link of NodeJS to download and install the latest version of NodeJS. Once we have set up NodeJS on our PC, the next thing we need to do is set up React Boilerplate.
Step 2: Setting up react environment for older and latest versions, follow anyone according to your node version.
For Older Versions which include Node < 8.10 and npm < 5.6: Setting up React Boilerplate. We will install the boilerplate globally. Run the below command in your terminal or command prompt to install the React Boilerplate.
npm install -g create-react-app
After running the above command and successfully installing the boilerplate your terminal will show some output as shown in the below image:
Now after successfully installing the boilerplate the next thing we will do is create our React app. We can use the create-react-app command for creating an app to React.
Run the below command to create a new project
npx create-react-app my-app
The above command will create the app name my-app as shown in the image below :
You can run the project by typing the command cd my-app.
cd my-app npm start
It will give you the output in the terminal as shown in the image below :
Now you can view your app in the browser as shown in the image below :
Step 3: Create a React app. Now to create an app we will use the boilerplate we installed. The below command will create an app named myapp.
The above statement will create a new directory named myapp inside your current directory with a bunch of files needed to successfully run a React app.
Let’s have a look at the directory created by the above command:
In the above directory, you can see a number of files. The main files we will be working on within the basic course are index.html and index.js. The index.html file will have a div element with id = “root”, inside which everything will be rendered and all of our React code will be inside the index.js file.
Now, that we have successfully set up the development environment. The last thing left is to start the development server.
Step 4: Start the development server. To start the development server, go inside your current directory “myapp” and execute the below command:
On successfully running the above command your compiler will show the below message:
You can go to the URL shown in the above message to see the changes you are making in your App. By default, the above URL will show the below page:
That’s all! We have a development environment set up and ready. Now we will move ahead to start learning ReactJS development to make some use of it.