Before you've written a single line of React code, you're already managing a package manager, a build tool, and a folder full of configuration files you don't fully understand yet.
Here's the thing — you don't have to start that way. React CDN links let you drop React directly into any HTML file, the same way you'd add a Google Fonts link or a jQuery script. No installation. No terminal commands. No build step. Just React, running in your browser immediately.
This guide explains exactly how React CDN works, when it's useful, what its limitations are, and when it's time to graduate to a proper npm-based setup.
What Is a CDN and How Does It Work With React?
A CDN — Content Delivery Network — is a globally distributed network of servers that hosts and delivers static files. When you link to a file hosted on a CDN, your browser downloads it from the nearest server in that network, making the load time fast regardless of where in the world you are.
React CDN links are simply the React library files (react.js and react-dom.js) hosted on a CDN, ready to be included in any HTML page with a <script> tag. When a visitor loads your page, their browser fetches the React files from the CDN and makes them available for your own code to use — no build pipeline, no server configuration, nothing installed on your machine.
The most commonly used CDN for React is unpkg, which automatically serves npm packages as CDN files. The official React documentation also references jsDelivr as a reliable option.
How to Add React via CDN: A Working Example
Here's a minimal example of a working React page using React CDN links — no build tools, no npm, nothing to install:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React CDN Demo</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN links -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Babel to transform JSX in the browser (development only) -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function Hello() {
return <h1>Hello from React CDN!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello />);
</script>
</body>
</html>
Save that as an .html file and open it in your browser. That's React, running — from a CDN, without installing a single thing.
A few things to note about this setup:
There are two separate React CDN files: react (the core library) and react-dom (the DOM-specific rendering layer). You need both.
In the example above, Babel is included to allow JSX in the browser. This is only suitable for development — browser-side Babel compilation is slow and should never be used in production.
For production, you'd switch from react.development.js to react.production.min.js — a minified, optimised version.
React CDN vs npm: What's the Actual Difference?
The react js cdn approach and the npm installation approach both give you React, but the experience — and the capabilities — are quite different.
React CDN
No installation required
Works in any HTML file instantly
No build step, no bundler, no configuration
Great for prototyping, experiments, and learning
Limited: no support for JSX transformation in production without Babel overhead, no module imports, no tree-shaking, harder to manage multiple component files cleanly
Not suitable for large applications
React via npm (with a bundler like Vite or webpack)
Requires Node.js and npm installed
Creates a proper project structure with a package.json
Supports modern JavaScript modules, JSX transformation at build time, code splitting, tree-shaking, and optimised production builds
The right choice for any real application you intend to deploy and maintain
More upfront setup, but dramatically more capable
The difference isn't really about React itself — it's about how React gets into your page and what surrounding infrastructure supports it. A react cdn setup skips all the infrastructure; a bundled npm setup builds it properly.
Can You Use React Hooks and Components With a CDN Setup?
Yes, you absolutely can. React hooks — useState, useEffect, useContext, and all the others — are part of the React library itself, which you've loaded via CDN. They work exactly the same way.
<script type="text/babel">
const { useState } = React;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);
</script>
Notice that with a react cdn setup, you access React's named exports directly from the global React object (e.g., const { useState } = React;), since there's no module system available. In a bundled npm project, you'd use import { useState } from 'react'; instead.
Components work exactly as they do in any other React setup. Functional components, JSX, props, state, effects — all of it is available.
Can You Build a Full Application Using Only React CDN?
Technically, yes. Practically, it gets painful quickly.
The moment your application grows beyond a single HTML file when you want to split components into separate files, share state between complex component trees, add routing, or manage dependencies — the react cdn approach becomes a bottleneck. Without a module system, you can't cleanly import and export components across files. Without a bundler, you can't optimise your code for production. Without a package manager, adding third-party libraries is manual and fragile.
The react cdn setup has a clearly defined ceiling. It's an excellent starting point for:
Learning React fundamentals without environment friction
Quick prototypes or throwaway experiments
Adding interactive components to an existing static HTML page
Demonstrating React in a presentation or code sandbox
But as soon as you're building something you intend to ship to users whether that's a headless commerce platform frontend, a subscription management system dashboard, or a 3PL management API integration you need a proper build setup.
Does React CDN Affect Performance?
This is a fair question, and the answer has a few layers.
Loading React from a CDN is often faster than serving it yourself, because major CDNs like unpkg and jsDelivr are globally distributed and highly optimised. Your users' browsers may even have the React CDN files cached from visiting other sites that use the same URLs.
Using Babel in the browser (as shown in the development example above) is genuinely slow and is the biggest performance liability of a naive react cdn setup. Browser-side Babel transforms JSX at runtime, which adds significant parse and compile time before your components render. This is fine for development and learning, but unacceptable in production.
The production react cdn approach uses pre-built, minified React files and pre-compiled JavaScript (no browser Babel). This performs fine, but you lose the optimisations a proper bundler brings code splitting, tree shaking, lazy loading which matter significantly in large applications.
For small pages with limited React usage, a production react cdn setup can be perfectly adequate. For anything larger, a bundled setup will outperform it.
Where to Find Official React CDN Links
The official React CDN links can be found in the React documentation at react.dev. As of React 18, the recommended CDN links via unpkg are:
Development (unminified, includes helpful warnings):
https://unpkg.com/react@18/umd/react.development.js
https://unpkg.com/react-dom@18/umd/react-dom.development.js
Production (minified and optimised):
https://unpkg.com/react@18/umd/react.production.min.js
https://unpkg.com/react-dom@18/umd/react-dom.production.min.js
Always pin to a specific version in production (e.g., react@18.2.0) rather than using a floating react@18 reference. Floating references mean your page could break silently if a new patch introduces unexpected changes.
When Should You Switch From React CDN to npm?
Here are the clear signals that it's time to leave the react js cdn setup behind and set up a proper project:
You're splitting your application into multiple component files
You need client-side routing (React Router)
You need a state management library (Zustand, Redux, Jotai)
You're planning to deploy the application to production users
Your page load time is becoming a concern
You want TypeScript support
You're working with a team and need version-controlled dependencies
At that point, tools like Vite (fast, modern, minimal configuration) or Next.js (full-stack React framework with server-side rendering) are the natural next steps. Both can get you from zero to a running development environment in under five minutes, and the upgrade in capability over a react cdn setup is enormous.
Frequently Asked Questions
What is a CDN and how does it work with React?
A CDN (Content Delivery Network) is a globally distributed network of servers that hosts static files. React CDN links host the React library on CDN servers, letting you include React in any HTML page with a simple <script> tag — no installation or build tools required.
What is the difference between using React via CDN and installing it via npm?
A React CDN setup loads React from a hosted URL and requires no local installation, but lacks module support, bundling, and production optimisations. Installing via npm sets up a full development environment with a bundler, module imports, code splitting, and build optimisation — necessary for any real-world application.
Can I build a full React application using only a CDN link?
For small, self-contained pages, yes. But once you need multiple component files, routing, state management, or production optimisations, the CDN approach becomes limiting. Most meaningful applications outgrow it quickly and need a proper npm-based setup.
Where can I find the official React CDN links for the latest version?
Official React CDN links are listed in the React documentation at react.dev. For React 18, they are served via unpkg.com at unpkg.com/react@18/umd/react.development.js and unpkg.com/react-dom@18/umd/react-dom.development.js.
Does using React via CDN affect performance compared to a bundled setup?
Loading React files from a CDN can be fast due to global distribution and browser caching. However, using Babel in the browser for JSX transformation is a significant performance liability in production. A bundled npm setup enables optimisations — tree shaking, code splitting, minification that CDN-based setups can't match at scale.
Can I use React hooks and components with a CDN setup?
Yes. All React hooks and component patterns work in a CDN setup. The main difference is how you access them via the global React object (e.g., const { useState } = React;) rather than ES module imports.
When should I switch from React CDN to a proper npm installation?
When you need to split code across multiple files, add routing or state management libraries, deploy to production users, work with a team, or optimise for performance. Tools like Vite and Next.js make the transition straightforward and significantly expand what you can build.