Programs

How to Install React on Windows? The Complete Guide

ReactJS is a free, open-source JavaScript library that has significantly changed age-old frontend development techniques. Made public in 2013, React was an in-house project of Facebook. Since then, React has been adopted by various organisations and startups.  Frontend developers with enough knowledge of JavaScript, HTML and CSS can create interactive user interfaces for both web and mobile applications. One of the biggest advantages of ReactJS is its component-based approach. Building encapsulated reusable components with their own independent state simplifies the complex user interfaces.

Interestingly whatever we write in ReactJS might seem like HTML, but it is not. It is known as JSX, JavaScript XML file. This JSX produces React “elements, ” which are rendered into the Document Object Model. In layman’s terms, JSX allows us to write JavaScript logic inside the HTML body. Thus making React much more simple and easy to understand.

In order to make its ideal use, let’s dive in to learn  how to install React JS in Windows.

How to Install React JS on Windows?

System Requirements for Windows

While using ReactJs is quite painless, the process of how to install React JS in Windows can be quite tedious. Since ReactJS is an open-source project, it is not as simple as downloading software from the internet. First and foremost, there are some prerequisites to using ReactJS on your Windows.

  1. Windows Version: Windows XP, Windows 7(32/64 bit) or higher.
  2. Minimum 4 GB RAM required.
  3. A minimum of 10 GB disk space on your hard drive.
  4. An internet browser such as Chrome, Microsoft Edge, Firefox etc.
  5. One editor to debug and test code written in ReactJS.

Learn Software Development Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs or Masters Programs to fast-track your career.

Downloading and Installing Node.js

Node.js is the server that helps you run the ReactJS code on your system. Much like ReactJS, it is also open source. The Node.js installer includes NPM (Node Package Manager), which contains various node modules that developers use to host and publish their own modules in open-source communities. Thus the Node works side by side with the NPM registry, which makes it easier to install any package using NPM CLI. The Node further wraps up the ReactJS application into a single using web packs for easy installation.

Here is the stepwise procedure to download and install Node.js:

  1. To install Node.js go to https://nodejs.org/en/.
  2. Depending upon your Windows OS version, you must pick a suitable installer.
  3. The Node.js home page recommends an LTS version depending on your operating system. Clicking on it will automatically start the download.
  4. You will find the installer in the downloads folder. Run the installer.
  5. A setup wizard will appear on the screen, which will ask for the End-user License Agreement. Accept the terms and conditions to proceed with the installation.
  6. Then the user must select a destination folder with the installer’s default path. Click on next to proceed.
  7. The installer then shows the features that will be installed and also sets the environment path variables to the command prompt. Click next to begin the installation.
  8. After the installation is complete, verify the Node.js in your system using the command prompt. 
  9. Type “node -v” in the command prompt to check the version of Node.js installed.
  10. Type “npm -v” in the command prompt to verify the installation of npm as well.

Installing React

After installation of Node.js, we can install React JS on Windows using two techniques:

  • Using web pack and Babel

  1. Creating Root Folder

Before installing ReactJS, create a root folder with the name “reactFile” using the following commands in the command prompt.

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

After creating the directory, generate a package.json file using the following command in the command prompt. A package.json file helps to create modules.

C:\Users\username\Desktop>reactFile> npm init

The command prompt then asks for information regarding the module; skip it by selecting the “-y” option.

 2. Install React and react-dom

Install React and react-dom packages using the following npm commands and add the packages to the package.json file using the “-save” command.

C:\Users\username\Desktop>reactFile> npm install react –save

C:\Users\username\Desktop>reactFile> npm install react-dom –save

Explore Our Software Development Free Courses

3. Install Webpack

Install webpack, webpack-dev-server and webpack-cli using the following commands. 

C:\Users\username\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Install Babel

Babel is a transpiler that converts JavaScript code into something that the browser understands. Thus installing Babel and its following plugins, namely, babel-loader, babel-preset-env, babel-preset-react, and html-webpack-plugin, is very important. 

Use the following command to install all the babel plugins at once.

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Create ReactJS Files

To finish the installation process, we must manually create certain files using the command prompt.

C:\Users\username\Desktop\reactFile>type nul > index.html

C:\Users\username\Desktop\reactFile>type nul > App.js

C:\Users\username\Desktop\reactFile>type nul > main.js

C:\Users\username\Desktop\reactFile>type nul > webpack.config.js

C:\Users\username\Desktop\reactFile>type nul > .babelrc

6. Setup Compiler, Servers and Loaders

Once these ReactJS files are created inside the “reactFile” folder, you can prepare the deployment server setting it up at port 8001 or any port you want in webpack.-config.js.

Use the following code in the webpack-config.js file,

const path = require(‘path’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

    entry: ‘./main.js’,

    output: {

       path: path.join(__dirname, ‘/bundle’),

       filename: ‘index_bundle.js’

    },

   devServer: {

      inline: true,

      port: 8001

   },

   module: {

      rules: [

         {

            test: /\.jsx?$/,

            exclude: /node_modules/,

            loader: ‘babel-loader’,

            query: {

               presets: [‘es2015’, ‘react’]

            }

         }

      ]

   },

   plugins:[

      new HtmlWebpackPlugin({

         template: ‘./index.html’

      })

   ]

}

7. Setting up index.html

Inside the index.html write a regular HTML code with div id=” app” as the root element and then further add the index_bundle.js script in the HTML body.

In-Demand Software Development Skills

8. Setting up App.js and main.js

Write the React component inside App.js to render a class or function. Insert the text that you wish to render inside the component, which will appear on the browser once compiled. Then import the component to our root App element inside the main.js so that results appear on the browser. 

Create a file “.babelrc” and insert the following lines of code,

{

   “presets”:[“env”, “react”]

}

9. Displaying the Content on Webpage

The setup is finally complete, and the server will be up and running once you type the following command in the command prompt.

C:\Users\username\Desktop\reactFile>npm start

As soon as you press enter, the browser will show you the message you rendered inside the component.

  • Using create-react-app command

  1. Install create-react-app

Open the command prompt and write the following code to install the create-react-app.

C:\Users\username\Desktop>npx create-react-app my-app

This command installs all required files and folders inside your desktop’s “my-app” folder. This one line of code finishes off the installation of React in your system in a few minutes.

   2. Run the Server

Go to the command prompt and type

C:\Users\username\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

Your React project is up and running on your browser with the help of localhost, which hosts your project on the port available.

Explore our Popular Software Engineering Courses

Conclusion 

ReactJS has changed the frontend development game since its release and has grown to be one of the most popular open-source JavaScript libraries. Several companies, such as Meta, Netflix, and Slack, use ReactJS. One of the biggest advantages is the reusability of the components to render changes into the webpage. Several React apps are deployed to Azure Web App using Azure DevOps. This is one of the most sought-after skills in the IT industry now. 

If you are a React developer, you can enhance your skillset by knowing Azure DevOps through upGrad’s Advanced Certificate Programme in DevOps from IIIT Bangalore. The course offers more than 250 hours of learning modules along with an interview preparation guide. You will also get to attend career mentorship sessions with DevOps experts who can give you a clear roadmap of what the industry expects. You receive a certificate and IIITB alumni status at the end of the course, making it an exceptional addition to your resume!

What is the difference between ReactJS and React Native?

ReactJs is used to create user interfaces for web pages, while React Native is used for building user interfaces for mobile applications.

Is React declarative or imperative?

React is declarative in nature which is basically telling the application what to do rather than how to do it.

What are Hooks in React?

Previously to change the state of a component, it was necessary to render it inside a class. With the latest feature of React Hooks, one can use State, and other React features without declaring a class component. Therefore function components can be used instead of class components which are much more complex compared to the former.

Want to share this article?

Prepare for a Career of the Future

Leave a comment

Your email address will not be published. Required fields are marked *

Our Popular Software Engineering Courses

Get Free Consultation

Leave a comment

Your email address will not be published. Required fields are marked *

×
Get Free career counselling from upGrad experts!
Book a session with an industry professional today!
No Thanks
Let's do it
Get Free career counselling from upGrad experts!
Book a Session with an industry professional today!
Let's do it
No Thanks