Creating Your First React App with Vite

Why Vite, Not Create React App

Create React App (CRA) was the official way to start React projects for years, but it has been deprecated. The React team now recommends frameworks like Next.js or build tools like Vite for new projects.

Vite (French for "fast") is a modern build tool that offers:

• Instant server start — No bundling during development; modules are served natively to the browser
• Lightning-fast HMR — Hot Module Replacement updates your changes in milliseconds, not seconds
• Optimized builds — Uses Rollup under the hood for production builds with tree-shaking and code splitting
• First-class React support — Official template with JSX/TSX, Fast Refresh, and modern defaults

Creating a Vite React Project

# Create a new React project with Vite
npm create vite@latest my-first-react-app -- --template react

# Navigate into the project
cd my-first-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

Your terminal will show something like:

  VITE v6.x.x  ready in 200ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open http://localhost:5173 in your browser. You should see the Vite + React welcome page with an animated logo and a counter button.

Understanding the Project Structure

my-first-react-app/
├── node_modules/        # Installed packages (never edit)
├── public/              # Static assets served as-is
│   └── vite.svg         # Favicon
├── src/                 # Your application code
│   ├── assets/          # Images, fonts bundled by Vite
│   │   └── react.svg
│   ├── App.css          # Styles for App component
│   ├── App.jsx          # Root application component
│   ├── index.css        # Global styles
│   └── main.jsx         # Application entry point
├── .eslintrc.cjs        # ESLint configuration
├── index.html           # HTML template (Vite entry)
├── package.json         # Dependencies and scripts
└── vite.config.js       # Vite configuration

Key files to understand:

• index.html — The single HTML page. Vite injects your React app into the <div id="root"> element.
• src/main.jsx — The JavaScript entry point that renders your root component into the DOM.
• src/App.jsx — Your first React component. This is where you will start writing code.

Your First Edit

Open src/App.jsx and replace its contents:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>My first React application is running.</p>
    </div>
  );
}

export default App;

Save the file. The browser updates instantly — that is Vite's Hot Module Replacement in action. No manual refresh needed.