Pratima's Blog
Create Your First "Hello World" Program Using Pure React

Create Your First "Hello World" Program Using Pure React

Pratima Adhikari's photo
Pratima Adhikari
·

5 min read

Table of contents

Technology is evolving every day. It's impossible to keep up with every new technology in the market. One of the mistakes we do as a beginner in the programming world is that we want to learn everything quickly. In this process, sometimes we neglect the basics and fail to question ourselves about what and how of the background process for technology.

As a programmer, everyone's first program might be "Hello World" despite the language. One of the most loved and fast-growing frontend libraries is "React". Most of us when we started coding in React might have used the "npx create-react-app appName" command to set up our project. But most of us might have never tried to set up our project to use React from scratch, right?

In this article, I am going to demonstrate how we can create a simple "Hello World " program using pure React. To understand it better, I will create the same program in 3 different ways.

  1. Using HTML

  2. Using JavaScript

  3. Using React

The idea of the article is to understand the basics before jumping into the main course.

1) Using HTML

HTML (HyperText Markup Language) is the backbone of web development. It provides the structure and content for web pages. To create a Hello World program using HTML, follow these steps:

Step 1: Open a text editor and create a new HTML file with a .html extension.
Step 2: Inside the HTML file, add the following code:

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

2) Using JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <div id = "root"></div>
    <script>
     const heading = document.createElement("h1");
     heading.innerHTML = "Hello, World!";

    const root = document.getElementById("root");
    root.appendChild(heading);

    </script>
  </body>
</html>

Let's understand the code:

  1. <div id="root"></div>: This HTML element acts as a placeholder where our Hello World heading will be inserted and rendered in the browser.

  2. JavaScript code:

    • const heading = document.createElement("h1");: This line creates a new <h1> element using the document.createElement() method. It assigns the created element to the variable heading.

    • heading.innerHTML = "Hello, World!": This line sets the text content of the heading element to "Hello, World!".

    • const root = document.getElementById("root");: This line retrieves the HTML element with the id "root" using the document.getElementById() method. It assigns the element to the variable root.

    • root.appendChild(heading);: This line adds the heading element as a child of the root element. This means that the Hello World heading will be inserted inside the "root" element in the HTML document.

When you run this code, it dynamically creates an <h1> element with the text "Hello, World!" and appends it to the HTML element with the id "root". As a result, the Hello World heading will be displayed on the webpage when the code is executed.

This simple code demonstrates the basics of creating elements and manipulating the DOM (Document Object Model) using JavaScript to display a Hello World message on a web page.

Now, let's write the program to create "Hello World" using pure React.

3) Using Pure React

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="./index.css" />
    <title>React</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>
</body>
</html>

Here, we have used CDN links to bring React into our project. We will now be able to use React to create our program.

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="./index.css" />
    <title>React</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>
const heading = React.createElement("h1", { }, "Hello, World!");
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(heading);
</script>

</body>
</html>

Let's understand the code:

  1. const heading = React.createElement("h1", { }, "Hello, World!");: This line uses the React.createElement method to create a React element representing an <h1> heading with the text "Hello, World!". The first argument specifies the type of the element ("h1" in this case), and the second argument allows you to pass properties to the element (an empty object {} in this case), and the third argument provides the content of the element ("Hello, World!").

  2. const root = ReactDOM.createRoot(document.getElementById("root"));: This line uses the ReactDOM.createRoot method to create a root element that will be used to render our React component. It takes the HTML element with the id "root" using the document.getElementById("root") and assigns it to the root constant.

  3. root.render(heading);: This line renders the heading element using the render method of the root object. It specifies the React element (heading) that should be rendered inside the root element.

When this code is executed, it creates a React element representing a <h1> heading with the text "Hello, World!". It then renders this element inside the HTML element with the id "root" using the root.render() method. As a result, the Hello World heading will be displayed on the webpage when the code is executed.

This code showcases the basic usage of React's createElement and render methods to create and render React elements in a pure React environment.

Note: We need to understand that at the end of the day, React is also JavaScript under the hood.

Conclusion

In this blog post, we explored three different ways to create a Hello World program using HTML, pure JavaScript, and pure React. Each method provides a unique approach to achieve the same result. Whether you are starting with basic web development using HTML, diving into pure JavaScript for more control and flexibility, or exploring the power of React for building interactive user interfaces, the Hello World program serves as a fundamental step in your coding journey.

Thanks for Reading! 🙌
See you in the next blog! Until then, keep learning and sharing.

Let’s connect:

ReactWeb Development7daystreakHashnodeCommunityProgramming Blogs