We use cookies to enhance your experience on the site

Creating a React project with Vite

On a cosmic journey through the React world, you need a suitable ship to set off. In the past, the standard choice was Create React App (CRA), but this tool has been officially deprecated and is no longer maintained. The modern standard for creating React projects is Vite - an ultrafast next-generation bundler.

Ra, our cosmic guide, says: "Abandon the old CRA shuttle - Vite is the new warp drive engine that will take you to the React galaxy faster than ever!"

Why Vite?

Vite (pronounced "veet," from French for "fast") is a modern tool for building frontend applications, created by Evan You (the creator of Vue.js). It is officially recommended by the React documentation as the way to create new projects.

Why Vite replaced CRA:

Lightning-fast server start - Vite leverages native browser ES modules (ESM), so the development server starts in 1-2 seconds (CRA needed 20-40 seconds)
Instant Hot Module Replacement (HMR) - code changes appear in the browser in ~50ms, regardless of the application size
Modern architecture - built on ESM instead of the older Webpack
Fast production builds - uses Rollup for efficient bundling
Out-of-the-box support - TypeScript, JSX, CSS Modules, PostCSS work without additional configuration

Creating a new project with Vite

To create a new React project with Vite, open the terminal and type:

1npm create vite@latest my-react-app -- --template react

This command:

Uses
```
npm create
```
to run the Vite generator
```
vite@latest
```
ensures using the latest version
```
my-react-app
```
is your project name
```
--template react
```
selects the React template (also available:
```
react-ts
```
for TypeScript)

After creating the project, navigate to the directory and install dependencies:

1cd my-react-app
2npm install

Then start the development server:

1npm run dev

Your application will be available at

http://localhost:5173

in the browser. Note - Vite uses port 5173 by default, not 3000.

Vite + React project structure

After creating the project, you'll see the following structure:

1my-react-app/
2├── node_modules/         # Installed dependencies
3├── public/               # Static files (copied as-is)
4│   └── vite.svg          # Vite logo
5├── src/                  # Source code
6│   ├── assets/           # Assets (images, fonts)
7│   │   └── react.svg     # React logo
8│   ├── App.css           # App component styles
9│   ├── App.jsx           # Main App component
10│   ├── index.css         # Global styles
11│   └── main.jsx          # Application entry point
12├── index.html            # Main HTML file (in root directory!)
13├── vite.config.js        # Vite configuration
14├── package.json          # Project info and dependencies
15├── .gitignore            # Files ignored by Git
16└── .eslintrc.cjs         # ESLint configuration

Key differences from CRA

Notice a few important differences:

index.html is in the root directory, not in
```
public/
```
- Vite treats it as the entry point
Files use the .jsx extension instead of .js - this clearly signals that a file contains JSX
The entry point is main.jsx, not index.js
vite.config.js instead of hidden Webpack configuration - you have full control

index.html

In Vite, the

index.html

file is in the project root directory and looks like this:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Vite + React</title>
8  </head>
9  <body>
10    <div id="root"></div>
11    <script type="module" src="/src/main.jsx"></script>
12  </body>
13</html>

The key line is

<script type="module" src="/src/main.jsx"></script>

- Vite loads the application as a native ES module, ensuring a lightning-fast start.

src/main.jsx

This is the React application entry point:

1import React from 'react'
2import ReactDOM from 'react-dom/client'
3import App from './App.jsx'
4import './index.css'
5
6ReactDOM.createRoot(document.getElementById('root')).render(
7  <React.StrictMode>
8    <App />
9  </React.StrictMode>,
10)

This code:

Imports React and ReactDOM
Creates a React "root" in the element with id
```
root
```
Renders the main
```
App
```
component inside
```
StrictMode
```

src/App.jsx

The main component of your application:

1import { useState } from 'react'
2import reactLogo from './assets/react.svg'
3import viteLogo from '/vite.svg'
4import './App.css'
5
6function App() {
7  const [count, setCount] = useState(0)
8
9  return (
10    <>
11      <div>
12        <a href="https://vite.dev" target="_blank">
13          <img src={viteLogo} className="logo" alt="Vite logo" />
14        </a>
15        <a href="https://react.dev" target="_blank">
16          <img src={reactLogo} className="logo react" alt="React logo" />
17        </a>
18      </div>
19      <h1>Vite + React</h1>
20      <div className="card">
21        <button onClick={() => setCount(c => c + 1)}>
22          count is {count}
23        </button>
24      </div>
25    </>
26  )
27}
28
29export default App

vite.config.js

The Vite configuration file - simple and readable:

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3
4export default defineConfig({
5  plugins: [react()],
6})

That's all you need! The

@vitejs/plugin-react

plugin provides JSX support, Fast Refresh (HMR), and other React features.

Available scripts

In the Vite project's

package.json

you'll find:

```
npm run dev
```
- starts the development server with HMR
```
npm run build
```
- builds the application for production deployment
```
npm run preview
```
- previews the built production version locally
```
npm run lint
```
- checks code using ESLint

Vite vs CRA - comparison

| Feature | CRA (deprecated) | Vite | |---------|-------------------|------| | Status | Deprecated, no updates | Actively maintained | | Server start | 20-40 seconds | 1-2 seconds | | HMR | 1-3 seconds | ~50ms | | Bundler | Webpack | ESBuild (dev) + Rollup (prod) | | Configuration | Hidden (eject) | Explicit (vite.config.js) | | Modules | CommonJS | Native ES Modules | | TypeScript | Requires configuration | Works out-of-the-box |

Other tools in the React ecosystem

Besides Vite, it's worth knowing other popular tools:

Next.js - a React framework with SSR (Server-Side Rendering), SSG, and file-based routing. Ideal for applications requiring SEO
Remix - a React framework focused on web fundamentals and progressive enhancement
Gatsby - a static site generator with GraphQL

For learning React and building SPA (Single Page Application) applications, Vite is the best choice - fast, simple, and officially recommended.

Ra summarizes: "Vite is the next-generation engine for your React spaceship. Fast startup, instant reactions to course changes, and full control over configuration - everything you need to conquer the galaxy!"

Go to CodeWorlds→