How to Install React JS On Windows? - Detailed Guide (2025)

Latest Update: With WSL 2’s improved Linux kernel integration on Windows, React developers now enjoy a seamless development environment. Running Node.js and npm inside WSL 2 offers near-native Linux performance, better compatibility with Linux-based tooling, and reduces Windows-specific path and permission issues.

When setting up React.js on Windows for building modern web applications, having a clear and efficient installation process is crucial. React.js relies on a combination of tools like Node.js, npm, and development environments that must be properly configured to ensure smooth development. 

This detailed 2025 guide will walk you through how to install React JS on Windows, covering the latest best practices and tools so you can start building scalable, responsive React applications quickly and hassle-free.

Improve your understanding of React on Windows with our online software development courses. Learn how to use JavaScript for your specific project requirements! 

Install React JS On Windows: An Explanation

React was an in-house project of Facebook, and it was made open to the public in the year 2013. The adoption of ReactJS has seen an upward curve since its advantages have been realized. Various startups and established organizations are now adopting the technology and upgrading their technology stack.

In 2025, professionals who can use React and other JavaScript tools to streamline web applications will be in high demand. If you're looking to develop skills in frontend development, here are some top-rated courses to help you get there:

• AI-Driven Full-Stack Development Bootcamp
• Master of Design in User Experience
• Professional Certificate Program in Cloud Computing and DevOps

What is React.js?

ReactJS is a library written in TypeScript. It utilises the syntax of the modern version of JavaScript as described by ES6 and its higher version. To get started with building React applications, you need to install React JS on Windows and set up the development environment. 

Applications built using ReactJS use the Single reusability principle. This advocates the idea of building web pages and applications using components and unidirectional flow. In React we have the concept of states and the concept of immutability. Components have hierarchy in terms of Parent and Child components. 

To install React JS on Windows, follow the proper setup steps, and consider integrating the best full-stack developer courses to enhance your proficiency in ReactJS and its underlying principles.

You can get to know more about React.js with upGrad’s free React.js For Beginners course. You will learn to build dynamic web UIs, create reusable components, and develop a Phone Directory app. It’s perfect for aspiring web developers and front-end enthusiasts.

Also Read: React Functional Components: In-Depth and Detailed Guide

Prerequisite for Windows

To install React JS on Windows, your system will require the minimum configuration as below.

1. Windows XP, Windows 7 (32/64 bit) or higher
2. Minimum 4 GB RAM and higher
3. 10 GB available space on the hard disk
4. At least one Internet Browser e.g. Chrome, Firefox, Microsoft Edge etc.
5. Node.js
6. Active internet connection minimum speed 512kbps and above.
7. At least one installed code Editor to test and debug your code e.g.  

• Atom
• Sublime
• Visual studio code

Installing Node.js and NPM on Windows 10

To run ReactJS, you will first need to install React JS on Windows and ensure that Node.js is installed on our system. Node.js is a server which will help you run the React code. It is based on non-blocking input and output and the Chrome V8 JavaScript engine. The Node.js code is open source.

NPM which is an abbreviation of Node package manager, npmjs.com is supported by various developers around the world. It has various node modules, using which developers can host and publish their modules on the open-source community.  It hosts modules in private and public visibility. A module carries code which exists to serve high or low level functionalities. In terms of code adoption and availability of various modules it gives an edge and tries to make the developer more productive.  

We can plug in and plug out the module. Some modules are dependent on other modules; which is defined as dependency among modules.

While building an application, a developer can pick the module, tweak and remix it to suit the application needs, and can then release to the open-source community. So, instead of reinventing the wheel, it is like picking a wheel (npm module) from npmjs.com, giving it further momentum and giving it back to the open source community.

Here’s how you can install Node JS on Windows:

Depending upon our Windows OS version in terms of 32 Bit or 64 Bit, we can pick the installer and install that version.  

In this tutorial I am using Windows 8, 64 Bit.  

The Node.js installer includes NPM. It is best to install the even numbered version of NPM.

Depending upon your operating system, the Nodejs.org home page will show the Download button and recommended LTS version.

After the download is complete we will go to the downloads folder and run the installer.

The installer will show the below Setup Wizard. Click next.

The next screen will ask for the End-user License Agreement. Select the checkbox at the bottom right to provide your consent and click on Next to proceed with the installation.

The installer will ask for Destination folder and the default path set by installation is C:\Program Files\nodejs\
Click on Next button

The above screen is an important step in the installation process. And if you see closely it also sets the environmental path variables to command prompt on Windows. 

Click on Next to continue with the installation.

The Windows OS may ask you to allow Node.js installation and make changes.Click on Yes button.

During the installation, if you have allowed for Chocolatey and required modules installation for C++ and Python, you will see the UI below in the command prompt. This installation requires 3 Gb of free disk space. In this tutorial this step is not required, so we are skipping this step by closing the window.

If you are interested in installing it, press Enter to continue.

Once the installation is complete you need to verify the Node.js installation.  

For this, we will use the command prompt.

To run command prompt

Press keys Win+R

And type cmd in the window below.

Next Click on Ok or Press Enter on the keyboard.

You can get to know more about Node.js with upGrad’s free Node.js For Beginners course. Learn to build scalable backend applications with this Node.js free course. Master Node.js fundamentals, architecture, and core modules.

Also Read: Top 45+ Nodejs Project Ideas for Beginners and Professionals

Now that you know how to install Node JS, we can move on to installing React.

Installation of React

After installation of Node.js, we need to install React JS on Windows. To check the Node.js version, open the Windows command prompt. 

Press Win+R and type cmd. 

In the command line, type   

node -v to see its version. 

We can also check for npm version, which is installed with Node.js, with the following command 

npm -v 

After running these commands, we can check the node version v14.15.1 and npm version 6.14.8

As we have confirmed the Node.js installation we can proceed to the next steps.

While in the command prompt, we have navigated to a folder called Codefactory by following the command cd Codefactory

In this folder, we have created a folder called react-windows by using the command mkdir react-windows.

After the folder react-windows has been created, we will change the directory to react-windows with the command 

cd react-windows 

ReactJS can be installed in various ways. 

Now, we will type npm init. It will ask for the below configuration line by line. 

Insert your input, followed by Enter keypress to proceed with the next configuration.   

At the end of the configuration it will confirm for the inputs you have entered. If you are happy with the configuration data, type yes and enter to continue

The npm init will help us to create a package.json file.

Now, the next step to install React requires us to go to the command prompt and type the following command in the react-windows directory.

npm install --save react

And after the above command npm install --save react-dom

Behind the scenes, these commands fetch the specified module from npmjs.com and download it in the local codebase.

Let's have a look at the react-windows folder. Here we can see some newly created directories in node_modules.

So, in this tutorial, we have learned to install React and reactDOM. 

But to see the ReactJS SPA (single page app) there is more work to be done in the above code.

As an alternative and fast approach we can do it via create-react-app

Let us move to Codefactory folder and with the command cd.. create another folder react-cli

Next, type the following command mkdir react-cli

Now we will use create-react-app module and type the following command

Please note that my-fast-app is the name of your app. This is an example and you can be creative in choosing your own name.

npx create-react-app my-fast-app

If we see closely it will take care of the rest of the installation steps, and react, react-dom and other related modules are installed automatically.

This process is a little data intensive, so please be patient while the download and installation happens

When the above step gets completed the command prompt displays the below output.

Now, let us run our first react app, by navigating to my-fast-app directory as below

cd my-fast-app

And enter the next command as npm start

The npm command will show the application in the browser. http://localhost:3000

And if you are running node.js for the first time using npm command, it will ask for permission to allow access and we need to allow access to run.

As we are using a code editor we can have a look at the directory structure and some of the important files, such as index.html in the public folder, in src folder the index.js and App.js. The src folder contains the react component which we can build further on this codebase. 

index.js is the js invocation point for react app.This index.js is linked with the App.js, which is responsible for showing the content in the browser. That’s what we see on the demo page.

Let’s edit the App.js by going to line 10 and adding the following code

Talk is cheap, show me the <code>Code</code>

Once you save the file by Ctrl+S

The code will be auto refreshed in the browser, after compiling.

It will show us the following output.

So, now feel free to change messages and alter the page layout and structure for experimentation.

If you are familiar with CSS, you may also change the page style using App.css and tinker with the code as well.

You can also build relevant UI/UX skills for advanced web development with upGrad’s Master of Design in User Experience. You’ll learn to create user-centered designs that are innovative, efficient, and aligned with current industry trends, ensuring that your designs are not only functional but also impactful.

Also Read: Routing in ReactJS for Beginners

Now, let’s see how you can install React JS on Windows using chocolatey script.

Install React.js Using the Chocolatey Script

Chocolatey is a powerful package manager for Windows that simplifies the process of installing, updating, and managing software. It brings the convenience of package management similar to what is common in Linux environments to the Windows platform. By using Chocolatey, developers can automate the installation of various tools and libraries, including Node.js and React.js, reducing the manual effort involved in setting up a development environment. 

Step 1: Prerequisites

Before proceeding with the install react js setup on windows, it's essential to ensure Chocolatey is installed on your Windows machine. If it's not already installed, you can set it up with a single command in an elevated PowerShell session. This command adjusts the execution policy and downloads the necessary scripts for Chocolatey installation. 

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Step 2: Install Node.js and NPM

React.js relies on Node.js and its package manager (NPM). Use Chocolatey to install them effortlessly: 

choco install nodejs

Step 3: Install React.js

With Node.js and NPM in place, the React JS installation in windows becomes straightforward: 

npm install -g create-react-app

Step 4: Verify Installation 

Confirm the successful installation by running the following command: 

create-react-app --version

This should display the installed version of create-react-app, ensuring that React.js is now ready for use on your Windows system. 

We've used the Chocolatey script to make the installation process faster and simpler. It lowers the steps for manual setup and makes it efficient. This way of setting up React.js on Windows follows industry standards and is handy for developers. 

If you want to build a higher-level understanding of Javascript, upGrad’s Advanced Javascript for All course is what you need. Learn about prototypes, scopes, classes, modules, async programming, and more to enhance your web development skills and become a proficient JS developer.

Also Read: React JS Architecture: Components & Implementation Steps

Once you install React JS on Windows, you have to check if it is installed properly.

How to Test if React.js Installation is Properly Done?

After successfully completing react JS setup in windows machine, it's crucial to ensure that the installation is error-free and that the framework functions as expected. Here's a simple yet effective method to test the proper installation of React.js. 

Step 1: Open a Command Prompt or Terminal

Ensure you have an open command-line interface, such as Command Prompt or PowerShell on Windows or Terminal on macOS/Linux.

Step 2: Check the React.js Version

Run the following command to display the installed version of React:

npx create-react-app --version

This command uses create-react-app to check the version. Since create-react-app is a part of the React.js ecosystem, its version corresponds to the installed React.js version. 

Step 3: Verify Output 

The command will output the version number of create-react-app. This version number is associated with the React.js installation. For example, the output might look like: 

5.0.1

This indicates that React.js version 5.0.1 is successfully installed on your system. 

By checking the version of create-react-app, you can easily verify the React.js version on your Windows machine. This straightforward method provides confidence in the correctness of your React.js installation and ensures you're equipped with the latest features and improvements.

If you want to improve your knowledge of object-oriented programming, upGrad’s Java Object-oriented Programming can help you. Learn classes, objects, inheritance, polymorphism, encapsulation, and abstraction with practical programming examples.

Also Read: ReactJS vs React Native – Key Difference, Advantages, and Disadvantages

Once you install React JS on Windows, here’s how you can use it.

How to Use React.js?

Now that React.js is successfully installed on your Windows machine, let's delve into how to use this powerful JavaScript library to build dynamic and interactive user interfaces. Below are essential steps, code snippets, and tips to kickstart your React.js development journey: 

Step 1: Create a New React App 

Initiate the creation of a new React app using the following command in your preferred command-line interface:

npx create-react-app my-react-app

Replace "my-react-app" with your desired project name. 

Step 2: Navigate to the App Directory 

Move into the newly created app directory: 

cd my-react-app

Step 3: Create a Simple React Component

Begin by creating a basic React component. Open your preferred code editor and create a new file, e.g., MyComponent.js. Define a functional component using the following code:

// MyComponent.js 
import React from 'react'; 
const MyComponent = () => { 
 return ( 
   <div> 
     <h1>Hello, React!</h1> 
     <p>This is my first React component.</p> 
   </div> 
 ); 
}; 
export default MyComponent;

This React component renders the following HTML content on the web page:

<div>
  <h1>Hello, React!</h1>
  <p>This is my first React component.</p>
</div>

When you include and render <MyComponent /> in your React application, it will display a heading saying "Hello, React!" and a paragraph with the text "This is my first React component."

Step 4: Use the React Component in App 

Next, import and use the created component in your main App.js file.

// App.js 
import React from 'react'; 
import MyComponent from './MyComponent'; 
const App = () => { 
 return ( 
   <div> 
<MyComponent /> 
   </div> 
 ); 
}; 
export default App;

This code defines a React functional component named App that imports and renders another component called MyComponent. When App is used in a React application, it will display whatever content MyComponent returns inside a <div>. Essentially, App acts as a container that includes MyComponent’s UI, enabling modular and reusable code structure in your React app.

Step 5: Run the React App

Initiate the development server to see your React app in action:

npm start 

This command will start the development server, and you should see a message indicating that the app is running on a specific port (usually 3000).  

Visit http://localhost:3000 in your browser to view the "Hello, react!" message rendered by your first React component. 

Tips for React Development: 

1. Understanding Components: React applications are built using components. Components are reusable and self-contained pieces of UI. Understand the difference between functional and class components. 
2. JSX Syntax: JSX is a syntax extension for JavaScript recommended by React. It allows you to write HTML elements in your JavaScript code. 
3. State and Props: Learn about state and props. The state allows components to manage and maintain their data, while props enable the passing of data between components. 
4. Component Lifecycle: Familiarize yourself with the React component lifecycle methods. 
5. React Hooks: Explore React Hooks like useState and useEffect for functional components. They provide a way to use state and lifecycle features in functional components. 
6. Routing: For multi-page applications, consider using React Router to handle navigation between different views. 

Remember, these steps and tips serve as a foundation for your React.js journey in the Web Design and Development course. Continuously explore the React documentation and engage with the vibrant React community for more advanced concepts and best practices in building robust web applications. 

Also Read: 28 React Projects for Beginners + Source Code: 2025 Edition

Next, let’s look at how you can uninstall React JS on Windows.

How to Uninstall React.js from Windows? 

Uninstalling React.js from your Windows machine involves a few straightforward steps. Follow this step-by-step guide to remove React.js and associated packages from your system. 

Step 1: Open the Command Prompt or PowerShell 

Open the Command Prompt or PowerShell on your Windows machine. You can do this by searching for "Command Prompt" or "PowerShell" in the Start menu. 

Step 2: Navigate to Your React Project Directory (if applicable) 

If you have an existing React project, navigate to its directory using the cd command. For example: 

cd path\to\your\react\project  

Step 3: Uninstall Node Modules 

If you are within a React project, you need to uninstall the installed Node modules. Run the following command: 

npm uninstall react react-dom 

This command removes the React and ReactDOM packages from your project. 

Step 4: Remove Create-React-App (if installed globally) 

If you installed create-react-app globally, uninstall it using the following command:

npm uninstall -g create-react-app

Step 5: Check and Remove Global Packages (Optional) 

Check if there are other globally installed packages related to React and uninstall them if necessary:

npm list -g --depth=0   npm uninstall -g <package_name>

Replace <package_name> with the names of any global packages related to React. 

Step 6: Delete Your React Project (if desired) 

If you want to remove the entire React project, including the project directory, use the following command:

rd /s /q path\to\your\react\project  
Replace path\to\your\react\project with the actual path to your React project.

Step 7: Check for Global Node Modules (Optional) 

Check if there are any globally installed Node modules related to React. Navigate to the directory where Node.js is installed (usually in C:\Users\\AppData\Roaming\npm) and delete any React-related folders. 

Step 8: Remove Node.js and NPM (Optional) 

If you wish to uninstall Node.js and NPM altogether, you can do so through the "Add or Remove Programs" in the Control Panel. 

By following these steps, you should successfully uninstall react on windows and associated packages from your Windows environment. Always exercise caution when removing global packages, as they may be used by other projects. 

Remember: Uninstalling React doesn't erase your React projects. They'll remain safe and sound, ready to be reignited when you're ready to reunite with React in the future. 

Also Read: ReactJS Developer Salary in India: Trends, Growth, and Insights for 2025

If you run into issues when you install React JS on Windows or run it, it’s good to have a list of troubleshooting strategies in place.

Troubleshooting Common Issues While Installing React in Windows (With Solution)

When performing a React JS setup in Windows, you may encounter some common issues. Let's address some common problems and provide solutions to ensure a smooth installation process. 

1. Node.js or NPM not recognized

Solution: Ensure that Node.js and NPM are added to the system PATH. During Node.js installation, there is an option to add them to the PATH. If not done, manually add the paths to the system environment variables. 

2. Chocolatey Installation Error

Solution: If you face issues installing Chocolatey, make sure you run the installation script in an elevated PowerShell session. Additionally, check for any network or firewall restrictions that might be hindering the installation. 

3. npm install -g create-react-app fails

Solution: Try using npm install -g create-react-app with the --force flag to override any potential conflicts. If the issue persists, check your internet connection and ensure that the npm registry is accessible.

4. Port Already in Use (e.g., 3000)

Solution: If you encounter an error stating that the default port (e.g., 3000) is already in use, terminate the process using the port or change the port in your React project's package.json file. 

5. Missing Dependencies for Node.js

Solution: Review the Node.js documentation for your specific Windows version. Ensure that all required dependencies, such as Visual C++ Redistributable, are installed. 

6. create-react-app Command Not Found

Solution: If you are unable to run create-react-app, verify that your npm global installation path is in your system PATH. On Windows, it's usually C:\Users\<username>\AppData\Roaming\npm. 

7. Permissions Error

Solution: Try running the installation command prompt or PowerShell with administrator privileges. This grants broader access to system resources. 

8. Antivirus Blocking Installation

Solution: Some antivirus software may interfere with the installation process. Temporarily disable the antivirus or add exceptions for the installation directories. 

9. Outdated npm or Node.js Versions

Solution: Ensure that you are using the latest versions of npm and Node.js. You can update npm using:

npm install -g npm@latest

Additional Tips: 

• Clear Cache: Run npm cache clean --force to clear potential npm cache issues. 
• Reinstall React: If problems persist, try reinstalling React cleanly. 
• Seek Community Help: Don't hesitate to reach out to React's online communities for support. There's a wealth of knowledge and helpful members ready to assist. 

By addressing these common issues systematically, you can troubleshoot and resolve any roadblocks encountered during the React.js installation process on your Windows machine.

Also Read: ReactJS vs Angular: Difference Between ReactJS and Angular

Next, let’s see how upGrad can guide you through your learning path.

How Can upGrad Support Your JavaScript Learning Journey?

Now, with this powerful library at your fingertips, the possibilities are endless. Build dynamic, interactive web interfaces, craft pixel-perfect user experiences, and join the thriving community of React developers pushing creativity forward.  

upGrad’s programs guide you step-by-step through setting up your React JS environment on Windows and advancing your development skills with hands-on projects, real-world case studies, and expert mentorship.

Here are some top upGrad courses (including free options) to accelerate your learning journey:

• Object Oriented Analysis and Design for Beginners
• JavaScript Basics from Scratch
• Advanced JavaScript for All
• Data Structures & Algorithms
• Programming with Python: Introduction for Beginners
• Learn Basic Python Programming

For personalized career guidance, contact upGrad’s counselors or visit a nearby upGrad career center. With expert support and an industry-focused curriculum, you'll be prepared to tackle front-end development challenges and advance your career.

Explore Our Software Development Free Courses

Master the most in-demand software development skills that employers are looking for. From coding languages to development frameworks, these skills will help you stand out in the tech industry.

In-Demand Software Development Skills

Enhance your expertise with our comprehensive Software Engineering courses, designed to equip you with practical skills and knowledge to excel in the ever-evolving tech landscape.

Explore our Popular Software Engineering Courses

References:
https://dev.to/david_oyewole/windows-subsystem-for-linux-wsl-2ef2#:~:text=Why%20Use%20WSL?,performance%20and%20integration%20with%20Windows.