React frameworks

What React leaves to you

React turns components into a page and keeps the page matching your data. A whole app needs more than that: pages with their own addresses, data from a server, HTML that shows before the JavaScript runs, code split into pieces, and a way to change data on the server. Here is a two-page tea shop built with React and nothing else. Press Teas, then Home, then Teas again:

1import { useEffect, useState } from "react";2 3// Stands in for a request to your server: three teas, after 0.6 seconds.4function fetchTeas() {5  return new Promise((resolve) => setTimeout(() => resolve(["Mint", "Chai", "Sencha"]), 600));6}7 8export default function App() {9  const [page, setPage] = useState("home");10  const [teas, setTeas] = useState(null);11 12  useEffect(() => {13    if (page !== "teas") return;14    let ignore = false;15    fetchTeas().then((list) => {16      if (!ignore) setTeas(list);17    });18    return () => {19      ignore = true;20    };21  }, [page]);22 23  return (24    <>25      <nav className="row">26        <button onClick={() => setPage("home")}>Home</button>27        <button onClick={() => setPage("teas")}>Teas</button>28      </nav>29      {page === "home" && <h1>Welcome to the tea shop</h1>}30      {page === "teas" && (teas ? <ul>{teas.map((tea) => <li key={tea}>{tea}</li>)}</ul> : <p>Loading teas…</p>)}31    </>32  );33}

Line 9 keeps the current page in state, and the buttons on lines 26 and 27 change it. Lines 12 to 21 are an Effect that asks for the teas when the Teas page shows, the way Fetching data taught, and line 30 shows Loading teas… until they arrive, 0.6 seconds later. It works. But look at what's missing:

• Addresses. The page is state, not part of the address, so the browser's Back button doesn't go back to Home, and nobody can share a link to the Teas page. That's a router's job (Routing).
• Data at the right time. The request starts only after the Teas page has rendered, and starts again on every visit.
• HTML. The server sends an empty page, and everything appears once the JavaScript has run: client-side rendering (Rendering strategies).
• Code per page. Both pages come in one file. A real shop with fifty pages sends all fifty to every visitor.
• Server code. Adding to a cart needs an API, or Server Functions, which need a server and a build that supports them (Server Functions).

You can add each of these yourself, with libraries. A framework is React plus all of them, chosen to work together.

Why react.dev recommends a framework

react.dev's Creating a React App page, checked on October 26, 2026, says: if you want to build a new app or website with React, start with a framework. Its Build a React app from Scratch page gives the reasons against going without one:

• You end up building your own framework, one problem at a time, as the app grows.
• Server rendering, static generation and Server Components are yours to build, and so is any future React feature that needs support from the framework.
• Apps built by hand tend to load slowly in a specific way: one request waits for another, a waterfall.
• It's harder to get help, because your routing and data loading are unlike anyone else's.

The waterfall is the easiest to see. Here a tea page's code loads separately, as it would in an app split into one piece per page, and so does its data; each takes 500 ms. The timeline.jsx tab is a stopwatch that lists what happened when. Press Open the tea page:

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = false;6 7let teas = null;8function loadTeas() {9  teas ??= clock.wait(500).then(() => {10    clock.mark("The data arrives");11    return ["Mint", "Chai", "Sencha"];12  });13  return teas;14}15 16// Stands in for downloading the tea page's code, which takes 500 ms.17const TeaPage = lazy(() =>18  clock.wait(500).then(() => {19    clock.mark("The page's code arrives");20    return { default: TeaList };21  }),22);23 24function TeaList() {25  const list = use(loadTeas());26  useEffect(() => clock.mark("The page shows"), []);27  return <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>;28}29 30export default function App() {31  const [open, setOpen] = useState(false);32 33  function openTeaPage() {34    clock.start();35    if (startDataEarly) loadTeas();36    setOpen(true);37  }38 39  return (40    <>41      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>42      {open && (43        <Suspense fallback={<p>Loading…</p>}>44          <TeaPage />45        </Suspense>46      )}47      <Timeline />48    </>49  );50}

Lines 8 to 14 load the teas, once, in 500 ms. Lines 17 to 22 use lazy for the tea page's code, which also takes 500 ms. TeaList asks for the data with use on line 25, when it first renders, and line 26 marks when it shows. The timeline says: 500 ms: The page's code arrives, 1000 ms: The data arrives, 1000 ms: The page shows. The data couldn't start until the code that asks for it had arrived, so the two waits happened one after the other.

Now press Edit & run and set line 5 to true. Line 35 then starts the data the moment you choose the page, at the same time as the code. Run it again: everything arrives at 500 ms, and the page shows at 500 ms, twice as soon.

Starting the data with the navigation is exactly what a framework's router does: when you go to a page, it knows that page's code and its data, and loads both at once. Next.js does it with Server Components, which read the data on the server while they render; React Router and TanStack Start do it with each route's loader. With a router library and a data library you can do it too, by connecting them yourself; frameworks have it built in. Here is the fixed version, to compare with the original:

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = true;6 7let teas = null;8function loadTeas() {9  teas ??= clock.wait(500).then(() => {10    clock.mark("The data arrives");11    return ["Mint", "Chai", "Sencha"];12  });13  return teas;14}15 16// Stands in for downloading the tea page's code, which takes 500 ms.17const TeaPage = lazy(() =>18  clock.wait(500).then(() => {19    clock.mark("The page's code arrives");20    return { default: TeaList };21  }),22);23 24function TeaList() {25  const list = use(loadTeas());26  useEffect(() => clock.mark("The page shows"), []);27  return <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>;28}29 30export default function App() {31  const [open, setOpen] = useState(false);32 33  function openTeaPage() {34    clock.start();35    if (startDataEarly) loadTeas();36    setOpen(true);37  }38 39  return (40    <>41      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>42      {open && (43        <Suspense fallback={<p>Loading…</p>}>44          <TeaPage />45        </Suspense>46      )}47      <Timeline />48    </>49  );50}

What a framework does for you

How to read the table: each row is one job, who does it with React and Vite alone, and who does it in a framework.

Routes from files

Most frameworks find your pages from your files, so adding a page is adding a file. This example is a small model of Next.js's rules, written for the lesson in the routes.js tab. Type other addresses into the box, like /cart or /blog:

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10];11 12export default function App() {13  const [url, setUrl] = useState("/teas/mint");14  const match = matchUrl(files, url);15 16  return (17    <>18      <table>19        <thead>20          <tr>21            <th>File</th>22            <th>Address</th>23          </tr>24        </thead>25        <tbody>26          {files.map((file) => (27            <tr key={file}>28              <td>{file}</td>29              <td>{toRoute(file) ?? "not a page"}</td>30            </tr>31          ))}32        </tbody>33      </table>34      <label className="row">35        Visit36        <input value={url} onChange={(event) => setUrl(event.target.value)} />37      </label>38      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>39    </>40  );41}

Lines 5 to 10 list the files. In routes.js, line 4 says that only page.jsx files are pages, and line 6 turns the folders into an address, with a folder in brackets, [id], becoming a part you can read, :id. The table shows /, /teas, /teas/:id and /cart. For /teas/mint, line 38 of App.jsx says app/teas/[id]/page.jsx shows it, with params {"id":"mint"}. For /blog, there's no page.

Because the framework knows every page at build time, it can do the other jobs per page: build each one as its own piece of code, start loading a page's code and data before you even click a link to it, and choose how each one renders. Not every framework uses folders: React Router lists its routes in a file, and TanStack Router names the files with dots (teas.$id.jsx).

Next.js and its App Router

Next.js is maintained by Vercel, and react.dev lists it first. Its App Router (the app folder) is built on Server Components: every component is one unless its file says "use client". This is the tea page:

// app/teas/[id]/page.jsx
import { db } from "@/db";
import AddToCart from "./AddToCart";

export default async function TeaPage({ params }) {
  const { id } = await params;
  const tea = await db.teas.find(id);
  return (
    <main>
      <h1>{tea.name}</h1>
      <AddToCart teaId={tea.id} />
    </main>
  );
}

Line 1 is the file's place, which makes it the page for /teas/ and any id. Line 5 is an async Server Component that gets the address's parts as params; line 6 waits for them, because in Next.js 15 and later params is a promise. Line 7 reads the tea straight from the database, on the server, with no API and no Effect. Line 11 renders AddToCart, a Client Component that can call a Server Function. A loading.jsx next to the page becomes its Suspense fallback:

// app/teas/[id]/loading.jsx
export default function Loading() {
  return <p>Loading the tea…</p>;
}

What Next.js gives you, as of version 16.4.3 (checked October 26, 2026):

• Server Components, Server Functions and streaming, in what react.dev calls the most complete implementation of the Server Components specification so far.
• Static, server or client rendering chosen per route, with revalidation (Rendering strategies used its revalidate setting).
• Its own bundler, Turbopack, the default for new projects since Next.js 16.
• Deployment to any Node.js server, a Docker container, or a static export, which drops what needs a server, like Server Functions and cookies.

One thing to know: the App Router runs a React canary build that ships inside Next.js, with stable React 19 plus features still being tried in frameworks. Next.js's docs still ask you to list react and react-dom in package.json, for your tools, but the pages use Next.js's own copy.

React Router as a framework

React Router, maintained by Shopify, is the routing library from the Routing lesson. Since version 7 it also has a framework mode: a Vite plugin that adds server rendering, code split per route, and type-checked route modules. Its routes live in one file:

// app/routes.js
import { index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.jsx"),
  route("teas/:id", "routes/tea.jsx"),
];

Line 5 makes routes/home.jsx the page for /, and line 6 maps teas/:id to routes/tea.jsx. Each of those files is a route module:

// app/routes/tea.jsx
import { db } from "../db.js";

export async function loader({ params }) {
  return { tea: await db.teas.find(params.id) };
}

export default function Tea({ loaderData }) {
  return <h1>{loaderData.tea.name}</h1>;
}

Lines 4 to 6 are the route's loader, which runs before the page renders. With server rendering on, it runs on the server: while the first page renders, and through a request from the browser on later navigations. Line 9 reads what it returned as loaderData. A route module can also export an action for forms, as in Server Functions. How the app renders is one setting:

// react-router.config.js
export default {
  ssr: false,
  prerender: ["/", "/teas/mint", "/teas/chai"],
};

Line 3, ssr: false, makes a browser-only app (SPA mode). Line 4 still renders three addresses to HTML at build time. Remove line 3, and the other pages render on the server for each request. Version 8 came out in June 2026: it needs Node.js 22.22 or later, React 19.2.7 or later and Vite 7 or later, and it drops the old react-router-dom package. The latest is 8.5.0. Its Server Components mode was still called experimental in its docs on October 26, 2026.

TanStack Start, Expo, and others

TanStack Start

TanStack Start adds server rendering, streaming and server functions to TanStack Router, a router known for type-checking every route, parameter and search parameter. Its server functions are its own API, not React's "use server":

// src/routes/teas.$id.jsx
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { db } from "../db.js";

const getTea = createServerFn({ method: "GET" })
  .validator((id) => String(id))
  .handler(async ({ data }) => db.teas.find(data));

export const Route = createFileRoute("/teas/$id")({
  loader: ({ params }) => getTea({ data: params.id }),
  component: TeaPage,
});

function TeaPage() {
  const tea = Route.useLoaderData();
  return <h1>{tea.name}</h1>;
}

Lines 6 to 8 make getTea with createServerFn: line 7 checks the input, and line 8 runs on the server. Line 10 makes the route for /teas/$id, and line 11's loader calls the server function. Line 16 reads the loader's data. TanStack announced Start 1.0 as stable on October 13, 2026 (version 1.169.4 on October 26, 2026); react.dev's list, checked the same day, still calls it Beta, among its "up-and-coming" frameworks.

Expo, for phone apps

Expo is react.dev's recommendation for native apps: real iOS and Android apps, made with React Native, and the web from the same code. Its router uses files too:

// app/teas/[id].jsx, in an Expo app
import { Text, View } from "react-native";
import { useLocalSearchParams } from "expo-router";

export default function TeaScreen() {
  const { id } = useLocalSearchParams();
  return (
    <View>
      <Text>Tea: {id}</Text>
    </View>
  );
}

Line 1 is the file: the screen for /teas/ and an id. Line 2 imports Text and View from react-native; there are no <h1> or <div> in a phone app. Line 6 reads the id, and line 9 shows it. The components, Hooks and state are the React you know. Expo is free; its build and update services are optional and paid. The latest SDK on October 26, 2026 was 58.

Starting any of them

Each one makes a new project with one command:

npx create-next-app@latest
npx create-react-router@latest
npx @tanstack/cli@latest create
npx create-expo-app@latest
npm create vite@latest my-app -- --template react

Lines 1 to 4 start Next.js, React Router, TanStack Start and Expo; line 5 starts a Vite app, as in Setting up a React project. react.dev also lists RedwoodSDK as up-and-coming. How to read the table: each row is one tool, what you get, and what's good to know, checked on October 26, 2026.

When Vite and a router are enough

react.dev's other path, building from scratch with Vite, Parcel or Rsbuild, is right for some apps: when your app has needs no framework serves well, when you want to learn how a React app fits together, or when you're sure you'll never need server rendering. In practice that often means:

• A dashboard or tool behind a login, where search engines never look and an API already exists.
• React added to part of an existing page, like a widget inside a site built with something else.
• Learning React, as this course does in its live examples.

You then choose the parts. A common pair is React Router as a library (its data mode) and a data library:

// src/main.jsx, in a Vite app
import { createRoot } from "react-dom/client";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import Home from "./Home.jsx";
import Tea, { teaLoader } from "./Tea.jsx";

const router = createBrowserRouter([
  { path: "/", Component: Home },
  { path: "/teas/:id", Component: Tea, loader: teaLoader },
]);

createRoot(document.getElementById("root")).render(<RouterProvider router={router} />);

Lines 8 to 11 list the routes, and line 10 gives the tea page a loader, so its data starts with the navigation, not after the render: no waterfall. Line 13 renders the router where main.jsx rendered App before. It's a browser-only app, hosted as plain files. The live examples in this course run React 19.3.1 this way too, without a framework, so that every line is in front of you.

Choosing for real projects

No tool is best for everything. Pick what your project needs, and the playground shows how each tool fits and why, from each project's own docs. Try a public shop (search engines), then an admin tool (behind a login), then a phone app:

For Search engines must read its pages, the three web frameworks are good fits and Vite works only with work. Add Everything is behind a login instead, and Vite and a router become a good fit too. Pick I want Server Components and Server Functions and It must run on static hosting together: nothing fits, because Server Functions need a server. When two tools both fit, the deciding questions are usually your team's: which one you know, where you'll host it, and whose docs you like.

Common mix-ups

• "A framework is a different React." No. Components, Hooks and state are the same; the framework adds the parts around them.
• "A framework needs a server." No. The recommended ones can all build a browser-only app or static files; only some features, like Server Functions, need a server.
• "Vite is a framework." No. It's a build tool: a development server and a build. React Router's framework mode and TanStack Start are built on it.
• "Without a framework, apps are always slow." No. The waterfall comes from when data starts loading. A router with loaders avoids it; a framework just has it built in.
• "React Router is only a library." Not since version 7. It's a library in declarative and data mode, and a framework in framework mode.
• "Create React App is the standard way to start." No. It was deprecated in February 2025.

Practice exercises

The exercises use the lesson's two models: the stopwatch in timeline.jsx, and the file rules in routes.js. Try a guess first, then use the hints.

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = false;6 7let teas = null;8function loadTeas() {9  teas ??= clock.wait(500).then(() => {10    clock.mark("The data arrives");11    return ["Mint", "Chai", "Sencha"];12  });13  return teas;14}15 16// Stands in for downloading the tea page's code, which takes 500 ms.17const TeaPage = lazy(() =>18  clock.wait(500).then(() => {19    clock.mark("The page's code arrives");20    return { default: TeaList };21  }),22);23 24function TeaList() {25  const list = use(loadTeas());26  useEffect(() => clock.mark("The page shows"), []);27  return <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>;28}29 30export default function App() {31  const [open, setOpen] = useState(false);32 33  function openTeaPage() {34    clock.start();35    if (startDataEarly) loadTeas();36    setOpen(true);37  }38 39  return (40    <>41      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>42      {open && (43        <Suspense fallback={<p>Loading…</p>}>44          <TeaPage />45        </Suspense>46      )}47      <Timeline />48    </>49  );50}

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = false;6 7let teas = null;8function loadTeas() {9  teas ??= clock.wait(500).then(() => {10    clock.mark("The data arrives");11    return ["Mint", "Chai", "Sencha"];12  });13  return teas;14}15 16// Stands in for downloading the tea page's code, which takes 500 ms.17const TeaPage = lazy(() =>18  clock.wait(500).then(() => {19    clock.mark("The page's code arrives");20    return { default: TeaList };21  }),22);23 24function TeaList() {25  const list = use(loadTeas());26  useEffect(() => clock.mark("The page shows"), []);27  return <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>;28}29 30export default function App() {31  const [open, setOpen] = useState(false);32 33  function openTeaPage() {34    clock.start();35    if (startDataEarly) loadTeas();36    setOpen(true);37  }38 39  return (40    <>41      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>42      {open && (43        <Suspense fallback={<p>Loading…</p>}>44          <TeaPage />45        </Suspense>46      )}47      <Timeline />48    </>49  );50}

import { useState } from "react";
import { matchUrl, toRoute } from "./routes.js";

// The files in a Next.js app's app folder. Add one, and its page exists.
const files = [
  "app/page.jsx",
  "app/teas/page.jsx",
  "app/teas/[id]/page.jsx",
  "app/cart/page.jsx",
];

export default function App() {
  const [url, setUrl] = useState("/teas/chai");
  const match = matchUrl(files, url);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>File</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          {files.map((file) => (
            <tr key={file}>
              <td>{file}</td>
              <td>{toRoute(file) ?? "not a page"}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <label className="row">
        Visit
        <input value={url} onChange={(event) => setUrl(event.target.value)} />
      </label>
      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>
    </>
  );
}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10];11 12export default function App() {13  const [url, setUrl] = useState("/teas/chai");14  const match = matchUrl(files, url);15 16  return (17    <>18      <table>19        <thead>20          <tr>21            <th>File</th>22            <th>Address</th>23          </tr>24        </thead>25        <tbody>26          {files.map((file) => (27            <tr key={file}>28              <td>{file}</td>29              <td>{toRoute(file) ?? "not a page"}</td>30            </tr>31          ))}32        </tbody>33      </table>34      <label className="row">35        Visit36        <input value={url} onChange={(event) => setUrl(event.target.value)} />37      </label>38      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>39    </>40  );41}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10];11 12export default function App() {13  const [url, setUrl] = useState("/teas/mint/reviews");14  const match = matchUrl(files, url);15 16  return (17    <>18      <table>19        <thead>20          <tr>21            <th>File</th>22            <th>Address</th>23          </tr>24        </thead>25        <tbody>26          {files.map((file) => (27            <tr key={file}>28              <td>{file}</td>29              <td>{toRoute(file) ?? "not a page"}</td>30            </tr>31          ))}32        </tbody>33      </table>34      <label className="row">35        Visit36        <input value={url} onChange={(event) => setUrl(event.target.value)} />37      </label>38      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>39    </>40  );41}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10  "app/teas/[id]/reviews/page.jsx",11];12 13export default function App() {14  const [url, setUrl] = useState("/teas/mint/reviews");15  const match = matchUrl(files, url);16 17  return (18    <>19      <table>20        <thead>21          <tr>22            <th>File</th>23            <th>Address</th>24          </tr>25        </thead>26        <tbody>27          {files.map((file) => (28            <tr key={file}>29              <td>{file}</td>30              <td>{toRoute(file) ?? "not a page"}</td>31            </tr>32          ))}33        </tbody>34      </table>35      <label className="row">36        Visit37        <input value={url} onChange={(event) => setUrl(event.target.value)} />38      </label>39      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>40    </>41  );42}

import { useState } from "react";
import { matchUrl, toRoute } from "./routes.js";

// The files in a Next.js app's app folder. Add one, and its page exists.
const files = [
  "app/page.jsx",
  "app/teas/page.jsx",
  "app/teas/[id]/page.jsx",
  "app/cart/page.jsx",
  "app/teas/new/page.jsx",
];

export default function App() {
  const [url, setUrl] = useState("/teas/new");
  const match = matchUrl(files, url);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>File</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          {files.map((file) => (
            <tr key={file}>
              <td>{file}</td>
              <td>{toRoute(file) ?? "not a page"}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <label className="row">
        Visit
        <input value={url} onChange={(event) => setUrl(event.target.value)} />
      </label>
      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>
    </>
  );
}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10  "app/teas/new/page.jsx",11];12 13export default function App() {14  const [url, setUrl] = useState("/teas/new");15  const match = matchUrl(files, url);16 17  return (18    <>19      <table>20        <thead>21          <tr>22            <th>File</th>23            <th>Address</th>24          </tr>25        </thead>26        <tbody>27          {files.map((file) => (28            <tr key={file}>29              <td>{file}</td>30              <td>{toRoute(file) ?? "not a page"}</td>31            </tr>32          ))}33        </tbody>34      </table>35      <label className="row">36        Visit37        <input value={url} onChange={(event) => setUrl(event.target.value)} />38      </label>39      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>40    </>41  );42}

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = false;6 7let reviews = null;8function loadReviews() {9  reviews ??= clock.wait(500).then(() => {10    clock.mark("The reviews arrive");11    return 12;12  });13  return reviews;14}15 16let teas = null;17function loadTeas() {18  teas ??= clock.wait(500).then(() => {19    clock.mark("The data arrives");20    return ["Mint", "Chai", "Sencha"];21  });22  return teas;23}24 25// Stands in for downloading the tea page's code, which takes 500 ms.26const TeaPage = lazy(() =>27  clock.wait(500).then(() => {28    clock.mark("The page's code arrives");29    return { default: TeaList };30  }),31);32 33function TeaList() {34  const list = use(loadTeas());35  useEffect(() => clock.mark("The page shows"), []);36  return (37    <>38      <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>39      <Reviews />40    </>41  );42}43 44function Reviews() {45  const count = use(loadReviews());46  useEffect(() => clock.mark("The reviews show"), []);47  return <p>{count} reviews</p>;48}49 50export default function App() {51  const [open, setOpen] = useState(false);52 53  function openTeaPage() {54    clock.start();55    if (startDataEarly) loadTeas();56    setOpen(true);57  }58 59  return (60    <>61      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>62      {open && (63        <Suspense fallback={<p>Loading…</p>}>64          <TeaPage />65        </Suspense>66      )}67      <Timeline />68    </>69  );70}

1import { Suspense, lazy, use, useEffect, useState } from "react";2import { Timeline, clock } from "./timeline.jsx";3 4// Change to true: start loading the data as soon as the page is chosen.5const startDataEarly = true;6 7let reviews = null;8function loadReviews() {9  reviews ??= clock.wait(500).then(() => {10    clock.mark("The reviews arrive");11    return 12;12  });13  return reviews;14}15 16let teas = null;17function loadTeas() {18  teas ??= clock.wait(500).then(() => {19    clock.mark("The data arrives");20    return ["Mint", "Chai", "Sencha"];21  });22  return teas;23}24 25// Stands in for downloading the tea page's code, which takes 500 ms.26const TeaPage = lazy(() =>27  clock.wait(500).then(() => {28    clock.mark("The page's code arrives");29    return { default: TeaList };30  }),31);32 33function TeaList() {34  const list = use(loadTeas());35  useEffect(() => clock.mark("The page shows"), []);36  return (37    <>38      <ul>{list.map((tea) => <li key={tea}>{tea}</li>)}</ul>39      <Reviews />40    </>41  );42}43 44function Reviews() {45  const count = use(loadReviews());46  useEffect(() => clock.mark("The reviews show"), []);47  return <p>{count} reviews</p>;48}49 50export default function App() {51  const [open, setOpen] = useState(false);52 53  function openTeaPage() {54    clock.start();55    if (startDataEarly) {56      loadTeas();57      loadReviews();58    }59    setOpen(true);60  }61 62  return (63    <>64      <button onClick={openTeaPage} disabled={open}>Open the tea page</button>65      {open && (66        <Suspense fallback={<p>Loading…</p>}>67          <TeaPage />68        </Suspense>69      )}70      <Timeline />71    </>72  );73}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10  "app/docs/[...slug]/page.jsx",11];12 13export default function App() {14  const [url, setUrl] = useState("/docs/brewing/water");15  const match = matchUrl(files, url);16 17  return (18    <>19      <table>20        <thead>21          <tr>22            <th>File</th>23            <th>Address</th>24          </tr>25        </thead>26        <tbody>27          {files.map((file) => (28            <tr key={file}>29              <td>{file}</td>30              <td>{toRoute(file) ?? "not a page"}</td>31            </tr>32          ))}33        </tbody>34      </table>35      <label className="row">36        Visit37        <input value={url} onChange={(event) => setUrl(event.target.value)} />38      </label>39      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>40    </>41  );42}

1import { useState } from "react";2import { matchUrl, toRoute } from "./routes.js";3 4// The files in a Next.js app's app folder. Add one, and its page exists.5const files = [6  "app/page.jsx",7  "app/teas/page.jsx",8  "app/teas/[id]/page.jsx",9  "app/cart/page.jsx",10  "app/docs/[...slug]/page.jsx",11];12 13export default function App() {14  const [url, setUrl] = useState("/docs/brewing/water");15  const match = matchUrl(files, url);16 17  return (18    <>19      <table>20        <thead>21          <tr>22            <th>File</th>23            <th>Address</th>24          </tr>25        </thead>26        <tbody>27          {files.map((file) => (28            <tr key={file}>29              <td>{file}</td>30              <td>{toRoute(file) ?? "not a page"}</td>31            </tr>32          ))}33        </tbody>34      </table>35      <label className="row">36        Visit37        <input value={url} onChange={(event) => setUrl(event.target.value)} />38      </label>39      <p>{match ? `${match.file} shows it, with params ${JSON.stringify(match.params)}` : "No page here: Next.js shows its 404 page."}</p>40    </>41  );42}

Check your understanding

For each question, ask which job is being done, and whether React, a router, or a framework does it.

Key takeaways

• React renders components. A framework adds routing, data loading, rendering strategies, bundling, and server code, built to work together.
• react.dev recommends a framework for a new app: Next.js, React Router, or Expo for phone apps, with TanStack Start and RedwoodSDK as up-and-coming.
• Hand-built apps tend to make waterfalls: data that waits for code that waits for a render. Frameworks start a page's code and data together.
• Frameworks don't require a server: they can build browser-only apps and static files, and add server rendering per route.
• Vite and a router are enough for apps behind a login, React inside another site, and learning.

Coming next: A tour of the React repository. The last stage opens React's own source code, starting with what lives where.