ReactJS - Using CDN

Let us learn how to use content delivery network to include React in a simple web page.

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 src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></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> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
   </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> 
      <meta charset="UTF-8" /> 
      <title>React based application</title> 
   </head>
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

Here, the application uses React.createElement and ReactDOM.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:5000 in the address bar and press enter. serve application will serve our webpage as shown below.

React Hello

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
Advertisements