Setting Up a React Project (Vite)

Why a build tool?

Real React projects are not loaded from a CDN — they use a build tool that bundles your files, understands JSX, and gives you instant hot reload. The modern favourite is Vite (fast and simple).

Create and run

# create a new React project
npm create vite@latest my-app -- --template react

# go into it and install dependencies
cd my-app
npm install

# start the dev server (hot reload!)
npm run dev

You run these three commands in your terminal, in order. Here is what each one does:

1. Create the project — npm create vite@latest my-app -- --template react asks Vite to build a fresh React project in a new folder called my-app. The --template react part says “set it up for React”.
2. Go in and install — cd my-app moves you into that new folder, and npm install downloads all the libraries the project needs (React itself and Vite). This creates the node_modules folder.
3. Start the dev server — npm run dev launches Vite’s development server. Your terminal prints a local address (usually http://localhost:5173). Open it in your browser to see your app, and it updates instantly every time you save a file.

The key files

How they fit together: the browser loads index.html, which has an empty <div id="root">. src/main.jsx runs and mounts your React app into that div. The first thing it shows is src/App.jsx — so App.jsx is where you start editing. As your app grows, you add new components inside src/components/ and bring them into App.jsx.