Start a React project with Vite

In this lesson you will create a real React project, run it in your browser and edit it live. You will end with a clean starting point called brew-and-bean, the coffee shop website the next lessons build on.

Prerequisites: you have read *How the web works*, you know basic HTML and JavaScript (the previous two lessons), and you can open a terminal. You need Node.js and a code editor such as VS Code. Both are free.

Browsers understand HTML, CSS and JavaScript. They do not understand JSX (the HTML-like syntax React uses), and a real app is split across many files that must be combined. A build tool does that work for you.

Vite (pronounced "veet") is a build tool with a fast development server. You run one command, it serves your app at a local address, and every time you save a file the browser updates without a full reload. When you finish, Vite also builds a small optimised bundle for deployment.

React itself is only a library for building user interfaces. Vite gives it a project around it.

A note on alternatives: full frameworks such as Next.js are often used for production apps, and you will meet Next.js later in this track. Starting with Vite is a good way to learn React itself, with nothing hidden.

node --version
npm --version

Each command prints a version number such as v22.x.x and 10.x.x. Your numbers will differ.

npm create vite@latest brew-and-bean -- --template react

Creates a folder called brew-and-bean using Vite's plain JavaScript React template. The -- passes the template option on to Vite.

Vite may ask a few questions, such as whether to install and start right away. The exact prompts change between versions. Choose plain JavaScript if asked (not TypeScript; you will add TypeScript later in this track), and answer "No" if it offers to start the dev server, so you can follow each step below.

cd brew-and-bean
npm install
npm run dev

npm install downloads the libraries listed in package.json into node_modules. npm run dev starts the development server.

Open http://localhost:5173/ in your browser. You should see the Vite and React logos and a button that counts clicks. Leave the terminal running. Press Ctrl + C in it when you want to stop the server.

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

This file connects React to the page. createRoot takes the empty div from index.html and render draws your App inside it. StrictMode is a development helper that warns about risky code; it has no effect on the final site. Your generated file may differ slightly.

Notice what the whole app is: index.html has an empty box, JavaScript fills it. This is a single-page app. The browser loads one HTML file, and React changes what is inside the box as the user interacts.

The template includes demo content. Replace it with your own so you understand every line.

export default function App() {
  return (
    <div>
      <h1>Brew &amp; Bean</h1>
      <p>Fresh coffee in Indiranagar, Bengaluru. Open 8 am to 10 pm. Pickup only.</p>
    </div>
  );
}

App is a function that returns what should appear on screen. The tag-like syntax inside is JSX. Components get a full lesson next.

Save the file. The browser updates by itself within a moment, with no refresh. This is hot module replacement: Vite swaps only the changed code into the running page.

npm run build
npm run preview

build writes dist/ with index.html and hashed JavaScript and CSS files. preview serves it, usually at http://localhost:4173.

You will deploy the dist folder in the last module. You never edit files inside dist; it is regenerated on every build.

File names. Files that contain JSX should end in .jsx. Component file names start with a capital letter (App.jsx, MenuCard.jsx).

Git. Vite creates a .gitignore that already excludes node_modules and dist. If you want to put the project on GitHub, run git init, commit, and push. Never commit node_modules; anyone can recreate it with npm install.

I'm learning React with Vite (plain JavaScript). I ran [command] and got this error:

---
[paste the full error text]
---

My Node.js version is [output of node --version]. Explain in simple words what the error means, give the most likely cause, and give me steps to fix it. Do not rewrite my whole project.

What to expect: Check that the answer explains the cause and not just a command to paste. Run only commands you understand, and prefer fixes that change one thing at a time.