Setup with Vite
Create a new React 19 project in seconds using the Vite build tool.
Syntax
npm create vite@latest my-app -- --template reactVite is the recommended way to start a new React project locally. It gives you a fast dev server with hot reloading and an optimized production build.
Steps
- Run the create command and choose the React template.
- Install dependencies with
npm install. - Start the dev server with
npm run dev.
Your app entry point lives in src/main.jsx, which mounts the root App component into an HTML element with id root.
Example
# Create a new React app with Vite
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devWhen to use it
- A developer bootstraps a new React 19 project in under a minute using Vite's create command instead of configuring Webpack manually.
- A team uses Vite's HMR during daily development so component edits appear in the browser instantly without losing application state.
- A CI pipeline runs npm run build which uses Vite's Rollup bundler to produce a tree-shaken, production-optimised build ready for deployment.
More examples
Scaffold a Vite React project
Creates a React project with Vite scaffolding, installs dependencies, and starts the dev server.
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devVite-generated entry point
Shows the auto-generated main.jsx that mounts the React component tree into the DOM.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);Custom vite.config.js
Demonstrates a minimal vite.config.js that enables the React plugin and sets a custom dev server port.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 3000 },
build: { outDir: 'dist' },
});
Discussion