Using standard Ajax and JQuery CDN for building simple website? ahh..it's so common, how about using CDN for React.js? That sounds interesting, doesn't it?
Using React via a CDN (Content Delivery Network) is a simple way to get started without setting up a full project with tools like Webpack or Vite (especially when you need to build simple and fast landing page). Here’s a prerequisite and a step-by-step guide to using React with a CDN.
Prerequisites
- Basic knowledge of HTML, JavaScript, and React.
- A text editor (e.g., VS Code, Sublime, Notepad++).
- A modern web browser (Chrome, Firefox, Edge).
- An internet connection (since CDNs load resources from the web).
Step-by-Step Guide to Using React via CDN
Step 1: Create an HTML File.
Open your text editor and create a file namedindex.html.Step 2: Add React and ReactDOM via CDN Under the
<body>section of yourindex.html, add the React and ReactDOM libraries.
!-- React and ReactDOM from CDN -->
<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 use JSX in the browser) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
- Step 3: Adding Components
You can define multiple React components inside the
<script type="text/babel">tag under those React script tags we have defined previously.
<script type="text/babel">
function Header() {
return <h2>Welcome to My React App</h2>;
}
function App() {
return (
<div>
<Header />
<p>Welcome fellas..</p>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
This is the full version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React with CDN</title>
</head>
<body>
<div id="root"></div>
</body>
<!-- React and ReactDOM from CDN -->
<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 use JSX in the browser) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your React Code -->
<script type="text/babel">
function Header() {
return <h2>Welcome to My React App</h2>;
}
function App() {
return (
<div>
<Header />
<p>Welcome fellas..</p>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
</html>
- Step 4: Open the
HTMLFile in a Browser Simply double-click theindex.htmlfile or open it in a browser and voila! you will see Hello, React with CDN! displayed on the page
So this is the end? I don't think so 🤔
What's next?
You can build anything with this React CDN (filtering, scroll-to-top, blurry effect, etc). Just need to relax and get inspirations 🧘
Curious what else you can build with this React CDN? Check example of my Portfolio page. This page was built using React CDN ☕.
Feel the power of React CDN for you. Happy coding :)
Source: React Documentation
Top comments (0)