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 sandbox exercises 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.

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. Replace its contents with your own component, save, and the browser updates instantly.

One convention to notice: 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, the module syntax from Advanced JavaScript.