How to use CDN Links In ReactJS
To use React with a CDN, include two script tags in your HTML, one for React and another for ReactDOM. React serves as the core library for creating components and elements, while ReactDOM handles rendering React elements to the DOM. Utilize these script tags to fetch the latest React and ReactDOM versions from unpkg, a CDN service hosting npm packages.
When using the React CDN method, you can include the React library by adding the following script tags to the <head> or <body> section:
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/reactdom@18/umd/react-dom.development.js"></script>
Steps to Setup the React App Using CDN:
Step 1: To quickly add React to a webpage, you can include it directly in your HTML file using script tags, like this, make sure to replace your version number with the current version of the react app.
Step 2: Add a ‘div’ element to your body to where your react app will be rendered.
Step 3: Create a script section at the end of the body or in the head of your HTML file to write your React code.
Example: Below is the example of react app using the CDN links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>React CDN Example</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN Script Tags -->
<script crossorigin src=
"https://unpkg.com/react@18/umd/react.development.js">
</script>
<script crossorigin src=
"https://unpkg.com/react-dom@18/umd/react-dom.development.js">
</script>
<!-- Your React App Script -->
<script>
// Define a simple React component
function MyComponent() {
return React.createElement(
'h1', {
style: {
color: 'green',
textAlign: 'center'
}
},
'Hello, Gfg!'
);
}
// Render the component to the root element
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('root'));
</script>
</body>
</html>
Output:
React App using CDN
What is React?
React JS is a free library for making websites look and feel cool. It’s like a special helper for JavaScript. People from Facebook and other communities work together to keep it awesome and up-to-date.
React is Developed by Facebook, React is a powerful JavaScript library used for building user interfaces, particularly for single-page applications. It allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. In this article, we will see what React is, exploring its history, core concepts, advantages, and practical uses.
Contact Us