Running React for real: Vite

Running React for real: Vite

So far you have read JSX on the page. To run it on your machine you need one more piece: a build step. Browsers only execute plain JavaScript, and JSX is not plain JavaScript, so a tool must compile every <h1>...</h1> into the function calls you met in lesson 2-2 before the browser sees it. This is not optional ceremony, it is the reason our runnable examples use plain JavaScript, and it is the first thing you do at any React job: clone the project, install, start the dev tool.

The standard tool today is Vite (pronounced "veet", French for fast). It compiles JSX, serves your app locally while you work, and rebuilds the page the instant you save a file, a feature called hot reload.

A recorded session

This session creates and runs a React project with Vite. You need Node.js installed (it ships with npm, the package manager from Advanced JavaScript). Follow along on your own machine, this is the exact sequence used to start every project in this course from here on.

Each step below shows the command and the output it printed.

Step 1. Scaffold a new React project. npm create downloads Vite's project template and fills in a folder named task-tracker with the react template:

$ npm create vite@latest task-tracker -- --template react
Scaffolding project in ./task-tracker...

Done. Now run:

  cd task-tracker
  npm install
  npm run dev

Step 2. Move into the folder and install the dependencies listed in package.json, react itself, react-dom, and Vite:

$ cd task-tracker
added 152 packages in 8s

The same thing can be written as npm install.

Step 3. Start the development server. Vite compiles the JSX and serves the app. Open the printed URL in your browser and you are running React:

$ npm run dev
  VITE v6.0.0  ready in 300 ms

  ➜  Local:   http://localhost:5173/

The files that matter

The template creates more files than you need to care about today. Three do the work:

• index.html, the single page. It contains <div id="root"></div> and a script tag pointing at src/main.jsx
• src/main.jsx, the entry point. It runs the createRoot(...).render(<App />) call from lesson 2-1, exactly the code you already read
• src/App.jsx, the App component. This is where you work, so replace its contents with your own component, save, and the browser updates instantly

Two conventions are worth noticing. Component files use the .jsx extension so tools know the file contains JSX, and each component typically lives in its own file, exported with export default App and imported where it is used, which is the module syntax from Advanced JavaScript.

The rest of the template is scaffolding you can ignore for now. package.json lists the dependencies and the dev and build scripts, node_modules holds the downloaded packages and is never edited or committed, and the CSS files are ordinary stylesheets with no React-specific behavior.

One detail that trips people up on day one: nothing you write in App.jsx reaches the page unless main.jsx renders it, directly or through some parent. A component sitting in a file that nobody imports is dead code, and React will not warn you about it.

Why React needs a build step

React code needs compiling first because JSX is not valid JavaScript, so a tool like Vite must turn it into plain function calls.

Browsers execute JavaScript, and JSX is a syntax extension on top of it. Vite compiles <h1>Hi</h1> into the element-creating function calls from lesson 2-2 before serving the file, so what the browser receives contains no angle brackets at all.

Plain JavaScript needs no such translation, which is why a browser runs it directly and why this course's runnable examples are written in it. Reading JSX and predicting its output is the skill being built here, and running it happens on your own machine with Vite.

The build step buys more than JSX. Vite also bundles your imports into files a browser can fetch efficiently, rewrites modern syntax for older browsers when configured to, and gives you the hot reload that makes the edit-and-see loop feel instant.

There is a version of React that skips the build step, using React.createElement calls written by hand. It works, nobody does it for real work, and the reason is exactly the readability gap between h("div", null, h("h1", null, "Tasks")) and the equivalent JSX.

The two commands for a cloned project

In order, the two commands are npm install and then npm run dev.

npm install downloads the dependencies listed in package.json into node_modules, and npm run dev starts Vite's dev server and prints the localhost URL to open.

The order is forced rather than conventional. npm run dev runs Vite, and Vite is itself one of the downloaded dependencies, so starting the server before installing fails with a message about a missing command.

Every JavaScript project you join starts with this same pair, which is why interviewers assume you know it. Note that node_modules is never committed to version control, which is precisely why a fresh clone has no dependencies and the install step is always necessary.