How to Install React

What you’ll build or solve

You’ll install React either in a new project or inside an existing one.

When this approach works best

This approach works best when:

• You are starting a new front-end project.
• You are adding React to an existing JavaScript setup.
• You are setting up a local development environment.

This is not the right approach if you only want to test React quickly in a static HTML file. In that case, use a CDN script instead.

Prerequisites

• Node.js installed (version 16 or later recommended)
• npm or yarn available
• A terminal or command prompt

Check your Node version:

node-v

Step-by-step instructions

Step 1: Choose your installation method

React can be installed in different ways depending on your setup.

Option A: Create a new project with Vite (recommended)

Vite is fast and widely used for new React projects.

npm create vite@latest my-react-app

When prompted:

• Select React
• Select JavaScript or TypeScript

Then:

cd my-react-app
npm install

This installs React and all required development dependencies.

To start the development server:

npm run dev

Then open the local URL shown in your terminal.

Option B: Use Create React App (legacy projects)

Some older projects still use Create React App.

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

This creates a complete React setup with built-in configuration.

Use this method if you are maintaining an older codebase.

Start the development server:

npmstart

Option C: Install React in an existing project

If you already have a JavaScript project with a bundler, install React directly:

npm install react react-dom

You will also need a bundler such as Vite or Webpack configured to handle JSX.

This method is common when integrating React into a larger application.

Basic example file:

importReactfrom"react";
importReactDOMfrom"react-dom/client";

functionApp() {
return<h1>Hello React</h1>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);

What to look for

• A node_modules folder appears after running npm install.
• react and react-dom are listed inside package.json.
• Running npm run dev (or npm start) launches a development server.
• Your entry file is typically inside src/, often main.jsx, main.tsx, or index.js.

Installation is complete once dependencies are installed successfully and the development server runs.

Examples you can copy

Example 1: Create a new React project with Vite

npm create vite@latest portfolio-app
cd portfolio-app
npm install
npm run dev

Example 2: Create a TypeScript React app

npm create vite@latest dashboard

Select:

• React
• TypeScript

Then:

cd dashboard
npm install
npm run dev

Example 3: Add React to an existing project

npm init-y
npm install react react-dom

Minimal example component:

importReactfrom"react";
importReactDOMfrom"react-dom/client";

functionApp() {
return<h1>Hello React</h1>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);

Common mistakes and how to fix them

Mistake 1: Node.js not installed

You might see:

node: command not found

Why it breaks:

React tools require Node.js.

Fix: Install Node.js and verify:

node-v

Mistake 2: Running commands outside the project folder

You might run:

npm run dev

Why it breaks:

The command only works inside a folder containing package.json.

Fix:

cd my-react-app
npm run dev

Mistake 3: Skipping dependency installation

You might forget:

npm install

Why it breaks:

Required packages are not installed.

Fix: Always run npm install after creating the project.

Troubleshooting

If you see permission errors, check your Node installation and folder permissions.

If installation fails, delete node_modules and package-lock.json, then run npm install again.

If the development server fails to start, confirm you are inside the correct project directory.

If you see version conflicts, update Node.js to a supported version.

Quick recap

• Install Node.js first.
• Choose Vite for new projects.
• Use Create React App for legacy setups.
• Install react and react-dom for existing projects.
• Verify installation by running the development server.