Learn React

Getting Started

Set up a React project on your own computer in a few minutes.

1. Install Node.js

React projects use Node.js and its package manager, npm, to install tools and run a development server. Install the current LTS (long-term support) version, then check that it works:

node --version
npm --version

2. Create a project

The simplest way to start a plain React app is with Vite, a fast build tool:

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

Open the address it prints (usually http://localhost:5173) in your browser. When you save a file, the page updates straight away.

Use --template react-ts instead if you'd like to use TypeScript.

3. Look around

The files you'll use most are:

my-app/
├── index.html        ← the single HTML page
├── package.json      ← dependencies and scripts
└── src/
    ├── main.jsx      ← mounts React into the page
    ├── App.jsx       ← your top-level component
    └── App.css

main.jsx connects React to the page:

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

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

Try replacing the contents of App.jsx with the counter from the State & Hooks page:

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>My first React app</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

4. Build for production

When your app is ready, build it:

npm run build

This creates a dist/ folder of plain HTML, CSS and JavaScript files. Any static web host can serve them, including ordinary shared hosting, by uploading the folder's contents to your site's public directory.

Framework or plain React?

Vite + React

Minimal and easy to understand. Best for learning, small apps and single-page apps you host as static files.

Next.js

A full framework with file-based routing, server rendering and data fetching built in. Suits larger, content-heavy sites.

React Router

Adds routing between pages. It can be used as a library or as a full framework with server rendering.

Where to go next