Installing React

This guide walks you through setting up React in your project. Whether you’re starting a new project or adding React to an existing one, you’ll find the instructions you need here.

Requirements

Before you begin, make sure you have the following installed on your system:

Node.js - Version 0.10.0 or higher (though we recommend the latest LTS version for best experience)
npm - Usually comes with Node.js, or you can use yarn/pnpm as alternatives
A code editor (we recommend VS Code with the ES7+ React snippets extension)

To check your Node.js version, run node --version in your terminal. To check npm, run npm --version.

Installation Methods

You can install React in several ways depending on your project needs:

Method 1: Using a Package Manager (Recommended)

Install React and React DOM using your preferred package manager:

npm install react react-dom

yarn add react react-dom

pnpm add react react-dom

This installs:

react (v19.3.0) - The core React library for defining components
react-dom - The React renderer for web applications

The react package contains only the functionality necessary to define React components. You need react-dom to render components in the browser.

Method 2: Using a CDN

For quick prototypes or learning, you can include React directly via CDN without any build tools:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>

  <!-- Load React and React DOM -->
  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
  
  <!-- Load your application -->
  <script>
    const { useState } = React;
    const { createRoot } = ReactDOM;

    function App() {
      const [count, setCount] = useState(0);
      return React.createElement('div', null,
        React.createElement('h1', null, count),
        React.createElement('button', { onClick: () => setCount(count + 1) }, 'Increment')
      );
    }

    const root = createRoot(document.getElementById('root'));
    root.render(React.createElement(App));
  </script>
</body>
</html>

CDN builds are great for learning and prototyping, but use the npm version for production applications. The CDN approach doesn’t support JSX syntax without additional transpilation.

Method 3: Using Create React App

Create React App sets up a modern React development environment with zero configuration:

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

yarn create react-app my-app
cd my-app
yarn start

pnpm create react-app my-app
cd my-app
pnpm start

This creates a new directory with a complete React project structure, including:

A development server with Fast Refresh
A build script that bundles your app for production
ESLint configuration for catching common mistakes
Jest setup for testing

Method 4: Using Vite (Fast Alternative)

Vite offers a faster development experience with near-instant server start:

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

yarn create vite my-react-app --template react
cd my-react-app
yarn
yarn dev

pnpm create vite my-react-app --template react
cd my-react-app
pnpm install
pnpm dev

Creating Your First React App

Create a new directory

Open your terminal and create a new project directory:

mkdir my-react-app
cd my-react-app

Initialize your project

Create a package.json file:

npm init -y

Install React

Install React and React DOM:

npm install react react-dom

Install a bundler

For development, you’ll need a bundler. Install Vite for a fast experience:

npm install --save-dev vite @vitejs/plugin-react

Create your project structure

Create the following files:

mkdir src
touch index.html src/main.jsx src/App.jsx vite.config.js

Configure Vite

Add this to vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Create your HTML file

Add this to index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Create your entry point

Add this to src/main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

Create your first component

Add this to src/App.jsx:

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

export default App

Add scripts to package.json

Update your package.json to include:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Start the development server

Run your application:

npm run dev

Open your browser to http://localhost:5173 to see your app running!

Verifying Your Installation

After installation, verify everything works by creating a simple test component:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function TestComponent() {
  const [message, setMessage] = useState('React is working!');
  
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Installation successful!')}>
        Click me
      </button>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<TestComponent />);

If you see the message and the button responds to clicks, your React installation is working correctly!

Using React with TypeScript

For TypeScript support, install the type definitions:

npm install --save-dev @types/react @types/react-dom

yarn add --dev @types/react @types/react-dom

pnpm add -D @types/react @types/react-dom

Then rename your files from .jsx to .tsx and enjoy full type safety:

import { useState } from 'react';

interface Props {
  name: string;
}

function Greeting({ name }: Props) {
  const [count, setCount] = useState<number>(0);
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
    </div>
  );
}

Additional Tools

Consider installing these tools for a better development experience:

React DevTools - Browser extension for debugging React applications
ESLint - Catch errors and enforce code style
Prettier - Code formatter for consistent style
React Testing Library - Test your React components

npm install --save-dev eslint eslint-plugin-react prettier @testing-library/react @testing-library/jest-dom

Production Build

When you’re ready to deploy your application, React provides optimized production builds that:

Remove development-only code and warnings
Minify your code for smaller bundle sizes
Enable production optimizations

Always use the production build when deploying. The development version includes extra warnings and helpful error messages, but these make the bundle larger and slower.

Build for production:

npm run build

This creates an optimized production build in the dist or build directory, ready for deployment.

Troubleshooting

Module not found errors: Make sure you’ve installed all dependencies with npm install. React hooks not working: Ensure you’re using React 16.8.0 or higher. Check with npm list react. Different React versions: Having multiple versions of React can cause issues. Run npm list react to check for duplicates. JSX not recognized: Make sure your build tool is configured to handle JSX. With Vite, ensure you’re using .jsx or .tsx file extensions.

Next Steps

Now that you have React installed, you’re ready to start building!

Quickstart Tutorial

Build your first React app with a hands-on tutorial

Learn Key Concepts

Understand components, props, state, and hooks

Getting Started

Core Concepts

Building UIs

Advanced Guides

Performance

Installation

Installing React

Requirements

Installation Methods

Method 1: Using a Package Manager (Recommended)

Method 2: Using a CDN

Method 3: Using Create React App

Method 4: Using Vite (Fast Alternative)

Creating Your First React App

Verifying Your Installation

Using React with TypeScript

Additional Tools

Production Build

Troubleshooting

Next Steps

Quickstart Tutorial

Learn Key Concepts

​Installing React

​Requirements

​Installation Methods

​Method 1: Using a Package Manager (Recommended)

​Method 2: Using a CDN

​Method 3: Using Create React App

​Method 4: Using Vite (Fast Alternative)

​Creating Your First React App

​Verifying Your Installation

​Using React with TypeScript

​Additional Tools

​Production Build

​Troubleshooting

​Next Steps

Quickstart Tutorial

Learn Key Concepts

Installing React

Requirements

Installation Methods

Method 1: Using a Package Manager (Recommended)

Method 2: Using a CDN

Method 3: Using Create React App

Method 4: Using Vite (Fast Alternative)

Creating Your First React App

Verifying Your Installation

Using React with TypeScript

Additional Tools

Production Build

Troubleshooting

Next Steps