Chapter 6: Build a React App from Scratch
Core Idea
Building without a framework is the "build your own adhoc framework" path — pick a build tool, then separately solve routing, data fetching, code-splitting, and rendering strategy yourself, problems that a recommended framework already ships solved.
Key Concepts
- Step 1 — build tool: Vite (recommended, fast defaults,
npm create vite@latest my-app -- --template react-ts), Parcel (npm install --save-dev parcel), or Rsbuild (npx create-rsbuild --template react). React Native uses Metro instead.
- Step 2 — common application patterns, none of which the build tool gives you for free:
- Routing: React Router or TanStack Router — maps URLs to UI, handles nested/param/query routes.
- Data fetching: TanStack Query, SWR, or RTK Query for REST; Apollo or Relay for GraphQL. Fetching directly inside components risks request waterfalls — prefer prefetching in router loaders or on the server.
- Code-splitting: breaking the bundle into on-demand chunks (e.g. via
React.lazy) — reduces initial load and Largest Contentful Paint, but naive splitting can itself introduce a waterfall if data loads only after the split chunk arrives.
- Rendering strategy: SPA (default, simplest, slower first load) vs. streaming SSR (faster, more complex) vs. SSG (build-time HTML) vs. RSC (mixed server/client tree, most powerful, most setup). A real app often wants different strategies per route.
Reference Tables
| Rendering strategy | What it does | Trade-off |
|---|
| SPA | Single HTML page, client updates | Easiest; slower initial load |
| Streaming SSR | Server renders, streams to client | Better perceived perf; more ops complexity |
| SSG | Static HTML at build time | Fast, cacheable; not for per-request dynamic data |
| RSC | Mixed server-only + interactive tree | Most performant; deepest setup expertise required |
Key Takeaways
- This is explicitly the harder path — the docs frame it as "you'd have to solve framework-shaped problems yourself," and steer most readers toward Ch 7 (a real framework) instead.
- Choose the build tool first (Vite is the default recommendation), then separately assemble routing + data-fetching + code-splitting + rendering strategy from the ecosystem.
- Fetching data directly inside components (rather than in a router loader or on the server) is a common performance trap — it creates request waterfalls.
Connects To
- Ch 7 (Creating a React App): the framework path this chapter is the alternative to.
- Ch 91 (use): relevant when wiring your own Suspense-based data-fetching.