Getting Started

The fastest way to start a modern React app is Vite: a build tool with an instant dev server, native hot module replacement, and a production build powered by Rollup. It’s the recommended starting point for client-side React in 2026.

Prerequisites

You need a recent Node.js (20 LTS or newer) and a package manager. Verify your install:

node -v   # v20.x or later
npm -v

Scaffold a project with Vite

Run the Vite scaffolder and choose the React + TypeScript template when prompted:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Vite prints a local URL—usually http://localhost:5173—and opens a live-reloading dev server. Edit a file and the change appears in the browser instantly, without losing component state.

Use --template react (without -ts) for plain JavaScript. We strongly recommend TypeScript for anything beyond a throwaway demo—the type safety pays for itself quickly.

Project structure

A fresh Vite + React project is intentionally minimal:

my-app/
├── index.html          # the single HTML entry point
├── package.json
├── tsconfig.json
├── vite.config.ts      # Vite + plugin configuration
└── src/
    ├── main.tsx        # bootstraps React onto the DOM
    ├── App.tsx         # your root component
    └── assets/

Note that index.html lives at the root, not in public/—Vite treats it as the entry. Inside it, a single <div id="root"> is where React mounts.

The bootstrap happens in main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

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

createRoot is the React 18+ entry API. StrictMode is a development-only wrapper that surfaces bugs early by intentionally double-invoking certain functions (more on that in the effects chapter).

Your first component

Replace the contents of src/App.tsx with a small component of your own:

function App() {
  const now = new Date().toLocaleTimeString();

  return (
    <main>
      <h1>Welcome to React</h1>
      <p>The page rendered at {now}.</p>
    </main>
  );
}

export default App;

Save the file and the browser updates immediately. You’ve just written a function that returns markup—the fundamental unit of every React app.

Available scripts

Command	What it does
npm run dev	Start the dev server with hot reload
npm run build	Produce an optimized production bundle in dist/
npm run preview	Serve the production build locally to verify it

Going further: frameworks

Vite is perfect for single-page apps. When you need server-side rendering, file-based routing, data fetching, or backend API routes, reach for a framework built on React:

• Next.js — the most popular full-stack React framework, with Server Components, streaming, and a powerful router.
• Astro — ideal for content-driven sites; renders React components to static HTML and ships JavaScript only where you opt in.

You can start with Vite today and migrate later—the React you learn here transfers directly. Next, we’ll dig into JSX, the syntax you used above to describe markup.