React via CDN
Definition
A normal React project is installed with npm and compiled by a bundler, which turns JSX into plain JavaScript and packs everything into one file. The CDN approach replaces all of that with two or three script tags: react, react-dom, and often Babel so that JSX written in the page can be translated in the browser. React is then available as a global, and the app mounts into a div by calling createRoot on it. Assistants reach for this shape because it produces something that runs from a double-click. It is a genuine React app — hooks, state and components all behave normally — but it is compiled at load time on the visitor's machine rather than once on yours.
Why It Matters
Everything works, and everything is slower. React and ReactDOM together are roughly 140 KB compressed; add the in-browser Babel transformer and you are near 300 KB before a single line of your own code runs. Babel then has to parse and transpile your JSX on every page load, which on a phone can add hundreds of milliseconds of blank screen. There is no tree-shaking either — you ship all of React whether you used one component or forty. React's documentation explicitly marks the in-browser Babel transform as unsuitable for production. The counterargument is real, though: a prototype that exists today beats a build pipeline that exists next week.
How It Works
The HTML loads react and react-dom from a CDN such as unpkg or jsdelivr, pinned to a version in the URL. A script tag with type set to text/babel holds the JSX; Babel finds it after the page parses, compiles it to JavaScript and evaluates it. Newer generated pages often skip the globals and use an import map plus the ES module builds instead, which keeps the code closer to what a bundled project looks like. Either way the visitor's browser does the work, and a static host is simply handing over an HTML file. Pin the version numbers — pointing at a floating latest URL means a library release can change your page without you touching it.
Real-World Example
A product manager publishes a roadmap viewer from a chat session at q3-roadmap.99helpers.site using 99helpers. The HTML is 22 KB; the React, ReactDOM and Babel scripts pull another 280 KB and the first paint lands about 900 ms later than the static version of the same page. For an internal link shared with six people that is fine. When the same viewer went on the public site, the team compiled it once with a bundler and uploaded a 40 KB build instead.
Common Mistakes
- ✕Leaving the in-browser Babel transform in a page real users will visit — it recompiles the whole app on every single load
- ✕Referencing an unpinned CDN URL, so a new React release can break the page without any change on your side
- ✕Mixing the global script builds with ES module imports in the same file — the two loading styles do not see each other
- ✕Assuming server-side rendering is available — a CDN-loaded React app renders in the browser only, so the served HTML is effectively empty
Related Terms
Tailwind via CDN
Loading Tailwind CSS from a script or stylesheet hosted on a public CDN instead of compiling it locally. It gives a single HTML file working utility classes with no build tooling at all.
Import Map
A block of JSON in an HTML page that tells the browser which URL a bare module name like react should resolve to. It lets a page use normal import statements without a bundler.
ES Module
JavaScript's built-in module format, using import and export statements. Browsers load ES modules natively from a script tag with type set to module, with no bundler involved.
Client-Side Rendering
A model where the server sends a nearly empty HTML file and JavaScript builds the page in the browser. Nothing is visible until the script has downloaded and run.
Build Step
A build step is the command that turns source files into the folder a web server can actually serve. It runs before publishing, produces an output folder, and is not part of the live site.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →