Starting a Project with Vite
A browser cannot read JSX, and a real app is made of dozens of files that need to be stitched together. Before you write a single component you need a tool that does that stitching for you, instantly, every time you save. Vite is the tool most new React projects start with.
The rule
Create, install, dev: three commands, then React is live.
Create generates a small, working project from a template:
npm create vite@latest reading-list -- --template react
cd reading-list
npm install
npm run devInstall (npm install) downloads everything listed in package.json, such as react and react-dom, into a node_modules folder.
Dev (npm run dev) starts a local development server, usually at http://localhost:5173. When you save a file, the change appears in the browser almost immediately, often without losing what was on screen.
The generated project is small enough to learn by heart:
reading-list/
index.html the one real HTML page, with <div id="root">
package.json dependencies and scripts
vite.config.js Vite settings (the React plugin lives here)
src/
main.jsx entry point: puts <App /> into #root
App.jsx your first componentThe entry point is short:
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App />);Files that contain JSX use the .jsx extension (or .tsx with TypeScript), which tells Vite to transform them into plain JavaScript the browser can run. Vite itself needs a recent version of Node.js installed; check with node --version if the create command complains.
When you are ready to publish, npm run build writes optimised, plain HTML, CSS and JavaScript into a dist folder that any static host can serve.
The shortcut
To understand any Vite project, follow the chain from the browser inward: index.html → main.jsx → App.jsx. Whatever you want on screen must eventually be reached from App.
The page
The browser loads
index.html. It contains an empty<div id="root">and a script tag pointing at/src/main.jsx.
A common slip is editing index.html to add page content and wondering why React does not know about it. Only the inside of #root belongs to React; your content lives in components.
Older tutorials use Create React App. That tool is no longer recommended for new projects, so reach for Vite (or a full framework, later) instead.
Drills
Answer fast — trust the rule.
You just ran the create command. What must happen before npm run dev works?
Which file calls createRoot(...).render(<App />) in a fresh Vite React project?
What does npm run build produce?
You add <p>Welcome</p> directly inside <div id="root"> in index.html. What happens once React renders?
Remember
- Create, install, dev: three commands take you from nothing to a live page.
- Trace any project as index.html → main.jsx → App.jsx.
- Trap: content typed into
#rootby hand is replaced; put it in a component.