Install React: Set Up a React App With Vite

To install React, create a new project with Vite: run npm create vite@latest my-app -- --template react, then cd my-app, npm install and npm run dev. You need Node.js installed first. Vite sets up React, JSX compilation and a dev server that reloads the page as you save.

You do not need any of that to start learning. The editor below runs React in this page; it is a simplified version of the App.jsx file Vite generates for you.

import { useState } from 'react';

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

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Click the button, then change the heading text: the preview updates as you type, the same way Vite's dev server swaps in your changes without reloading the page (that is what "HMR", hot module replacement, means).

Prerequisites: Node.js

The tools that build a React app run on Node.js, and npm (its package manager) comes with it. Install the current LTS release from the Node.js website or with a version manager such as nvm, then check it in a terminal:

node -v
npm -v

Both commands should print a version number. If node -v prints an old version, upgrade: Vite 8 needs Node.js 20.19 or later (22.12 or later on the 22 line) and prints a warning on older releases.

Create a React app with Vite

Run these four commands in the folder where you keep your projects:

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

• npm create vite@latest downloads the latest project generator. my-app is the folder name, and --template react picks plain React with JavaScript. The extra -- passes the template option through npm to the generator.
• npm install downloads React, React DOM, Vite and the other dependencies listed in package.json into node_modules.
• npm run dev starts the development server and prints a local address, usually http://localhost:5173. Open it in a browser.

The generator then asks two questions: which linter to set up (Oxlint or ESLint), and whether to install and start the app now. If you answer yes to the second, it runs npm install and npm run dev for you, so you can skip the last two commands. For TypeScript, use --template react-ts instead; see React with TypeScript.

The files Vite creates

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Three of them matter most:

index.html is the page the browser loads. Its body holds one empty element, <div id="root"></div>, and a script tag that loads src/main.jsx. React draws the whole app inside that div.

src/main.jsx is the entry point. It connects React to the page:

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

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

createRoot takes the #root element and makes React responsible for everything inside it. render(<App />) draws your top component there. StrictMode is a development helper that runs some extra checks; it has no effect in the production build (see Strict Mode). You rarely need to edit this file.

src/App.jsx is your first component, and the file you edit. Vite's version imports three images (a hero picture and the Vite and React logos) and App.css, and ends with export default App. That is the same as writing export default function App() at the top, which is the form the examples on these pages use.

Make your first edit

Open src/App.jsx, delete what is there, and replace it with your own component. Save, and the browser updates. Here is a small first app to type in; try it here first:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Type in the box and the heading follows. Then add a second <Greeting name="Vite" /> under the first one: components are reusable, and each copy takes its own name.

When App.jsx grows, move components into their own files, such as src/Greeting.jsx, export them, and import them where you use them. The components page shows how.

Build for production

The dev server is for working on your code. When you are ready to publish, build the app:

npm run build
npm run preview

npm run build compiles JSX, bundles and minifies your code, and writes static files to a dist/ folder. npm run preview serves that folder locally so you can check the real build. Upload dist/ to any static host. React also switches to its production mode in the build, which is faster and skips development warnings.

Create React App is deprecated

For years the standard way to start was npx create-react-app my-app. In February 2025 the React team deprecated Create React App, and it is no longer maintained. Many older tutorials still use it, so you will see react-scripts start and a src/index.js entry file in them; the components themselves work the same in a Vite project.

What to use instead:

• Vite for a client-side app, a learning project, or a widget: the setup above.
• A framework when you need routing, server rendering or data loading built in. Next.js and React Router's framework mode are the common choices:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

To move an existing Create React App project to Vite, the main steps are: install vite and @vitejs/plugin-react and remove react-scripts; add a vite.config.js that loads the React plugin; move index.html from public/ to the project root, drop the %PUBLIC_URL% placeholders, and add a <script type="module" src="/src/index.jsx"> tag for your entry file; rename files that contain JSX to .jsx; rename REACT_APP_ environment variables to VITE_ and read them from import.meta.env; and replace the react-scripts commands in package.json with vite, vite build and vite preview.

Add React to an existing page

React does not have to own the whole page. You can render it into one element of an existing site, such as a cart widget on a server-rendered store. You still need a bundler such as Vite to compile JSX. Install the two packages:

npm install react react-dom

Then create a root on the element you want React to control:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Everything outside #cart stays as it was. You can create several roots on one page, one per element, and each runs independently.