https://www.youtube.com/watch?v=TkHH-IHsEKQ

Creating Your Own React Implementation

In this lecture, we try to understand what React really is by building the most fundamental part of it ourselves. The goal is to learn React from first principles instead of treating it like magic. By the end, you will clearly understand that React is nothing more than an object with helper methods that create and update UI elements.

Create The index.html file

<!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>
    <script type="module" src="app.js"></script>
</body>
</html>

Creating an Element Using Pure JavaScript

const elem1 = document.createElement('h1');
elem1.innerText = "I am trying to create my custom react";
elem1.className = "iamheader";
elem1.style.backgroundColor = "pink";
elem1.style.color = "green";

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

This works perfectly.

image.png

But if your UI grows to 10, 20, or 100 elements, manually repeating document.createElement() becomes painful and repetitive.

So the first idea is to wrap this into a reusable helper function.

Building a Reusable createElement() Function

function createElement(tag, attributes, children) {
  const element = document.createElement(tag);
  element.innerText = children;

  for (let key in attributes) {
    element[key] = attributes[key];
  }
  return element;
}