Setting Up with Vite

A React project needs more than React. Browsers don’t understand JSX, your code is split into dozens of modules, and you want the page to update the moment you save a file. A build tool handles all of that. In 2026 the default choice for a client-side React app is Vite: it starts in well under a second, updates the browser on save, and produces a small optimized build when you’re ready to ship.

Create the project

Check your Node.js version first. Current Vite (7 and 8) needs Node 20.19+ or 22.12+; in practice, install a current LTS release (22 or 24), since Node 20 reached end of life in April 2026.

node -v
# v24.x or v22.x: a current LTS release

Then scaffold the Watchlist project:

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

The -- matters. It tells npm “everything after this belongs to the tool I’m running”, so --template react reaches create-vite instead of being eaten by npm. @latest always gives you the newest major version of Vite (Vite 8 at the time of writing); everything in this course works the same on Vite 7 or 8. Recent versions of create-vite may also offer to install dependencies and start the server for you; accepting is fine.

The terminal prints a local URL, http://localhost:5173/. Open it and you’ll see the Vite + React starter page with a counter button.

How the pieces connect

Open the folder in your editor. Most files are configuration you won’t touch often. Three files matter right now, and they form a chain.

index.html sits at the project root, not in a public folder. Vite treats it as the entry point. It contains an empty <div id="root"></div> and one script tag: <script type="module" src="/src/main.jsx"></script>.

src/main.jsx is where React takes 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>,
);

createRoot takes a real DOM node and returns a root that React manages from then on. Everything inside #root now belongs to React; don’t change it with document.querySelector code of your own.

src/App.jsx is your first component and where you’ll spend most of your time. Replace its contents with something of your own to prove the chain works:

export default function App() {
  return <h1>My Watchlist</h1>;
}

Save, and the browser updates without a reload. That’s hot module replacement (HMR) with React Fast Refresh, set up by the @vitejs/plugin-react plugin in vite.config.js. You can also delete src/App.css and empty src/index.css; you’ll style the app properly later.

StrictMode, briefly

<StrictMode> adds extra checks in development. It renders each component twice and runs effects twice (mount, clean up, mount again) to flush out code that isn’t safe to repeat. If you see a log print twice in dev, this is why. It does nothing in production, so leave it on. It will matter when you reach effects in Section 3.

The four scripts

package.json defines the commands you’ll use:

The rest of the folder is supporting cast. package.json lists your dependencies (react, react-dom) and dev tools (vite, @vitejs/plugin-react and a linter). node_modules/ is where npm install puts them; it’s large, it’s rebuilt from package.json at any time, and it never goes into Git. public/ holds files served as-is at the site root, such as a favicon. The linter’s config file depends on the template version: current templates use Oxlint (.oxlintrc.json), older ones and the ESLint option use eslint.config.js.

dist/ is generated output. Never edit files in it, and don’t commit it to Git; the starter’s .gitignore already excludes it. When you deploy in the last section, Vercel will run npm run build for you.

Your project is running and you know where React is mounted. If the dev server ever gets into a strange state after you install a package or rename files, stop it with Ctrl+C and run npm run dev again. A restart takes a second and fixes more problems than it should. Next, you’ll write your first real component in App.jsx and split the Watchlist into reusable pieces.