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 named index.html.
Step 2: Add React and ReactDOM via CDN Under the body section of your index.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 HTML File in a Browser Simply double-click the index.html file 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
source: medium