React App with CDN

if you want to create a simple React application using a Content Delivery Network (CDN), you can do so without the need for build tools or a development environment. This approach is useful for quick prototyping or for small projects where a complex build setup is unnecessary.

Table of Contents

React Js CDN

CDN, known as Content Delivery Network is a way to use the React library and its dependencies in a web application.

React CDN loads from a remote server instead of keeping the library files on your own server.

It has many advantages, such as quick setup & development of single-page applications. You can quickly start to develop a React App without downloading and managing the library locally.

React Js CDN Links

To use React CDN, you can include it within the src attribute of <script> in your HTML file.

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

You must add crossorigin attributes to the <script> tags. So that It can protect your web page from cross-site scripting attacks.

When using React.js via CDN

Using React.js via a CDN can be useful in various specific cases. But here are the most important cases that are necessary to know.

Quick Development – You can use CDN to include React and ReactDOM scripts in your HTML file and begin writing React components without setting up a development environment.

Simple Websites – You can use CDN to create simple static websites or landing pages that require just a small piece of interactive functionality using React.

Non-Technical Users – When you are discussing with non-technical team members who need to review a React component quickly then a CDN is the best choice to share a live, functional demo without requiring them to install anything.

Existing Website – If you need to add some small components or features to the existing website then you should use React CDN.

How to use React.js with a CDN

1. Create a New Folder

First of all, create a folder with the name ‘codingstatus‘ anywhere in your system

2. Create a new HTMl file

Now create a new file index.html inside the folder codingstatus

3. Write a Basic HTML Code

Now, write a basic HTML code in the index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App with CDN</title>
</head>
<body>
 
</body>
</html>

2. Create a Root Element

Create an <div> element with an id attribute of “root.” inside the HTML body,

<div id="root"></div>

3. Add React Js CDN

Include the React and ReactDOM scripts from the CDN in the <script> tags within your HTML file. These scripts are responsible for rendering and managing React components.

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

3. Write Your React Code

In the <script> tag below the React and ReactDOM script includes, you can write your custom React code. Define components, create JSX elements, and render them into the “root” element you defined earlier.

<script>
    // Define a React component
    function MyComponent() {
        return <h1>Hello, React!</h1>;
    }

    // Render the component into the "root" element
    ReactDOM.render(<MyComponent />, document.getElementById('root'));
</script>

4. Open in a Web Browser

Save the HTML file and open it in a web browser. You should see your React application rendering inside the “root” element.