How to Set Up a React Project with Vite

To build your own React app you need a project: a folder with React installed, a development server that shows your changes instantly, and a build step that prepares the app for a real website. Vite sets all of this up with one command and is the most common way to start a React project.

1. Install Node.js#

Vite and npm run on Node.js. Install the LTS version from nodejs.org, then check it in a terminal:

node --version
npm --version

2. Create the project#

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

my-app is the folder name; --template react chooses React with JavaScript (use react-ts for TypeScript). Without the template option, Vite asks you to choose a framework and variant interactively. When it finishes, it prints the next steps:

  cd my-app
  npm install
  npm run dev

3. Install and run#

cd my-app
npm install
npm run dev

npm install downloads React and the tools listed in package.json. npm run dev starts the development server:

  VITE v8.3.5  ready in 699 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open http://localhost:5173/ in your browser. Leave the server running: whenever you save a file, the page updates immediately, usually without losing what is on screen. Stop it with Ctrl+C.

(The output above is from creating a project with create-vite 9.3.1 while writing this lesson; version numbers and the exact starter files change as Vite is updated.)

What is in the project#

my-app/
├── index.html          the single HTML page; contains <div id="root">
├── package.json        dependencies and scripts (dev, build, preview)
├── vite.config.js      Vite settings, with the React plugin
├── public/             files served as they are (favicon, icons)
└── src/
    ├── main.jsx        entry point: mounts React into #root
    ├── App.jsx         the main component; start editing here
    ├── App.css         styles for App
    ├── index.css       global styles
    └── assets/         images imported from components

The two files that connect everything:

<!-- index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

createRoot takes the empty #root element and render puts your App component inside it. Everything else in your app is a component inside App.

StrictMode turns on extra checks during development only. One visible effect: React runs some functions (components and effects) twice in development to help you find bugs. This is expected and does not happen in production.

Edit your first component#

Replace the contents of src/App.jsx with:

export default function App() {
  return <h1>My first React app</h1>;
}

Save, and the browser shows the new heading straight away.

Build for production#

npm run build

Vite bundles and minifies everything into a dist/ folder of plain HTML, CSS and JavaScript files that any static web host can serve. npm run preview serves that build locally so you can check it.

Editor setup#

• VS Code is the most common editor for React; it understands JSX out of the box.
• Add ESLint or the project's linter (newer Vite templates use oxlint, run with npm run lint) to catch mistakes.
• Install the React Developer Tools browser extension to inspect components, props and state in the running app.

Other ways to start#

• Next.js (npx create-next-app@latest) for full websites with routing, server rendering and back-end code; see React Frameworks.
• Online sandboxes (such as StackBlitz or CodeSandbox) run a React project in the browser with no install.

Common mistakes#

Key takeaway#

Next: JSX.