React Fundamental: Hello World in JavaScript

By Daniel Nguyen

Published in React JS

May 02, 2025

2 min read

React Fundamental: Hello World in JavaScript

🌐 Hello World in JavaScript — A Gentle Introduction to DOM Manipulation

Learning how to display “Hello World” on a webpage is a rite of passage for every web developer. But beyond this classic message lies a deeper understanding of how browsers work, how JavaScript interacts with the page, and how modern frameworks like React evolved. Let’s take a journey through the fundamentals together!

🧱 Step 1: Rendering “Hello World” with HTML

Before JavaScript, HTML was the only way to tell a browser what to render.

<html>
  <body>
    <div>Hello World</div>
  </body>
</html>

When you open this file in a browser, it displays “Hello World” inside a <div>. The browser parses this HTML and builds something called the DOM (Document Object Model), which is a tree-like structure representing the page.

🔗 Learn more about the DOM

⚙️ Step 2: Adding Interactivity with JavaScript

Let’s go a step further and use JavaScript to manipulate that DOM:

<html>
  <body>
    <div>Hello World</div>

    <script type="module">
      // Your JavaScript here
    </script>
  </body>
</html>

This is where things get interesting. JavaScript allows us to modify, add, and remove elements on the page. It’s how we turn a static page into a dynamic application.

🏗️ Step 3: Creating the DOM Dynamically with JavaScript

Instead of writing the HTML directly, we can use JavaScript to generate it programmatically:

<html>
  <body>
    <script type="module">
      const element = document.createElement('div')
      element.textContent = 'Hello World'
      document.body.append(element)
    </script>
  </body>
</html>

Now the entire content is built using JavaScript. This technique is useful when building dynamic interfaces — but it also shifts some of the rendering workload to the browser.

🧪 Let’s Practice: No React Just Yet!

Before diving into React, it’s crucial to understand how JavaScript creates and manipulates DOM nodes — because React does this under the hood for you.

🔨 Exercise: Create a div with the text "Hello World" using pure JavaScript and add it to the page.

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

        <script type="module">
            // TO-DO
        </script>
    </body>
</html>

Open this file in a browser and use DevTools to inspect the DOM. You’ll see your JavaScript-created div right there in the structure!

🧼 Bonus Challenge: Generate Everything with JavaScript

Usually, tutorials include an empty HTML element like <div id="root"></div> for JavaScript to hook into. But what if we skipped that and created even the root node ourselves?

Try this:

<html>
  <body>
    <script type="module">
        // TO-DO
    </script>
  </body>
</html>

Now your page is entirely built using JavaScript — including the “root” element that frameworks like React usually expect to exist.

🧠 Key Takeaways

HTML is used to define the page structure.
JavaScript can dynamically generate and manipulate the DOM.
React and other frameworks abstract this process, but it’s built on top of the same principles.
Understanding these fundamentals will help you write better code and debug more effectively.

🚀 What’s Next?

You’re now ready to go deeper into how frameworks like React work behind the scenes. In upcoming lessons or projects, you’ll see how React handles DOM updates more efficiently, using a virtual DOM.

If you’re curious to apply this in a full-stack environment, tools like Remix let you combine server-rendered HTML and client-side interactivity using the same codebase.

By mastering the basics, you’re laying a strong foundation for becoming a confident web developer. Let’s continue leveling up — one line of code at a time! 💪

React Fundamental: Hello World in JavaScript

🧱 Step 1: Rendering “Hello World” with HTML

⚙️ Step 2: Adding Interactivity with JavaScript

🏗️ Step 3: Creating the DOM Dynamically with JavaScript

🧪 Let’s Practice: No React Just Yet!

🧼 Bonus Challenge: Generate Everything with JavaScript

🧠 Key Takeaways

🚀 What’s Next?

Tags

Share

Table Of Contents

Related Posts

React Fundamental: Hello World in JavaScript

.css-1qh5hbx{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.5rem;position:relative;}🧱 Step 1: Rendering “Hello World” with HTML

⚙️ Step 2: Adding Interactivity with JavaScript

🏗️ Step 3: Creating the DOM Dynamically with JavaScript

🧪 Let’s Practice: No React Just Yet!

🧼 Bonus Challenge: Generate Everything with JavaScript

🧠 Key Takeaways

🚀 What’s Next?

Tags

Share

Table Of Contents

Related Posts

🧱 Step 1: Rendering “Hello World” with HTML