Create React app with CDN





Hey guys in this article, you will learn about creating React app using CDN links with full coding example.

Read More:

Create a HTML file


Create index.html file and add the following content. This file contains the basic HTML boiler plate code.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Include the CDN Links


Inside the <head> section, include the CDN links for react, react-dom and babel.

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

You can find the CDN links on their official website.

Check the React CDN link

Check the Babel CDN link

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don’t support certain features natively, Babel will help you compile those features down to a supported version.

Create React component


  • React components are the building block of React application.
  • It is a javascript function that contains the HTML content and logic for the component
  • React component name should start with Capital letter. Eg: Employee, Customer, Navbar, Card etc..,
  • We use react component as as regular HTML tags Eg: <Employee>, <Customer>, <Navbar>, <Card> etc..,
<script type="text/babel">
    const MainContent = () => {
        return (
            <div>
                <p>Main content goes here...</p>
            </div>
        );
    }

    //render the component to the DOM
    ReactDOM.render(<MainContent />, document.getElementById('main-content'));
</script>

ReactDOM is from react-dom library, it call a method render(), which takes in 2 parameters, the name of the component which you want to render and the place you want to render the component.

Open the file in a Browser


Open the file index.html inside the browser and you will see the following content
14

That’s it for this post, if you like this post, please share this post with your friends and collogues and also share this on your social media profiles.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *