Graduating to a Real Toolchain
Understand why the CDN + in-browser Babel setup doesn't scale, and what a build tool like Next.js gives you instead.
Step 1 of 3
The CDN setup got you here — but it can't go further
Everything you built loaded React from a CDN and let Babel translate JSX in the browser. That was perfect for learning: zero install, instant results. But it quietly does a lot of expensive, fragile things that no real app would ship:
- It ships the entire Babel compiler to every visitor — megabytes of translator that exist only to convert your code, downloaded fresh by every user, every visit.
- It translates on every page load instead of once, ahead of time — so the page is slower to start.
- Everything lives in one HTML file. There's no clean way to split components into separate files, or to pull in packages from npm (the millions of free libraries other developers share).
- There's no routing, no server rendering, no optimization. One page, rendered entirely in the browser.
Real React apps fix all of this with a build tool: a program that translates and bundles your code once, on your machine, into small optimized files ready to serve.
Web Standard
Production React is compiled ahead of time, not in the browser. The visitor downloads plain, already-translated JavaScript — no Babel, no JSX, just fast code. The browser never knows JSX existed.
Learn more on MDN