React FundamentalsLesson 1.2

How to set up a React project with Vite

Node.js requirement, Vite vs Create React App, scaffolding project, folder structure, npm run dev, hot module replacement

Setting Up React with Vite

Vite is the modern way to scaffold React projects. It's faster than Create React App because it uses native ES modules during development instead of bundling everything upfront.

Create a New Project

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Open http://localhost:5173 — you have a running React app.

Project Structure

my-app/
├── public/          # Static assets
├── src/
│   ├── App.jsx      # Root component
│   ├── main.jsx     # Entry point
│   └── assets/
├── index.html       # HTML shell
└── vite.config.js   # Vite config

main.jsx is the entry point. It mounts your root component into the #root div in index.html:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Hot Module Replacement (HMR) means edits in your editor reflect in the browser instantly — no full page reload. Keep App.jsx as your starting point and build components inside src/.