Posted in React

Adding React via CDN — Hello World in HTML, JavaScript & React Explained

Estimated read time 5 min read

If you’re new to React and just want to understand the basics, you don’t need to install anything fancy like Webpack, Vite, or create-react-app. The easiest way to start is by using React CDN links in a plain HTML file. This approach helps you focus on understanding what React is actually doing, without the distractions of build tools.

In this post, I’ll show you how to write a basic Hello World example. We’ll start with plain HTML, move to JavaScript, and then finally write it in React. This way, you’ll clearly see how React changes the way we build UI.

Step 1: A Basic Hello World in HTML

Let’s start with the most basic thing: a simple HTML file that says Hello World.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World With Simple HTML</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

If you open this file in your browser, it will just display “Hello World!”. Nothing complex is going on here. It’s just pure HTML.

Step 2: Hello World with JavaScript

Now let’s take a small step forward. Instead of writing the <h1> directly in HTML, we’ll create it using JavaScript.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World With JavaScript</title>
  </head>
  <body>
    <div id="root"></div>

    <script>
      const rootElement = document.getElementById("root");
      const heading = document.createElement("h1");
      heading.textContent = "Hello World With JavaScript!";
      rootElement.appendChild(heading);
    </script>
  </body>
</html>

Here’s what’s happening:

  • We grab the div with the id of root.
  • We create an h1 tag using JavaScript.
  • We add text to it.
  • Finally, we insert it into the page.

This is essentially what React automates and makes easier, especially as your app grows.

Step 3: Hello World with React (Without JSX)

Now, let’s do the same thing using React. We’ll link React through a CDN, so no installation is required.

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const heading = React.createElement(
        "h1",
        { id: "heading" },
        "Hello World From React!"
      );

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(heading);
    </script>
  </body>
</html>

Here’s how this works:

  • React.createElement() creates a virtual DOM node.
  • We pass it the type (h1), any attributes (like id), and its content.
  • ReactDOM.createRoot() connects React to the #root div.
  • render() tells React what to show on the page.

Instead of manually creating DOM elements like we did with JavaScript, React handles it for us in a more organized way.

What is the crossorigin in the Script Tags?

You might have noticed the crossorigin attribute on the React script tags. It tells the browser that it’s okay to fetch these scripts from another domain (like unpkg.com). This helps the browser handle security properly and show clearer error messages when something goes wrong.

Creating Nested Elements with React

One thing React makes easier is creating nested elements or sibling elements. Here’s a quick example:

const parent = React.createElement(
  'div',
  { id: 'parent' },
  [
    React.createElement('div', { id: 'child1' }, [
      React.createElement('h1', {}, 'I am h1 tag!'),
      React.createElement('h2', {}, 'I am h2 tag!')
    ]),
    React.createElement('div', { id: 'child2' }, [
      React.createElement('h1', {}, 'I am h1 tag!'),
      React.createElement('h2', {}, 'I am h2 tag!')
    ])
  ]
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(parent);

The key thing to remember here is that if you want to create siblings, you pass them as an array inside React.createElement().

What Happens If HTML is Already Inside the Root Div?

Let’s say your #root div already has some content:

<div id="root">
  <h1>Hello World!</h1>
</div>

Then you run:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(parent);

React will replace everything inside #root. That’s how React works — it controls the whole root element and manages its content from there.

Where Should You Place Script Tags?

Both options are valid:

  • If you put scripts in the <head>, the browser loads them early.
  • If you put scripts at the end of the <body>, the HTML loads first. This is usually better for performance.

For small examples, it doesn’t matter much. For larger apps, loading scripts after the page is ideal.

React is a Library, Not a Framework

Some people confuse React with a framework like Angular. It’s not.

React is just a library for building UI. You call React when you need it.
A framework controls the structure of your app. React doesn’t do that. You pick your own router, state management, etc.

This is part of why developers like React — it gives you flexibility.

Wrapping Up

If you’re learning React, using a simple CDN setup is a great place to start. It helps you understand what React does without worrying about JSX, build tools, or configurations.

We went from HTML → JavaScript → React step-by-step. This shows how React builds on what you already know, but makes things cleaner and more scalable for bigger projects.

Once you’re comfortable, you can move on to writing JSX, learning about components, props, and hooks. But starting small like this helps you really understand the basics.

📽️ Watch Related Video:
👉 HTML, JavaScript & React Hello World Tutorial | React via CDN Explained for Beginners

🎯 Subscribe for more React tips & coding best practices!

Related