Set up Node, Vite, and your first React page

Before you start

Complete the earlier lessons or extract the latest checkpoint into a new folder. Run commands from the folder containing package.json. Compare source before replacing your working project.

Explanation

Install Node.js 24 LTS using the official installer for your platform. Check node --version in a fresh terminal. This course was tested with Node 24.19.0. A Node installation is separate from your Python environment. The downloaded project contains its own package.json and pnpm-lock.yaml; do not install its packages into the StringClass application or another project.

The commands below work in macOS, Linux, and Windows terminals after Node is available. The official installer includes npm, which installs the pinned pnpm package manager once. In the folder containing package.json, a frozen installation uses the reviewed lockfile and rejects mismatches rather than silently choosing new dependency versions. Keep the lockfile with your source. The course pins React 19.3.1, Vite 8.3.5, and the matching project tools; avoid replacing them with a tutorial's older setup.

index.html contains the root element and loads src/main.jsx. That entry point creates a React root and renders App from src/App.jsx. The starter intentionally contains only a heading, a short paragraph, and one rendering test. JSX is transformed by Vite; opening index.html directly through a file:// URL is not equivalent to running the development server. Use the exact HTTP address printed by Vite, normally http://127.0.0.1:5173/. Stop the server with Ctrl+C. If the port is occupied, Vite may print a different one; that address also has separate browser storage.

Worked example

Run in the starter root. Installation, tests, build and local server behavior are verified separately; printed version/port lines vary by environment.

node --version
npm install --global pnpm@11.25.0
pnpm install --frozen-lockfile
pnpm test
pnpm dev

Expected behavior

The starter test passes. The development URL shows Applications and the starter paragraph; editing src/App.jsx updates the page. The server keeps running until you stop it.

Common mistakes

Running commands in the archive parent cannot find package.json. Deleting the lockfile defeats the reproducible setup. Committing node_modules adds installed dependencies rather than your source. The dev server is not a production hosting service.

Guided practice

Download the free starter below, extract it into a new directory, and run the commands. Change the paragraph, observe the browser update, and restore the original wording before rerunning the included test.

Independent practice

Build the starter with pnpm build and inspect dist/index.html. Explain why a built asset filename differs from src/App.jsx. Success means you can stop and restart without reinstalling dependencies.

Check your work

Work in src/main.jsx, src/App.jsx, package.json. Record a prediction, observed result, and one failure case. These are local project tasks; StringClass does not execute or automatically grade them.

Recap

Install the pinned starter in an independent folder, run its tests, and identify the React entry point.

References

Official documentation. Course baseline: React 19.3.1, Vite 8.3.5, React Router 8.5.0 and Node.js 24 LTS. Editorial verification: October 26, 2026.

Project checkpoint

Download the starter. Extract into a new directory, install the locked dependencies, and read its stage-specific README before continuing.