Tutorials

Quick Start | React

Key Takeaways

  • Vite's React template supplies the dependencies, entry point, and HTML mount element without requiring manual bundler configuration.
  • Render your application with createRoot from react-dom/client, followed by root.render.
  • The template's index.html belongs at the project root, not inside public.
  • Open the development URL printed in your terminal, then use npm run build and npm run preview to check the production output.

To create a React app with Vite, scaffold the React template, install its dependencies, and start the development server. The template already connects React to an HTML page, so you can render Hello World without configuring a bundler yourself.

If you're coming from our Webpack tutorial, start a separate project directory for this walkthrough rather than copying that configuration. New to React itself? Our React introduction provides the background.

Before You Start: Node.js and npm

Use Node.js 24 LTS and npm for this walkthrough. If you're staying on the Node.js 22 release line, Vite requires version 22.12 or newer; check the current Vite requirements if your package manager reports a compatibility warning.

Check your installed versions before creating the project. The npm installation guide covers installing both tools if either command is unavailable.

node -v
npm -v

1. Create a React App with Vite

Run these commands from the directory where you keep your projects:

npm create vite@latest my-react-app -- --template react --no-interactive
cd my-react-app
npm install

The react template selects JavaScript, and --no-interactive skips the scaffolder's interactive prompts. The template's package.json already declares react and react-dom, so you don't need to install them separately.

2. Understand the Template's Vite Configuration

For the JavaScript React template used here, these are the important files. This is a partial tree, not the entire generated project:

my-react-app/
|-- index.html
|-- package.json
|-- public/
|-- src/
|   |-- App.jsx
|   |-- index.css
|   `-- main.jsx
`-- vite.config.js

The template's vite.config.js registers @vitejs/plugin-react:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

You don't need to change this configuration for Hello World. The React plugin configures the automatic JSX runtime and enables Fast Refresh, React's development integration for updating components while you edit. Other templates can use different configuration filenames or plugins.

Do You Need Babel for JSX?

No additional Babel configuration is needed for this example. JSX is HTML-like syntax inside JavaScript, not an HTML string; it must be transformed before the browser executes it. Vite's current JSX transformation uses Oxc, while the React plugin supplies React-specific integration.

Transforming JSX and running a custom Babel plugin are separate concerns. If you need a Babel-specific transform, add an explicit integration such as @rolldown/plugin-babel; the React plugin's changelog documents the removal of its older built-in Babel configuration.

3. Render Hello World with React's Root API

The generated src/main.jsx already creates a React root and renders App. Normally, you can leave that entry point alone and edit src/App.jsx. Replacing the entry file below is optional: it strips the example down to the mounting process.

Replace src/main.jsx

Replace the entire file with:

import * as ReactDOM from 'react-dom/client';

const container = document.getElementById('root');

if (!container) {
  throw new Error('Missing #root element in index.html');
}

const element = <h1>Hello World!</h1>;
const root = ReactDOM.createRoot(container);

root.render(element);

There are three important pieces:

  1. document.getElementById('root') finds the browser element React will manage.
  2. ReactDOM.createRoot(container) creates a React root associated with that element.
  3. root.render(element) displays the JSX inside it.

Here, ReactDOM is a namespace imported from react-dom/client, not the older react-dom entry point. You don't need import React from 'react' just to write JSX with this template's automatic runtime.

Verify the Project-Root index.html

Open my-react-app/index.html, alongside package.json. The starter already includes the root element and module entry script. You can keep it or replace it with this minimal equivalent:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Hello World</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

The id="root" must match the lookup in main.jsx. Vite processes this root-level HTML file as an application entry point. By contrast, the public directory holds static assets that are copied into the build output unchanged; don't move this HTML entry file there.

4. Run the Vite React Development Server

From my-react-app, start the server:

npm run dev

Open the Local URL printed in your terminal. Vite's default development port is 5173, so a default run normally shows:

Local: http://localhost:5173/

If that port is occupied, Vite tries another available port. Follow the actual terminal URL rather than assuming port 3000 or even 5173.

You should see Hello World!. Change the heading text in main.jsx and save to verify that development updates work. Vite supports hot module replacement (HMR), which updates changed modules without a full page reload when possible; some edits still require a reload.

We choose Vite here because its React template removes manual setup, not because every project will build faster than an equivalent Webpack project. Compare performance using your own application and configuration.

5. Build and Preview the Production Output

Stop the development server with Ctrl+C, then run:

npm run build
npm run preview

The build command generates production files in dist by default. Preview serves that generated output locally, normally on port 4173; open its printed URL and confirm that Hello World still appears. If you change source files afterward, rebuild before checking preview again.

For deployment, publish the contents of dist to a static hosting service. Follow Vite's deployment instructions for your host, especially if the app will live under a URL subdirectory.

Common Mistakes

  • Unsupported Node.js version: Check node -v in the terminal running Vite, then switch to a supported release before reinstalling dependencies.
  • Missing mount element: If the example throws its missing-root error, check the spelling of id="root" in the project-root HTML file.
  • Editing the wrong file: After replacing main.jsx with this example, App.jsx is no longer imported, so changing it won't change the page.
  • Opening HTML directly: Use the development or preview server URL rather than opening index.html from your filesystem.

Once both development and preview work, move your UI into components. Continue with our React components quick start.

FAQ

How do I create a React app with Vite?

Run npm create vite@latest my-react-app -- --template react --no-interactive, enter the generated directory, and run npm install followed by npm run dev. Use a Node.js release supported by Vite.

Where is index.html in a Vite React project?

The React template places index.html at the project root, alongside package.json. It contains the root mount element and the module script that loads src/main.jsx; it does not belong in public.

What URL does the Vite development server use?

The default development URL is http://localhost:5173/. If that port is busy, Vite tries another available port, so use the Local URL printed by npm run dev.

Do I need to install React separately with the Vite React template?

No. The React template declares react and react-dom in package.json, and npm install installs them along with the other project dependencies.

How do I build and preview a Vite React app?

Run npm run build to generate production files in dist, then npm run preview to serve that output locally. Open the printed URL to check the build; preview is not intended to serve production traffic.

Further Reading

Written by Sam Erickson

Software engineer. I write every article on StackChief myself. Author of Mastering the Tech Interview. More about me

Related reading