Setup React Project with Vite

Before you can write a single React component, you need a project to write it in — a folder with React installed, a build tool to bundle your code, and a dev server that refreshes the browser as you type. Vite gives you all of that in about thirty seconds, and it has become the standard way to start a React app because it is dramatically faster than the older Create React App.

This guide takes you from an empty machine to a running React app: what to install, the one command that scaffolds everything, what each generated file does, and how to run and build your project.

Why Vite

Vite (French for "quick", pronounced "veet") is a build tool that does two jobs: it runs a lightning-fast dev server while you code, and it bundles an optimized version of your app when you ship. Its advantage over the older Create React App is speed. Vite serves your source as native ES modules during development, so the server starts almost instantly and updates the browser the moment you save — even in a large project.

Create React App bundled your entire app before it could show anything, which grew slower as projects grew, and it is no longer actively recommended. That is why nearly every new React tutorial, including the React learning hub, now starts with Vite.

Pro tip: The two speed wins you will feel immediately are cold start (the dev server is ready in under a second) and hot module replacement (edits appear in the browser without losing your component's state). Both come from Vite serving modules on demand instead of pre-bundling everything.

Prerequisites

You need three things:

• Node.js — install the current LTS version from nodejs.org. It includes npm, the package manager you will use. Verify it is installed by checking the versions:

node --version    # expect v20.x or newer
npm --version     # expect 10.x or newer

• A code editor — VS Code is the common choice, with the ESLint and a React/JSX extension.
• A modern browser — Chrome or Firefox, plus the React DevTools extension you will lean on later for the performance work.

If node --version prints a version number, you are ready. If the command is not found, install Node first — everything else depends on it.

Scaffold the project

One command creates the whole project. Run it in the folder where you keep your code:

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

Breaking that down: npm create vite@latest runs Vite's project generator, my-react-app is your project's folder name, and --template react picks the plain JavaScript React template. (Swap it for react-ts if you want TypeScript from the start.) You can also run npm create vite@latest with no arguments and answer the interactive prompts instead.

Then move into the folder, install the dependencies, and start the dev server:

cd my-react-app
npm install        # download React and Vite into node_modules
npm run dev        # start the dev server at http://localhost:5173

Open the printed URL — usually http://localhost:5173 — and you will see the Vite + React starter page. You now have a working React app.

What Vite generated

Open the folder and you will find a lean structure. The files that matter to you at the start:

Two files deserve a closer look. main.jsx is the entry point — it grabs the root div and renders your app into it:

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>
);

You will rarely edit this file — it just bootstraps React once. App.jsx is where your actual UI begins, and it is the file you will edit constantly:

function App() {
  return (
    <div>
      <h1>My first Vite + React app</h1>
      <p>Edit src/App.jsx and save to see it update instantly.</p>
    </div>
  );
}

export default App;

Save that and the browser updates instantly — no reload, no wait. That save-and-see loop is the whole point of Vite, and it is where you will spend your time. The JSX inside App is covered in the JSX syntax guide, and the moment you add interactivity you will reach for the hooks in the hooks introduction.

Common mistake: Editing index.html to add your content. That page is only a shell — React renders everything inside #root. Your UI belongs in App.jsx and the components you create under src/, not in the HTML file.

The everyday commands

Three npm scripts cover your whole workflow, all defined in package.json:

• npm run dev — start the development server with hot reloading. Keep this running the entire time you code.
• npm run build — produce an optimized, minified production build in a dist/ folder. This is what you deploy.
• npm run preview — serve the built dist/ folder locally so you can check the production build before shipping.

The distinction between dev and build matters: dev is tuned for a fast feedback loop and is not optimized, while build output is minified, tree-shaken, and code-split for real users. Never deploy the dev server — deploy the dist/ output of build.

Add a component and test it

Before that, it helps to know how Vite differs from Create React App under the hood, because it explains the speed and the occasional surprise. Create React App used a bundler (webpack) that had to process your entire application into one bundle before the dev server could serve anything, and it re-bundled on every change. Vite instead serves your source files as native ES modules straight to the browser during development, so there is almost nothing to bundle up front — the browser requests modules as it needs them. For production, Vite switches to Rollup to produce a tightly optimized bundle. That "unbundled in dev, bundled for build" split is the core reason it feels so much faster day to day.

One practical consequence: environment variables in Vite must be prefixed with VITE_ to be exposed to your code (for example VITE_API_URL), and you read them through import.meta.env, not process.env. If you are migrating from Create React App, that naming change is the most common thing that trips people up.

With the app running, create your first real component to confirm the loop works. Make src/Welcome.jsx:

function Welcome({ name }) {
  return <h2>Welcome, {name}! You built this with Vite.</h2>;
}

export default Welcome;

Then use it in App.jsx by importing it and rendering <Welcome name="Anil" />. Save, and it appears instantly. That is the full development rhythm: create a component, import it, render it, watch it update live. When you are ready to make sure components keep working as you change them, the React Testing Library tutorial picks up naturally from a Vite project.

Where to go next

You now have the one skill every React tutorial assumes: a running project you can experiment in. From here, learn what React is if the mental model is still forming, then work through components, props, and state. For a guided path through your first real app, the beginner React tutorial builds on exactly this Vite setup.

At CodeBegun's Java Full Stack with AI program in Hyderabad, every React project starts with this Vite workflow, so students spend their time building features instead of fighting tooling. Get the setup into muscle memory — npm create vite, npm install, npm run dev — and you can spin up a fresh React playground any time an idea strikes.