What React alone doesn't give you

lesson 1-1 · ~10 min · 1/29

The gap after the React course

In the React course you built components, wired up state with useState, and fetched data in useEffect. That knowledge is the foundation of this whole course. But React itself is deliberately small. It is a view library: it turns state into UI and keeps the two in sync. Everything else about a real website is left to you.

Ask yourself what your React apps were missing:

Routing. You probably rendered one page, or bolted on a router library.
Server rendering. The browser got an empty <div id="root"> and waited for JavaScript.
Data fetching conventions. Every team invents its own useEffect plus loading-flag dance.
Production plumbing. Code splitting (breaking your JavaScript into per-page chunks so visiting one page does not download the code for the whole app), image optimization, caching, deployment.

Why the empty div hurts

A plain React app (a single-page application, or SPA) ships one HTML file that is almost empty:

<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>

The user's browser downloads the JavaScript bundle, runs it, and only then does React draw the page. Two costs follow:

Slow first paint. On a cheap phone with weak Wi-Fi, users stare at a blank screen.
Weak SEO (search-engine optimization — how easily search engines like Google can read and rank your pages, which decides how much free traffic finds your site). Crawlers and link previews often read only the raw HTML. An empty div tells them nothing about your content.

Quiz

A plain React SPA is loaded by a search crawler that only reads the initial HTML. What does the crawler see?

You already built the other half

In Backend with Node.js you wrote Express servers: routes like app.get("/posts/:id"), JSON APIs, middleware, environment variables. So you have actually met both halves of a production web app, a rendering layer (React) and a server layer (Express), as separate projects that talk over HTTP.

A framework's pitch is simple: what if one project gave you both halves, with the wiring already done? Routing that comes from your file names. Components that can run on the server and touch data directly. One npm run build that outputs a deployable app. That is exactly what Next.js is, and it is why the official React docs recommend starting new apps with a framework.

Quiz

Which of these problems is React *itself* designed to solve?

Quiz

Your app has 40 pages and code splitting is set up. What JavaScript does a visitor to /about download?