Install React.js on Windows 2026: Step-by-Step with Node.js & Vite Setup

If you want to start building modern web applications, learning how to Install React.js on your system is the first step. React.js makes it easy to create fast and interactive user interfaces using reusable components. In this blog, you will learn how to Install React.js on Windows in a simple step-by-step way.

By the end of this guide, you will set up Node.js, use Vite, and successfully run your first React.js application. This blog will help you understand the basic setup needed to Install React.js and get started with development quickly.

TL;DR Summary

• This blog helps you Install React.js on Windows in a simple way, even if you are a beginner, using Node.js and Vite.
• Create React App is officially deprecated as of February 2025; this guide uses Vite, the modern recommended approach, covered in a dedicated comparison below.
• If your React app won’t start after you Install React.js, it’s almost always a Node/npm version mismatch, a port conflict, or a missing dependency, covered in a troubleshooting section.
• There’s no meaningful difference in how you Install React.js between Windows 10 and Windows 11, the commands are identical.
• You’ll also quickly understand the important features of React.js in a simple way.

What is React.js?

Before you Install React.js, it helps to know what it actually is. React.js is a popular open-source JavaScript library developed by Facebook, primarily used for building user interfaces, especially for single-page applications.

Its main focus is on rendering UI components efficiently and updating them in response to data changes, making development smoother for complex, interactive web applications.

Key features of React.js include:

1. Component-Based Architecture: React breaks down the UI into reusable components, each encapsulating its own logic and rendering, making the development and maintenance of complex applications easier.
2. Virtual DOM: React uses a virtual representation of the actual DOM to optimize updates and minimize direct manipulation of the browser’s DOM, resulting in faster rendering.
3. Declarative Programming: React allows developers to describe how the UI should look at any given time. When data changes, React efficiently updates and re-renders the components.
4. Unidirectional Data Flow: React follows a one-way data flow, making it easier to track data changes, which helps with debugging and ensures predictable behavior.
5. JSX Syntax: React uses a syntax extension called JSX (JavaScript XML) that allows developers to write HTML-like code directly within JavaScript.

This is exactly why so many developers choose to Install React.js over other libraries. React is widely used for building web applications due to its flexibility, scalability, and strong community support.

Also Explore: Top Technologies to Learn for a JavaScript Backend Developer

After understanding the fundamental concepts of React.js, let’s move forward with a step-by-step guide on how to Install React.js on Windows.

Note:

• The old method (Create React App) is now deprecated
• We will use the latest method to Install React.js
• In this blog we will use the Vite build tool
• Vite is faster and more modern for setup

Explore HCL GUVI’s free React.js resources to learn faster and start building real-world web applications with ease: React eBook

How to Install React.js on Windows

Step 1: Install Node.js

• Search for Node.js download on Google.
• Open the official Node.js website.
• Download the LTS version, as it is the stable release recommended for most users.
• Once the file is downloaded, open the installer.
• Click “Next” and complete the installation using the default settings.
• Node.js is required because it installs npm, which helps us Install React.js and manage a Vite React application.

Step 2: Open Terminal in Your Project Folder

• Go to the location where you want to create your React project.
• Right-click inside the folder.
• Click on “Open in Terminal” or “Open PowerShell Window Here”.
• This will open the terminal directly in that folder, making the setup process easier.

Also Read: How to Render an Array of Objects in React? [in 3 easy steps]

Step 3: Check Node.js and npm Installation

• In the terminal, type the following commands one by one: node -v npm -v
• If both commands show version numbers, it means Node.js and npm are installed correctly.
• These two tools are required before you can Install React.js using a Vite React application.

Also Read: Use ReactJS to Fetch and Display Data from API – 5 Simple Steps

Step 4: Create a New Vite React App

• In the terminal, run the following command: npm create vite@latest
• Press Enter when asked to continue.
• Now Vite will ask a few questions.

Also Read: Top ReactJS Interview Questions and Answers Of 2026

Step 5: Enter Your Project Details

• First, enter your project name. Example: demo
• Next, select the framework. Choose React using the arrow keys and press Enter.
• After that, select the variant. Choose JavaScript if you want to create the project using JavaScript.
• You can also choose TypeScript if required.

Step 6: Move Inside the Project Folder

• After the setup is completed, Vite will show some commands.
• Move inside your project folder using: cd demo
• Replace “demo” with your project name if it is different.

Step 7: Install Project Dependencies

• Run the following command: npm install
• You can also use the short command: npm i
• This command installs all the required libraries and packages for your React application.

Step 8: Start the Vite React Application

• Run the following command: npm run dev
• After running the command, Vite will generate a localhost URL.
• Press Ctrl + Click on the URL to open it in your browser.
• You will now see your Vite React application running successfully.

Step 9: Explore the Vite Documentation

• Inside the default application page, you will see the Vite logo.
• Clicking the logo will open the official Vite documentation.
• You can use the documentation to learn more about Vite features and project setup.

Ready to elevate your web development skills? Join HCL GUVI’s React.js course and transform your expertise into mastery. Enroll now!

Create React App vs Vite — Which to Use in 2026 (Vite Is Now Recommended)

The React team officially deprecated Create React App (CRA) on February 14, 2025, which directly affects how you should Install React.js today, so this isn’t just a stylistic preference anymore.

Why this matters practically: CRA still technically works, existing projects will keep building, but it receives no security patches, no dependency updates, and breaks with React 19 unless you manually eject and fix the dependency tree. The React team itself now recommends Vite (or a full framework like Next.js) for any new project. This is exactly why this guide shows you how to Install React.js using Vite from Step 4 onward, instead of the older npx create-react-app command you may still see in older tutorials.

Fix: React App Not Starting on Windows — Common Errors

If you’ve followed every step to Install React.js above but your app still won’t run, these are the errors that come up most often on Windows specifically.

Error: “npm is not recognized as an internal or external command”

This is one of the most common blockers when you first try to Install React.js. This means Node.js wasn’t added to your system PATH during installation. Reinstall Node.js from nodejs.org, and restart your terminal (or your computer) after installation completes.

Error: “Port 5173 is already in use”

Vite’s default dev server runs on port 5173. If another project or process is already using it, Vite will usually pick the next available port automatically, but if it doesn’t, close other running dev servers or restart your terminal.

Error: Blank white screen after “npm run dev”

This is usually a browser cache issue or a component error being silently swallowed. Open your browser’s developer console (F12) to check for actual error messages, and try a hard refresh (Ctrl + Shift + R).

Error: “npm install” fails with permission errors while trying to Install React.js

This typically happens when Windows folder permissions block npm from writing files. Try running your terminal as Administrator, or move your project folder out of a restricted directory like Program Files.

Error: Dependency version conflicts during npm install

If you see peer dependency warnings or errors, delete the node_modules folder and package-lock.json file, then run npm install again for a clean install.

Error: Antivirus or firewall blocking localhost

Some antivirus tools flag Node’s local dev server as suspicious. If npm run dev runs without errors but the browser won’t load localhost, temporarily check your antivirus or Windows Firewall settings for blocked local connections.

React Install on Windows 10 vs Windows 11 — Any Difference?

Good news for anyone wondering: there’s no meaningful difference in how you Install React.js between Windows 10 and Windows 11. The Node.js installer, npm commands, and Vite setup steps needed to Install React.js work identically on both.

The only minor differences worth knowing:

• Terminal defaults: Windows 11 defaults to Windows Terminal, which handles the “Open in Terminal” right-click option slightly differently than Windows 10’s older Command Prompt/PowerShell menu, but both work fine for every command in this guide.
• PATH behavior: Both versions handle the Node.js installer’s PATH configuration identically, so if node -v fails on one, the fix (reinstalling with PATH options checked, then restarting your terminal) is the same on either OS.
• Windows Defender/SmartScreen: Windows 11’s default security settings are marginally stricter, so you’re slightly more likely to see a SmartScreen prompt when running the Node.js installer for the first time. This isn’t a sign of a problem, just click “More info” then “Run anyway.”

The bottom line: if you can run a terminal and install software on your machine, your Windows version doesn’t change any step to Install React.js in this guide.

Ready to elevate your web development skills? Join HCL GUVI’s React.js course and transform your expertise into mastery. Enroll now!

Conclusion

Setting up a React development environment with Node.js and Vite/Create React App is the first step to building modern web apps. It gives you all the essential tools to create fast, scalable, and interactive applications, work with reusable components, and manage state efficiently. This setup is the base for starting your journey into the React ecosystem and building real-world projects.

Must Explore: 10 Best React Project Ideas for Developers [with Source Code]

FAQs

Why do we need Node.js to install React.js?

Node.js provides npm, which is required to install and manage React.js packages.

What is the use of npm in React.js setup?

npm helps in installing all required libraries and dependencies for the project.

Why do we use Vite for React.js setup?

Vite gives a faster development environment and quick project startup.

What happens after running npm install?

It downloads and sets up all required project dependencies.

Why do we use npm run dev?

It starts the React development server and opens the project in the browser.

Can we change the project name during setup?

The project name can be set while creating the Vite React app.