What are You Looking for?

React application with CDN URL

Creating a React application with CDN is an excellent strategy for developers who wish to take advantage of React’s powerful library without the need for complex setups. In this tutorial, you will learn how to quickly create a React application by linking to the React libraries through a CDN URL. We will cover all the essential steps with detailed explanations and provide tips for troubleshooting common issues.

React application with CDN

Table of Contents

 

Prerequisites

Before we start with the tutorial, make sure to have a basic understanding of HTML, JavaScript, and the core concepts of React such as components and state management.

Step-by-Step Instructions

  1. Create a simple HTML file. For example, you can name it index.html.
  2. Within the HTML file, link to the React, React DOM, and Babel CDN URLs in the <head> section.
  3. Define a root div with an id of “root” where our React app will be mounted.
  4. Add a script tag with the type attribute set to text/babel for JSX transformation at the bottom of the body tag.

Full Code Example

Here is the full code of a simple React application that displays “Hello World” using the React CDN:

<html>
    <head>
        <title>React App with CDN</title>
        <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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            function App() {
                return <h1>Hello World</h1>;
            }

            ReactDOM.render(<App />, document.getElementById('root'));
        </script>
    </body>
</html>

Comprehensive Code Explanation

In the code above, we have:

  • The <head> section comprising the CDN links which allow us to use React without having to install via npm or yarn.
  • Within the body, there’s a <div> with an id of “root”, serving as the mounting point for our React component.
  • A script of type text/babel enabling us to write JSX, which Babel will transpile into regular JavaScript at runtime.
  • The function App() represents our root React component and returns a simple piece of JSX that says “Hello World”.
  • Finally, ReactDOM.render() is called to render our App component inside the #root div.

Troubleshooting Tips

  • If your React component is not displaying, ensure that you have correctly linked the CDN URLs in the head section and that internet connectivity is stable.
  • Make sure the type attribute of your script tag containing JSX is set to text/babel; otherwise, the browser won’t correctly interpret the JSX.
  • Always check the browser console for any errors, as these will typically indicate what may be going wrong with your code.

Conclusive Summary

In summary, creating a React application via CDN is straightforward and an excellent way to harness the power of React in simple projects. Today, we covered setting up an HTML file, including the necessary React and Babel CDN links, and adding a simple React component. While CDNs offer convenience, for larger projects, it may be more effective to use a package manager like npm.

References

ByRavishanker Kusuma
Updated on