Chapter 3 of 4

Setting Up a React Project

The realistic ways to start a React project today, and what each one gives you.

You do not have to configure a build system by hand. There are a few standard starting points, and which one you pick depends on what you are building.

Vite: the fast default for a single page app

A React app running locally in well under a minute.
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Vite gives you a dev server with instant reloads and a production build command. It is the usual choice when you want a plain client-side React app with no server rendering.

Next.js: React with routing and server rendering

Next.js adds file-based routing, server rendering and data fetching.
npx create-next-app@latest my-app
cd my-app
npm run dev

If your project needs good SEO, server rendering, or an API layer alongside the UI, a framework such as Next.js saves you from assembling those pieces yourself.

What the generated project contains

  • index.html - a single page with an empty <div id="root"> for React to fill.
  • src/main.jsx - the entry point, where React attaches itself to that div.
  • src/App.jsx - your top-level component.
  • package.json - dependencies and the dev, build and preview scripts.
src/main.jsx - the whole bridge between React and the page.
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(<App />);

No build step at all

For experimenting you can load React straight from a CDN in a plain HTML file. That is exactly what the code exercises on this site do: your code runs in a sandboxed frame with React already loaded.