DEV Community

Cover image for 🚀 Day 1 of Learning React: Why React Exists, the Real DOM, Virtual DOM & React Elements
Bismay.exe
Bismay.exe

Posted on

🚀 Day 1 of Learning React: Why React Exists, the Real DOM, Virtual DOM & React Elements

#react #javascript #webdev #beginners

Today marks Day 1 of my React journey.

I've decided to document everything I learn—not because I'm an expert, but because I believe sharing the learning process can help other beginners while also helping me understand concepts better.

Today's goal wasn't to build an app.

It was to answer one simple question:

Why was React created in the first place? 🤔

Let's dive in.

💡 Why Was React Created?

Before React existed, developers built interactive websites by directly manipulating the browser's DOM using JavaScript or jQuery.

For example:

const heading = document.querySelector("h1");
heading.textContent = "Hello World";
Enter fullscreen mode Exit fullscreen mode

This works perfectly for small applications.

But imagine building something like Facebook.

  • 📰 News Feed
  • 💬 Messages
  • ❤️ Likes
  • 🔔 Notifications
  • 💭 Comments
  • 👥 Friends List

Each part of the page can update independently.

As applications grow larger, manually deciding:

  • Which DOM node should update
  • When it should update
  • What else depends on it

becomes increasingly difficult.

That's where React changed everything.

Instead of manually updating the UI, React introduced a much simpler idea:

UI = Function(State)

You describe what the UI should look like, and React figures out how to efficiently update the browser.

I think that's a really elegant way to think about building user interfaces.

🌳 What Is the Real DOM?

When the browser reads your HTML, it creates a tree-like structure called the Document Object Model (DOM).

For example:

<body>
  <main>
    <h1>Hello</h1>
  </main>
</body>
Enter fullscreen mode Exit fullscreen mode

The browser sees something like this:

Document
└── body
    └── main
        └── h1
            └── Hello
Enter fullscreen mode Exit fullscreen mode

This is called the Real DOM because it's managed directly by the browser.

Whenever something changes, the browser may need to:

  • 📐 Recalculate layouts
  • 🎨 Repaint elements
  • 🖥️ Update the screen

These operations become expensive in large applications.

⚛️ What Is a React Element?

One thing that surprised me today was learning that React doesn't immediately create HTML elements.

When we write:

const element = React.createElement(
  "h1",
  {},
  "Hello React"
);
Enter fullscreen mode Exit fullscreen mode

React actually creates a plain JavaScript object like this:

{
  type: "h1",
  props: {
    children: "Hello React"
  }
}
Enter fullscreen mode Exit fullscreen mode

This object is called a React Element.

A React Element is simply a description of what the UI should look like.

It isn't a real DOM node.

That small distinction helped me understand React much better.

🧠 What Is the Virtual DOM?

The Virtual DOM is another concept I finally understood today.

It's basically a JavaScript representation of the UI that lives entirely in memory.

For example:

<div>
  <h1>Hello</h1>
  <p>World</p>
</div>
Enter fullscreen mode Exit fullscreen mode

React internally represents it as something similar to:

{
  type: "div",
  children: [
    {
      type: "h1",
      children: ["Hello"]
    },
    {
      type: "p",
      children: ["World"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

The important thing I learned is:

The Virtual DOM doesn't exist inside the browser. It only exists in JavaScript memory.

React compares changes in this virtual representation and updates only the parts of the Real DOM that actually changed.

That's one of the reasons React applications stay efficient.

🎯 What Happens During the First Render?

When React renders an application for the first time:

const root = ReactDOM.createRoot(
  document.querySelector("main")
);

root.render(
  React.createElement(
    "h1",
    {},
    "Hello React"
  )
);
Enter fullscreen mode Exit fullscreen mode

The process looks something like this:

React Element
      ↓
Virtual DOM
      ↓
Real DOM
      ↓
Browser Screen
Enter fullscreen mode Exit fullscreen mode

React creates the necessary DOM nodes and finally displays them in the browser.

✨ My Biggest Takeaway Today

Today's lesson completely changed how I thought about React.

Before today I assumed React was simply another JavaScript library.

Now I realize it's actually a different way of thinking about building user interfaces.

Instead of telling the browser how to update every single element...

React lets us describe what we want the UI to look like.

That shift in mindset is what makes React so powerful.

📚 What I'm Learning Next

Today's lesson covered:

  • ✅ Why React?
  • ✅ Problems React Solves
  • ✅ History of React
  • ✅ SPA vs MPA
  • ✅ React Elements
  • ✅ ReactDOM
  • ✅ Virtual DOM

Tomorrow I'll continue with:

  • 🔄 Reconciliation
  • ⚡ Diffing Algorithm
  • 🎨 Render Phase
  • ✅ Commit Phase
  • 🧵 React Fiber Architecture

I'll continue documenting everything I learn as I go. 🚀

📖 Learning Source

I'm currently learning React through the React course by Devendra Dhote at Sheriyans Coding School. These posts are my own notes and understanding of each day's lessons, written in my own words as I continue learning.

If I misunderstand any concept, feel free to correct me in the comments—I'm here to learn. 😊

🙌 Final Thoughts

This is only Day 1, but I'm already enjoying the journey.

I'm sure there will be confusing concepts, bugs, and plenty of mistakes along the way—but that's part of learning.

If you're also starting React from scratch, let's learn together.

See you in Day 2! 🚀

💬 What was the hardest React concept for you when you started?

I'd love to hear your experience in the comments. 😊

If you're also learning React, consider following along—I'll be sharing what I learn every day. You can also find me on GitHub, where I'll be sharing my projects and documenting my progress.

Thanks for reading! 🚀

Top comments (0)