Setting Up with Vite

React does not have an official CLI the way Angular does. The recommended way to start a new React project is Vite — a fast build tool that handles the module bundling, hot module replacement, and development server that React needs to run in a browser.

Why Vite

Browsers cannot execute JSX or ES modules the way React uses them directly. A build tool transforms your source code — JSX into React.createElement calls, imports into a bundle — so the browser can run it.

Vite is faster than older tools like Create React App because it serves your source files as native ES modules during development instead of bundling everything upfront. Changes appear in the browser almost instantly.

Scaffolding the project

Run this in your terminal from wherever you keep your projects:

npm create vite@latest zero-budget -- --template react
cd zero-budget
npm install
npm run dev

npm create vite@latest downloads and runs the Vite scaffolding tool. --template react selects the JavaScript React template (not TypeScript — this course uses JavaScript). The -- separator passes the remaining flags to the scaffolding tool rather than to npm.

After npm run dev you will see a URL — usually http://localhost:5173 — and the default Vite React welcome page in your browser.

What was generated

Open the project in your editor. The important files:

zero-budget/
├── index.html          ← entry point the browser loads
├── vite.config.js      ← Vite configuration
├── package.json        ← dependencies and scripts
└── src/
    ├── main.jsx        ← mounts the React app into index.html
    ├── App.jsx         ← root component
    ├── App.css         ← styles for App
    └── index.css       ← global styles

index.html is the file the browser actually loads. It has one <div id="root"> where your entire React app will be injected.

src/main.jsx finds that div and tells React to take it over:

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

src/App.jsx is your root component. It is just a JavaScript function that returns JSX. Everything you build will eventually render through here.

The .jsx extension

Files containing JSX use the .jsx extension. Plain JavaScript files use .js. Vite uses the extension to know which files to transform. You will use .jsx for any file that returns JSX — which is most of your component files.

Exercise

1. Scaffold a new React project using the command above.
2. Open src/App.jsx and change the text inside the <h1> tag to Hello ZeroBudget.
3. Save the file. The browser should update without a full page reload — that is Vite’s hot module replacement.
4. Open src/main.jsx and read through it. What does createRoot do? What does .render() do?

Recap

• Vite is the recommended tool for scaffolding and running React projects.
• npm create vite@latest project-name -- --template react generates a ready-to-run project.
• The browser loads index.html, which contains a <div id="root">.
• src/main.jsx mounts the React app into that div using createRoot.
• src/App.jsx is the root component — the starting point for your UI.