Jyothi Swaroop Makena's Blog

Your First "Hello World" Program Using React!

Create your first "Hello World" program in React using CDN links!

Jyothi Swaroop Makena's photo
Jyothi Swaroop Makena
·

4 min read

Your First "Hello World" Program Using React!

Table of contents

In this blog, we will see how to create our first "Hello World" program using React! And in case you're wondering, no we won't be using npx create-react-app and having all those extra boilerplate of files and folders. Instead, we will be using CDN links and adding them to our project! So, let's get started!!

(P.S. - I will be using VS Code as my editor because it's my personal favourite :) )

Our First React Project :)

  1. Create an index.html file in your folder. And then, hit !+Enter to create a basic HTML template. Next, create a div with an id="root" inside the body tag. (This is the convention that React follows. So I am sticking to it.) So, if you're following along, your code should look like this:
<!DOCTYPE html>
<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>
</body>
</html>
  1. Add CDN Links: Go to React official docs and grab the CDN links. (Do note that the link I have attached is of the legacy docs of React, but don't worry, the CDN links will work just fine :) ). So, what are these CDN links? So, CDN stands for Content Delivery Network. These links allow us to inject the code of the React library into our project and then use it according to our needs. Grab the two CDN links and then add them below the div with id="root". The two CDN links look like this:
<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>

3. What are these two CDN links anyway?

The first CDN link imports the React library code created by the good people at Facebook(thank you, developers at Facebook!) into your project. The second link imports the react-dom library into your project. This react-dom library gives react additional superpowers. It allows React to interact with the DOM and do DOM manipulations.

Couldn't both links be put into one and be served as one CDN link?

That's an excellent question! See, the thing is, React wasn't just created to interact with the browser. There are other uses of React, too, like React-native for creating mobile applications, React 3D, etc. So, the developers created the React core library, and then, based on the use case, additional code can be used to add to the already existing functionalities and powers of React.

4. Now, coming to the main event:

Below the CDN links, write the following lines of code, and then I'll explain what's going on -

<script>
    const h1 = React.createElement("h1", {}, "Hello World")
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(h1)
</script>

So, we have created a script tag (because, remember, at the end of the day, React is plain-old JavaScript), and then inside of it, we first create a h1 element. Important: React.createElement does not create an HTML element! It actually returns a javascript object.

Actually, if you console.log it, you can see that I'm not lying :)

So, the React.createElement returns an object, which has a property of type: "h1". It also has a props property, which is an object in itself. In it we can see the children property with the value "Hello World. "Ultimately, this is what we want in our HTML and rendered out onto the browser.

After creating the element, we have to render it into the root. In React, div with id="root" can be considered as the entry point to our application. Our entire application code is injected inside this root. So, before we render our code inside this div, we have to access it first. Now, this is something that React cannot do. So we use the ReactDOM library's createRoot() method.

const root = ReactDOM.createRoot(document.getElementById("root"))

So we are getting the div with the id="root" and then accessing it with the variable root. After that, we have to render our created h1 react element inside this div. We do that by the render() method.

root.render(h1)

This render method takes in the h1 object returned by the React.createElement() method, converts it into an HTML h1 tag, and then injects it into the "root" div.

So, if you have a look at your browser:

Conclusion

There you have it, folks! We have successfully created our first "Hello World" react application!

If you have found this blog post useful, do consider liking it! I will hopefully be posting more blogs, so you can also consider following me :)

See you next time, folks! Adios!

ReactHTML5