Setting Up React with Vite

The React for Beginners series uses Vite for every example, because a fast, boring toolchain lets you focus on React itself. This chapter gets a project running on your machine: what to install, how to scaffold an app, what each generated file does, and how the development and production workflows differ.

Why Vite instead of the old setup

For years, Create React App was the default: a large dependency tree that bundled your whole app before every refresh. Vite (French for "fast") flipped the strategy. In development it serves your modules as native ES modules, so the browser loads only what the page needs and updates appear in milliseconds. For production it bundles and minifies with Rollup, producing small, cacheable files. Create React App is now effectively in maintenance mode, so new projects start with Vite — or with Next.js and other frameworks once you outgrow a single-page app.

What you need installed

You need Node.js (the current LTS version is ideal) and its bundled npm. A terminal check confirms both:

node --version
npm --version

Expected output:

v22.11.0
10.9.0

Any recent major version works. If the commands are not found, install the LTS build from nodejs.org first and reopen your terminal.

Scaffold the project

One npm command creates the folder, installs React and wires up the scripts. The -- --template react flag asks for plain JavaScript JSX; a react-ts template exists for TypeScript, which this series does not require.

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

Expected output:

VITE v6.x.x  ready in 400 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open the local URL and you should see the Vite and React logos with a counter already working. Every time you save a file the browser updates without a manual refresh — that is hot module replacement.

Tour of the generated files

The template is deliberately small. These are the files you will touch in almost every session:

The whole mounting ritual lives in main.jsx — you will never rewrite it, but you should recognise it:

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>,
);

Expected output: nothing visible by itself — it finds the <div id="root"> declared in index.html and renders App inside it. StrictMode is a development aid that highlights risky patterns such as effects without cleanup; it changes no production behaviour.

Develop, build and preview

Two commands cover the two halves of your workflow:

npm run dev      # development: instant updates, helpful errors
npm run build    # production: outputs an optimised dist/ folder
npm run preview  # serves dist/ locally so you can check the real build

Expected output: after npm run build, the terminal reports the bundle sizes and a dist/ folder appears containing index.html plus hashed files in assets/. Those static files are exactly what you deploy in chapter 20.

How this series uses the project

Every later chapter assumes this layout. Keep one practice app open while you read: create src/components/ and src/examples/ folders now, type each chapter's snippets into a fresh file, and render them from App.jsx. Typed examples stick far better than copied ones.

Common mistakes

• Running npm run dev in the wrong folder — the command must run where package.json lives, inside the project directory.
• Editing dist/ or index.html instead of src/ — the build output is regenerated on every production build; your components live in src/.
• Forgetting npm install — scaffolding creates package.json, but dependencies download separately; missing node_modules means "command not found" errors.
• Following Create React App tutorials — npm start and public/index.html do not apply to a Vite project; use npm run dev and the root index.html.
• Editing files while the terminal shows a syntax error — read Vite's error overlay first; it names the file and line that broke.

Practice checklist

1. Scaffold a project with the exact commands above and confirm the counter demo renders on localhost:5173.
2. Open src/App.jsx, change the heading text, save, and watch the browser update without a refresh.
3. Delete the demo CSS imports and logos; make the page render a plain <h1> you wrote yourself.
4. Run npm run build and npm run preview, then confirm your edited page appears from the production bundle.
5. Break a file on purpose (remove a bracket), read the error overlay, and fix it.

The toolchain is running. Time to write some React — Your First Component.