Lesson 2 of 5 · 15–25 minutes

Setting up with Vite

🏠The everyday picture

A ready-made kitchen kit: stove, utensils and spice rack already arranged, so you start cooking straight away instead of building cupboards.

📘What it really is

Vite is a tool that creates a React project, runs it on your computer with instant updates, and later builds it into plain files for hosting.
Create a project (TypeScript template):

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

Open the address it shows (usually http://localhost:5173). Edit a file and save: the page updates instantly.

The package.json scripts:
npm run dev: the development server;
npm run build: makes the final, optimised files in dist/;
npm run preview: tries the built version locally.
The files that matter at first:
index.html: the single page, with an empty <div id="root">;
src/main.tsx: puts your app into that div;
src/App.tsx: your main component;
src/App.css and src/index.css: styles.
Remember git init, and check node_modules and dist are in .gitignore.

🖱️Try it

Create the enquiries project, run it, and open it in the browser. Change the text in App.tsx, save, and watch the page update. Commit the starting point.

✅Quick check

What's the difference between npm run dev and npm run build?

Show the answer

dev runs a live development server on your computer; build creates optimised files for hosting.

Your React page is blank and the console shows an error. Where do you look first?

Show the answer

The browser console and the terminal running npm run dev; both show errors.