Back
Learn › React — Build Modern Web Apps › Set up a real React project with Vite

Set up a real React project with Vite

2 min read

From snippets to a real project

So far we have written React in pieces. Now let us create an actual React project on your computer — the way real developers do. The fastest, modern tool is Vite.

Creating the project

You need Node.js installed. Then, in your terminal:

npm create vite@latest my-app
# choose: React, then JavaScript

cd my-app
npm install
npm run dev

That last command starts a local server (usually at http://localhost:5173). Open it — your React app is live, and it auto-refreshes every time you save.

What are the important files?

Vite gives you a folder structure. The ones that matter at first:

my-app/
├── index.html        ← the single HTML page
├── package.json      ← your dependencies & scripts
└── src/
    ├── main.jsx       ← the entry point (starts React)
    ├── App.jsx        ← your main component
    └── components/    ← (you create) your own components

How does it all connect?

The chain is simple:

  1. index.html has one empty <div id="root"></div>.
  2. main.jsx tells React: "render <App /> inside that root".
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);
  1. App.jsx is your app — and it pulls in all your other components.

Organizing your components

As your app grows, put each component in its own file inside src/components/ and export it:

// src/components/Navbar.jsx
export default function Navbar() {
  return <nav>My Site</nav>;
}

Then import it where needed:

import Navbar from "./components/Navbar.jsx";

One component per file keeps a big app tidy and easy to navigate.

Vite scaffolds a real React app in seconds. main.jsx mounts <App /> into #root; you build the rest as one-component-per-file inside src/.

Log in to track progress
← Previous
Build a To-Do App in React
Tip