Chapter 7: Creating a React App

Core Idea

For a new app or website, start with a full-stack framework rather than assembling a build tool by hand — the recommended frameworks already implement React's newest architecture (Server Components, Suspense-integrated data fetching) and remain deployable as static/CSR-only if you don't need a server.

Key Concepts

• Next.js (App Router): the most complete implementation of the React Server Components spec; maintained by Vercel; npx create-next-app@latest; deployable to any Node/Docker host or as a static export.
• React Router (v7): the most popular React routing library, pairable with Vite for a full-stack setup; maintained by Shopify; npx create-react-router@latest.
• Expo: for universal Android/iOS/web apps with truly native UI, built on React Native; npx create-expo-app@latest.
• Full-stack frameworks don't require a server: all three support CSR/SPA/SSG deployable to a static host or CDN, with SSR available opt-in per route later — you're not locked into running a server from day one.
• Emerging frameworks: TanStack Start (beta, powered by TanStack Router) and RedwoodSDK are called out as up-and-coming full-stack options.
• React Server Components (RSC): lets a server-only async component read from a database/file directly and pass plain data down to interactive client components — no separate API endpoint required for that data path.

Code Examples

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  const talks = await db.Talks.findAll({ confId });
  const videos = talks.map(talk => talk.video);
  return <SearchableVideoList videos={videos} />;
}

• What it demonstrates: an async Server Component reading from a data layer directly, with no client-side fetch/loading-state boilerplate — the framework-level payoff of RSC.

Reference Tables

Framework	Maintainer	Scaffold command	Best for
Next.js (App Router)	Vercel	npx create-next-app@latest	Most complete RSC support
React Router v7	Shopify	npx create-react-router@latest	Router-first, Vite-based
Expo	Expo	npx create-expo-app@latest	Universal native + web

Key Takeaways

1. Default recommendation for a new app: pick a full-stack framework, not a from-scratch build (Ch 6) — it's less work and already solves routing/data-fetching/rendering-strategy.
2. "Full-stack" doesn't mean "requires a server" — you can ship these as static/CSR apps and opt into server rendering per route later.
3. RSC and Suspense-integrated data fetching are React features, but adopting them today effectively means adopting Next.js's App Router, since it's the most complete implementation.

Connects To

• Ch 6 (Build a React App from Scratch): the harder alternative when a framework's constraints don't fit.
• Ch 70 (Suspense): the primitive that framework-level data fetching integrates with.
• Ch 110 (Server Components): deeper reference on the RSC directive model.