Write React code with CDN in HTML! 🌐

#webdev #javascript #react #tutorial

This is a Popular Interview Question

React is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can render data and handle events. However, sometimes you may want to write some basic react code without installing any libraries or using create-react-app, which is a tool that sets up a modern web app by running one command. In this article, we will show you how to do that using CDN script files.

CDN stands for Content Delivery Network, which is a system of servers that deliver web content to users based on their geographic location. CDN script files are files that are hosted on a CDN server and can be accessed by adding a script tag to your HTML file. By using CDN script files, you can use React without downloading or installing anything on your local machine.

Checkout various Libraries at cdnjs
and UNPKG

Import React with CDN
To use React with CDN, you need to add two script tags to your HTML file: one for React and one for ReactDOM. React is the core library that provides the functionality for creating components and elements. ReactDOM is the library that provides the functionality for rendering React elements to the DOM. You can use the following script tags to load the latest versions of React and ReactDOM from unpkg, which is a CDN service that hosts npm packages:

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

So to render some Text on the screen with JS or React, we need to have an existing element in the DOM. So just create an empty div with id="root"

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

Now that we have loaded React and ReactDOM, we can write some basic react code in your HTML file. For example, we can create a simple component that renders an <h1> tag with some text:

<script type="text/babel">
  // Define a component called Greetings
  function Greetings() {
    return <h1>Hello readers, Thankyou for reading this blog !</h1>;
  }

  // Render the component to the DOM
  ReactDOM.render(
    <Greetings />,
    document.getElementById("root")
  );
</script>

we use type="text/babel" for the script tag, which tells the browser to treat the code as JSX, which is a syntax extension for JavaScript that allows you to write HTML-like code in React. JSX is not supported by most browsers, so we need to use a tool called Babel to transform it into plain JavaScript. Babel is also available as a CDN script file, which you can add to your HTML file before the react code

This will load Babel from a CDN:

<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>

Now you have everything you need to write basic react code without installing libraries or using create-react-app. You can save your HTML file and open it in your browser to see the result. You should see something like this:

Complete Code

<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>

    <script type="text/babel">
  // Define a component called Greetings
  function Greetings() {
    return <h1>Hello readers, Thankyou for reading this blog !</h1>;
  }

  // Render the component to the DOM
  ReactDOM.render(
    <Greetings />,
    document.getElementById("root")
  );
</script>

  </body>

</html>

Congratulations! You have successfully written your first basic react code using CDN script files. You can use this method to experiment with React and learn its basics.