ReactJS | Setting up Development Environment

25 Jan, 2021
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. 
For the Latest Versions which include Node >=8.10 and npm >=5.6: For using the latest features of JavaScript which provides a good development experience the machine should contain a version of Node >=8.10 and npm >=5.6.
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. 
create-react-app 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:  
npm start
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. 
shubhamyadav4
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS setState()
How to pass data from one component to other component in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?