How to Install React JS: A Complete Setup Guide for Web Developers

React JS is one of the most widely used JavaScript libraries for building user interfaces — but getting it installed correctly depends on your development environment, your project type, and how much configuration you want to manage. Here's a clear breakdown of what's involved.

What React JS Actually Is (Before You Install Anything)

React is a JavaScript library developed by Meta for building component-based UIs. It doesn't run as a standalone application — it runs inside a JavaScript project, typically alongside a build tool, a package manager, and a local development server.

That means "installing React" is really about setting up a JavaScript development environment that includes React as a dependency. The steps vary slightly depending on your operating system, your existing tools, and your project goals.

Prerequisites: What You Need First

Before React can be installed, your machine needs two foundational tools:

• Node.js — the JavaScript runtime that lets you run JS outside the browser. React's tooling depends on it.
• npm (Node Package Manager) — installed automatically with Node.js. It's used to download and manage packages, including React itself.

Some developers prefer Yarn or pnpm as alternative package managers, but npm works out of the box and is the most common starting point.

To check if Node.js is already installed, open your terminal and run:

node -v npm -v 

If both return version numbers, you're ready. If not, download Node.js from the official Node.js website and install it for your OS (Windows, macOS, or Linux).

The Two Main Ways to Install React

1. Using Create React App (CRA)

Create React App is the official, beginner-friendly scaffolding tool. It sets up a full React project with a pre-configured build pipeline — no manual configuration required.

To create a new React project with CRA:

npx create-react-app my-app cd my-app npm start 

This installs React, ReactDOM, and the development server, then opens your project in the browser at localhost:3000. The npx command runs the CRA tool without permanently installing it globally.

Best suited for: Beginners, learning environments, and projects where you want zero build configuration.

Worth noting: CRA has become slower to receive updates compared to newer tools, and it generates a heavier project setup than many developers need today.

2. Using Vite (Modern Alternative) ⚡

Vite has become the preferred build tool for many React developers due to its significantly faster startup and hot-module replacement speeds compared to CRA.

To create a React project with Vite:

npm create vite@latest my-app -- --template react cd my-app npm install npm run dev 

This sets up a leaner project structure and runs a development server at localhost:5173 by default.

Best suited for: Developers who want faster builds, a lighter project footprint, or are building production applications.

Installing React Manually (Into an Existing Project)

If you already have a project and want to add React to it — rather than starting from scratch — you can install the packages directly:

npm install react react-dom 

This approach requires you to configure your own build tool (such as Webpack or Vite) and Babel for JSX transformation. It gives you full control but demands more setup knowledge.

Best suited for: Experienced developers integrating React into an existing codebase or custom build pipeline.

Key Packages Explained

You don't need to install all of these manually — CRA and Vite handle the right combination for their respective setups.

Common Installation Issues 🔧

Node version conflicts — Some React tooling requires a minimum Node.js version. If you encounter errors during setup, check that your Node version meets the tool's requirements. Tools like nvm (Node Version Manager) let you switch between Node versions cleanly.

Permission errors on macOS/Linux — Avoid using sudo with npm. Instead, configure npm to use a local directory for global packages, which prevents permission issues.

Port conflicts — If localhost:3000 or localhost:5173 is already in use, your dev server may fail to start or prompt you to use a different port.

What "Installation" Doesn't Cover

Getting React running locally is just the beginning. Once installed, your project structure, TypeScript support, routing libraries (like React Router), state management (like Redux or Zustand), and deployment pipeline all need separate decisions.

Whether CRA or Vite makes more sense, whether you add TypeScript from the start, and how lean or feature-rich your initial setup should be — those answers depend entirely on the size of your project, your team's experience level, and what you're actually building.