Set Up React with Vite

To build a real React app on your computer you need two things: Node.js, which runs JavaScript tools outside the browser, and a build tool that turns your JSX files into plain JavaScript the browser understands. The recommended build tool for learning and for many real projects is Vite (pronounced "veet", French for "quick").

In this lesson you will install the tools, create a project with Vite 8, walk through every file it creates, and build a production version. You can still run every example of this course in the Try-it editor without installing anything.

Step 1: install Node.js and an editor

Download Node.js from the official site, nodejs.org. Choose the LTS (long-term support) version, which is Node.js 26 "Lithium" at the time of writing. Vite 8 needs at least Node.js 20.19 or 22.12, so older versions will not work. The installer also installs npm, the Node package manager that downloads libraries such as React.

Check the install in a terminal (Command Prompt, PowerShell or the VS Code terminal):

node --version
npm --version

Both commands should print a version number. You also need a code editor; Visual Studio Code is free and popular, and it understands JSX out of the box.

Step 2: create a project with Vite

Move to the folder where you keep your projects, then run:

npm create vite@latest chai-shop -- --template react
cd chai-shop
npm install
npm run dev

Here is what each line does:

• npm create vite@latest downloads and runs the latest project generator. chai-shop is the folder name. The extra -- passes the option --template react to the generator instead of to npm.
• cd chai-shop moves into the new folder.
• npm install downloads React, Vite and the other packages listed in package.json into a node_modules folder.
• npm run dev starts the development server.

If you leave out --template, the generator asks you questions instead: the project name, the framework (choose React) and the variant. The React templates are react, react-ts (TypeScript), react-compiler and react-compiler-ts (with the React Compiler switched on, covered in Performance & React Compiler).

The dev server prints something like this (your version and time will differ):

VITE v8.3.5  ready in 612 ms

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

Open http://localhost:5173/ in your browser to see the starter app. Press Ctrl + C in the terminal to stop the server.

Step 3: understand the files

A new Vite React project contains these files:

Your code starts in src/main.jsx. Here is a cleaned-up version of 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>
);

react holds the core features such as components and hooks. react-dom/client connects React to the browser page. createRoot takes the empty <div id="root"> from index.html and render draws your App component inside it. A Vite project can import CSS files directly, as in import "./index.css".

<StrictMode> is a development helper. While you develop, it calls your components twice and runs effects an extra time to reveal bugs early. It does nothing in the production build, so you will not see double work for real users.

Step 4: edit and watch the page update

Replace the contents of src/App.jsx with this component and save the file:

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

function App() {
  const today = new Date().toLocaleDateString("en-IN", { weekday: "long" });

  return (
    <main>
      <h1>Meera's Chai Shop, Kochi</h1>
      <p>Welcome! Today is {today}.</p>
    </main>
  );
}

export default App;

// In a Vite project, main.jsx does this part. The Try-it editor needs it here.
createRoot(document.getElementById("root")).render(<App />);

The browser updates immediately, without a full reload. This is Hot Module Replacement (HMR): Vite swaps only the changed module, and React keeps the component's state where it can. In your project, keep export default App; in App.jsx and leave the createRoot line in main.jsx.

Step 5: build for production

The dev server is for development only. When the app is ready, create optimised files for a real web server:

npm run build
npm run preview

npm run build writes small, minified files into a dist folder. You can upload that folder to any static hosting service. npm run preview serves the dist folder locally so you can check the production build before you publish it.

Legacy: Create React App

Many older tutorials and projects start with npx create-react-app my-app. Create React App (CRA) was the official starter for years, but the React team deprecated it in February 2025: it is no longer maintained and it was slow. In old CRA projects you will recognise react-scripts start, a src/index.js file and sometimes ReactDOM.render(<App />, root). That ReactDOM.render function is the pre-2022 API and was removed in React 19; use createRoot instead.

For new projects, use Vite as shown above, or a full framework such as Next.js when you need server rendering (see Server Components & Next.js). To move an old CRA app, the usual path is to create a Vite project and copy the src files across.

Common mistakes

• Old Node.js. Errors during npm create vite or npm run dev often mean Node.js is too old. Check with node --version and install the LTS version.
• Running commands in the wrong folder. npm run dev must run inside the project folder, where package.json is.
• Forgetting npm install. Without it, node_modules is missing and Vite cannot find React.
• Uploading the src folder to a server. Browsers cannot run JSX directly. Upload the dist folder produced by npm run build.

Key points

• Install Node.js LTS; Vite 8 needs Node.js 20.19+ or 22.12+.
• Create a project with npm create vite@latest my-app -- --template react, then npm install and npm run dev.
• index.html has <div id="root">; src/main.jsx renders App into it with createRoot.
• <StrictMode> double-checks components in development only.
• npm run build creates the dist folder for production; npm run preview tests it.
• Create React App is deprecated; use Vite or a framework such as Next.js.

npm create vite@latest cricket-scores -- --template react
cd cricket-scores
npm install
npm run dev

function App() {
  return (
    <main>
      <h1>Rohtak Cricket Club</h1>
      <p>Next match: Sunday 8 November, 9:00 am, against Jhajjar XI.</p>
    </main>
  );
}

export default App;