Setting Up a React Project with Vite

The fastest way to scaffold a modern React project is with Vite, a build tool that uses native ES modules in development for near-instant hot-module replacement (HMR). Vite replaces the older Create React App (CRA) toolchain, which relied on Webpack and was noticeably slower to start. The official React team now recommends Vite or a full-stack framework like Next.js for new projects. Running `npm create vite@latest my-app -- --template react` generates a minimal project with Vite config, a sample App component, and a main entry point. After running `npm install` and `npm run dev`, the development server starts on port 5173 and watches for file changes. Production builds are created with `npm run build`, which outputs optimised, tree-shaken assets to the `dist` folder. The generated project structure is intentionally lean: `index.html` at the root acts as the HTML entry point, `src/main.jsx` mounts the root React component into a DOM node with id "root", and `src/App.jsx` holds the top-level component. Understanding this wiring helps you extend the project with routing, global state, or server-side rendering when the time comes.

Example

# 1. Scaffold a new React app using Vite
npm create vite@latest my-app -- --template react

# 2. Install dependencies
cd my-app
npm install

# 3. Start the dev server (http://localhost:5173)
npm run dev

# 4. Build for production
npm run build

# ── Generated file: index.html ────────────────────────────────
# <!DOCTYPE html>
# <html lang="en">
#   <head><meta charset="UTF-8" /><title>My App</title></head>
#   <body>
#     <div id="root"></div>
#     <script type="module" src="/src/main.jsx"></script>
#   </body>
# </html>

// ── src/main.jsx ──────────────────────────────────────────────
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

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

// ── src/App.jsx ───────────────────────────────────────────────
function App() {
  return <h1>Hello, Vite + React!</h1>;
}

export default App;

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned