React · Chapter 2 of 42
Setup with Vite
Vite is a fast build tool that provides an excellent starting point for React projects. It offers instant server start and lightning-fast hot module replacement (HMR).
Creating a new React app with Vite takes seconds and produces a lean project structure compared to older tools.
Syntax
npm create vite@latest my-app -- --template reactCreating a project
Run `npm create vite@latest my-app -- --template react` to scaffold a new React project. Then `cd my-app`, `npm install`, and `npm run dev` to start the dev server.
Project structure
Vite generates `src/main.jsx` (entry point), `src/App.jsx` (root component), and `index.html`. You edit `App.jsx` to build your UI.
Example 1 (bash)
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devOutput
Local: http://localhost:5173/These commands scaffold, install, and run a new Vite + React app.
Key points
- Vite is a fast, modern build tool for React apps.
- `npm create vite@latest` scaffolds a new project.
- `npm run dev` starts a local dev server with hot reload.
- Vite replaced Create React App as the recommended starting tool.
💡 Note: You can also choose the react-ts template for TypeScript support.