ReactJS | Setting up Development Environment

To run any React application, we must have NodeJS installed in 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 setup NodeJS on our PC, the next thing we need to do is set up React Boilerplate.

Step 2: 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 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 in React.



Step 3: Create a react app. Now to create an app we will use the boilerplate we installed. 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 with in 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. Bydefault 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.



My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.