React Installation Guide: 7 Steps to Set Up a New Project

Question

Complete a successful React installation in 7 steps. Learn to initialize a Node.js project, install dependencies, configure build tools, and bootstrap your app with createRoot.

Accepted Answer

To complete a successful React installation, initialize a Node.js project, run npm install react react-dom, configure a build tool that transpiles JSX, and bootstrap your application using createRoot from react-dom/client.

Setting up a new React project requires installing two distinct packages from the facebook/react repository—the core library and its DOM renderer—then configuring a modern build pipeline. According to the repository documentation, React is designed for incremental adoption, but new projects benefit from a complete toolchain that handles JSX transformation and module bundling from day one.

Prerequisites: Understanding the Core Packages

Before running installation commands, recognize the separation of concerns documented in the source code. The packages/react/README.md clarifies that the react package only defines components and hooks, while packages/react-dom/README.md supplies the actual DOM-mounting APIs required for web applications. You must install both to render anything to the browser.

react: The core library containing the component model, hooks, and reconciliation engine.
react-dom: The renderer that provides browser-specific APIs, including the createRoot function used to mount your app.

Step-by-Step React Installation Workflow

Follow these steps derived from the official repository READMEs to ensure compatibility with the current version of React and avoid peer-dependency mismatches.

1. Initialize Your Project Directory

Create a new directory for your application and initialize a package manager. This establishes the package.json file required to track dependencies.

mkdir my-react-app
cd my-react-app
npm init -y

2. Install React and React DOM

Execute the exact installation command referenced in packages/react-dom/README.md. This pulls in both the core library and the web renderer.

npm install react react-dom

This command installs the latest stable versions of both packages, ensuring they remain synchronized as peer dependencies.

3. Configure a Build Tool for JSX

React components use JSX syntax, which browsers cannot execute natively. You must configure a build step that transpiles JSX into standard JavaScript. Choose one of the following approaches:

Official Starter Toolchains (Recommended): Use create-vite, create-next-app, or create-react-app to generate a pre-configured project with React installation, JSX handling, and development server included.
Custom Bundler Setup: Manually configure Webpack, Vite, or Parcel with @babel/preset-react or enable the bundler's built-in JSX transform.

For most new projects, the Vite starter provides the fastest path:

npm create vite@latest my-react-app -- --template react

4. Create the HTML Entry Point

Create an index.html file in your project root containing a container element where React will mount the application. The repository fixtures consistently use id="root" as the convention.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Bundler injects compiled script here -->
  </body>
</html>

5. Bootstrap the Application with createRoot

Create your application entry point (e.g., src/index.jsx or src/main.jsx) that imports createRoot from react-dom/client and renders your top-level component. This API replaced the legacy ReactDOM.render in React 18.

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

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

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

6. Start the Development Server

Launch your development environment using the script provided by your build tool. For Vite projects, this command starts the server with Hot Module Replacement (HMR) enabled:

npm run dev

For custom Webpack configurations, use npm start or the equivalent script defined in your package.json.

File Reference: Key Documentation Locations

The facebook/react repository contains authoritative installation guidance in these specific locations:

README.md (repository root): Overview of installation options including Quick Start, adding to existing projects, and creating new applications.
packages/react/README.md: Describes the core package's development and production modes.
packages/react-dom/README.md: Provides the exact npm install command and basic usage patterns for web applications.
fixtures/: Example projects demonstrating advanced configurations including Server-Side Rendering (SSR) and concurrent features.

Summary

Install both packages: Run npm install react react-dom to get the core library and DOM renderer.
Use a build tool: Configure Vite, Webpack, or Parcel to handle JSX transpilation, or use an official starter template.
Mount with createRoot: Import createRoot from react-dom/client to bootstrap React 18+ applications.
Follow repository docs: Reference packages/react-dom/README.md for authoritative commands and README.md for adoption strategies.
Verify with dev server: Run npm run dev (or equivalent) to confirm the UI renders correctly at the specified mount point.

Frequently Asked Questions

Do I need create-react-app to install React?

No. While create-react-app was historically the default starter, the React team now recommends modern alternatives like Vite or Next.js. You can install React manually using npm install react react-dom and configure any bundler that supports JSX transformation.

What is the difference between the react and react-dom packages?

The react package contains the component model, hooks, and reconciliation algorithm, but contains no browser-specific code. The react-dom package provides the renderer that translates React components into DOM operations, including the createRoot and hydrateRoot APIs required for web applications.

Can I use React without a build tool or npm installation?

Yes, but only for learning or prototyping. You can load React from a CDN using <script> tags with type="module", but this approach lacks JSX support (unless you use Babel standalone), code splitting, and optimization. Production applications should use a proper React installation with a build step.

How do I verify that my React installation is working correctly?

Start your development server and check the browser console for errors. A successful installation renders your component tree to the DOM element passed to createRoot without warnings. Install the React DevTools browser extension to inspect the component hierarchy and confirm React is running in development mode.