React - Using CDN

Quiz

Let us learn how to use content delivery network to include React in a simple web page. Starting from React 19 encourages usage of CDN which supports ES Modules directly. esm.sh is one such CDN. Such CDN allows to use import/export statements in javascript.

<script type="module">
    import React from 'https://esm.sh/react';
    import ReactDOM from 'https://esm.sh/react-dom/client';
</script>

Open a terminal and go to your workspace.

cd /go/to/your/workspace

Next, create a folder, static_site and change directory to newly created folder.

mkdir static_site 
cd static_site

Next, create a new HTML file, hello.html.

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Simple React app</title> 
   </head> 
   <body> 
   </body> 
</html>

Next, include React library.

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Simple React app</title> 
   </head> 
   <body>
   <script type="module">
      import React from 'https://esm.sh/react';
      import ReactDOM from 'https://esm.sh/react-dom/client';
   </script>
   </body> 
</html>

Here,

We are using unpkg CDN. unpkg is an open source, global content delivery network supporting npm packages.
@17represent the version of the React library
This is the development version of the React library with debugging option. To deploy the application in the production environment, use below scripts.

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

Now, we are ready to use React library in our webpage.

Next, introduce a div tag with id react-app.

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React based application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
   </body> 
</html>

The react-app is a placeholder container and React will work inside the container. We can use any name for the placeholder container relevant to our application.

Next, create a script section at the end of the document and use React feature to create an element.

<!DOCTYPE html>
<html>
<head>
<title>React based application</title>
</head>
<body>
   <div id="react-app"></div>
   <script type="module">
      import React from 'https://esm.sh/react';
      import ReactDOM from 'https://esm.sh/react-dom/client';

      function App() {
         return React.createElement('h1', null, 'Hello React!');
      }

      const root = ReactDOM.createRoot(document.getElementById('react-app'));
      root.render(React.createElement(App));
   </script>
</body>
</html>

Here, the application uses React.createElement and createRoot.render methods provided by React Library to dynamically create a HTML element and place it inside the react-app section.

Next, serve the application using serve web server.

serve ./hello.html

Next, open the browser and enter http://localhost:3000 in the address bar and press enter. serve application will serve our webpage as shown below.

We can use the same steps to use React in the existing website as well. This method is very easy to use and consume React library. It can be used to do simple to moderate feature in a website. It can be used in new as well as existing application along with other libraries. This method is suitable for static website with few dynamic section like contact form, simple payment option, etc., To create advanced single page application (SPA), we need to use React tools. Let us learn how to create a SPA using React tools in upcoming chapter.

reactjs_creating_application.htm

Print Page