React Fundamental 1: Rendered Hello World

By Daniel Nguyen

Published in React JS

May 01, 2025

1 min read

Rendered Hello World

It doesn’t take long to learn how to make “Hello World” appear on the page with HTML:

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

The DOM is a programming interface for web documents. It represents the structure of an HTML (or XML) document as a tree of objects. In simpler terms, it’s how your browser sees the HTML content and allows JavaScript to manipulate it.

Imagine your webpage as a tree. Each HTML element (like <div>, <h1>, <p>, etc.) is a node or branch in that tree.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first DOM example.</p>
  </body>
</html>

The DOM turns that into something like this:

Document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p

JavaScript provides powerful methods to interact with the DOM:

const title = document.getElementById('main-title');
const element = document.createElement('div')
element.className = 'container'
element.textContent = 'Hello World'

⚙️ DOM vs Virtual DOM

If you’ve used React, you might have heard of the Virtual DOM. It’s a lightweight copy of the real DOM used to optimize performance. Instead of updating the real DOM directly, React updates the virtual one and then finds the most efficient way to apply those changes to the real DOM.

This minimizes costly operations and boosts performance — especially important in large, dynamic applications.