Setup & Installation

Getting a modern React project running takes about a minute. The current recommended approach is to scaffold with Vite, a fast build tool that gives you instant startup, lightning-quick hot module replacement, and an optimized production build out of the box. This page walks through the prerequisites, the npm create vite@latest command, the scripts you’ll use every day, and why the old Create React App (CRA) tool is no longer the right choice.

Prerequisites

React itself is just a JavaScript library, but the tooling around it runs on Node.js. You need Node.js installed, which also gives you npm (Node Package Manager). Vite 5+ requires Node.js 18 or newer.

Check your versions before starting:

node -v
npm -v

Output:

v20.11.1
10.2.4

If node isn’t found or the version is older than 18, install the latest LTS release from nodejs.org or use a version manager like nvm. You can also use alternative package managers — pnpm and yarn work identically with the commands below.

Tip: Use the LTS (Long-Term Support) version of Node for projects. Odd-numbered “Current” releases ship the newest features but receive support for a shorter window.

Creating a project with Vite

Vite provides an interactive scaffolding command. Run it and answer the prompts:

npm create vite@latest my-app

You’ll be asked to pick a framework and a variant (language). Choose React, then choose JavaScript or TypeScript (with or without SWC, a faster Rust-based compiler):

Output:

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /Users/you/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

You can also skip the prompts entirely by passing flags — handy for scripts and CI:

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

The --template value selects the starter; common React options are listed below.

Template	Language	Compiler
react	JavaScript	Babel
react-ts	TypeScript	Babel
react-swc	JavaScript	SWC
react-swc-ts	TypeScript	SWC

Installing dependencies and starting the dev server

Vite scaffolds the files but does not install packages for you. Move into the folder, install, and start the dev server:

cd my-app
npm install
npm run dev

Output:

  VITE v5.4.0  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open http://localhost:5173 and you’ll see the starter page. Edit src/App.jsx, save, and the browser updates instantly thanks to Hot Module Replacement (HMR) — your component state is preserved across edits.

Here is the kind of component you’ll be editing right away:

import { useState } from "react";

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

  return (
    <main>
      <h1>Hello, React + Vite</h1>
      <button onClick={() => setCount((c) => c + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

The npm scripts you’ll use

Vite generates a package.json with three core scripts. Run any of them with npm run <name>.

Script	Command	What it does
dev	vite	Starts the dev server with HMR
build	vite build	Bundles an optimized production build into dist/
preview	vite preview	Serves the built dist/ locally to test the production output

A typical production check looks like this:

npm run build
npm run preview

Output:

vite v5.4.0 building for production...
✓ 34 modules transformed.
dist/index.html                 0.46 kB │ gzip:  0.30 kB
dist/assets/index-DiwrgTda.css  1.39 kB │ gzip:  0.72 kB
dist/assets/index-C4d2nf0a.js  143.41 kB │ gzip: 46.11 kB
✓ built in 1.04s

  ➜  Local:   http://localhost:4173/

Warning: npm run preview is only for previewing the build — it is not a hardened production server. Deploy the static dist/ folder to a host like Netlify, Vercel, Cloudflare Pages, or any static file server.

Why not Create React App?

For years, create-react-app (CRA) was the default scaffolder. It is now deprecated and unmaintained — the React team removed it from the official docs in 2025. CRA relied on Webpack with a slow, monolithic dev server, shipped outdated dependencies, and offered no path to modern features like Server Components.

Concern	Create React App	Vite
Dev server startup	Slow (bundles everything)	Near-instant (native ESM)
Hot reload	Full rebuilds	Fast HMR
Maintenance	Deprecated	Actively maintained
Config	Hidden, needs eject	Simple vite.config.js

For a plain client-side app, Vite is the recommended choice. If you need routing, data fetching, and server-side rendering baked in, reach for a full framework such as Next.js or React Router (formerly Remix) instead.

Trying React without installing

You don’t always need a local setup. Online playgrounds let you experiment instantly in the browser — StackBlitz (which runs Vite directly in the browser), CodeSandbox, and the official React docs sandboxes are all great for quick prototypes, bug reproductions, and sharing snippets without touching your machine.

Best Practices

• Use the current Node.js LTS release and keep npm/Node updated to avoid scaffolding errors.
• Prefer Vite over CRA for new client-side projects; reach for Next.js when you need SSR or routing.
• Choose a TypeScript template (react-ts or react-swc-ts) for new apps — types catch errors early and improve editor support.
• Commit your lockfile (package-lock.json) so teammates and CI install identical dependency versions.
• Always test the real output with npm run build && npm run preview before deploying — the dev server behaves differently from production.
• Keep vite.config.js minimal; only add plugins you actually need.

Related Topics

• What is React?
• Why React?
• How React works
• Project structure
• Your first component