How I Built a Mini-React from Scratch (And How You Can Too)

If you’ve ever worked with React, you already know how magical it feels.

You write a simple JSX component…
 …and React takes care of creating elements, updating the DOM, and making everything smooth.

But have you ever wondered:

What is React actually doing behind the scenes?
How does JSX turn into real HTML?
Can we build something like React on our own?

The answer is YES — and in this story, I’ll walk you through how I built a tiny, very tiny version of React using plain JavaScript.

It’s so small you can read the entire implementation in less than a minute.
And by the end, you’ll understand the core idea behind React better than 90% of beginners.

⭐ Why Build React Yourself?

React may look complicated, but its foundation is simple:

• Take a tag (h1),
• Add some styles,
• Add some children (like text or other elements),
• And render it into the page.

That’s it.
Everything else (hooks, diffing, JSX) comes later.
But the soul of React is creating elements and rendering them.

So let’s build exactly that.

🧩 Step 1 — Our Mini-React Object

We start by creating an object called React with one method:

const React = {
  createElement: function (tag, styles, children) {
    const element = document.createElement(tag);
    if (typeof children === 'object') {
      for (let val of children) {
        element.append(val);
      }
    }
    else {
      element.innerText = children;
    }
    for (let key in styles) {
      element.style[key] = styles[key];
    }
    return element;
  }
}

Let’s break it down in simple words.

🧠 Step 2 — How createElement() Works

React’s real createElement takes JSX and turns it into objects.
Our version will create real DOM elements directly.

✔ 1. Creating an HTML tag

const element = document.createElement(tag);

If you pass 'h1', it creates:

<h1></h1>

Simple.

✔ 2. Handling children

Children can be:

• a single string ("Hello"), or
• an array of elements ([li1, li2, li3])

So we check:

if (typeof children === 'object') {
  for (let val of children) {
    element.append(val);
  }
}
else {
  element.innerText = children;
}

If it’s an array → append all children
If it’s text → just add it inside the tag

✔ 3. Adding styles

for (let key in styles) {
  element.style[key] = styles[key];
}

This turns:

{ color: "white", backgroundColor: "blue" }

into:

color: white;
background-color: blue;

🎉 Finally, we return the fully created element.

This is basically what React does — create elements.
Just… a million times more advanced.

🏗 Step 3 — Our ReactDOM.render() Function

Real React uses ReactDOM.render to put elements into the page.

Here’s our version:

const ReactDOM = {
  render: function (element, root) {
    root.append(element);
  }
}

We simply take the element and append it into the root.

React does:

• diffing
• reconciliation
• virtual DOM

…but we just append things.
And that’s perfectly fine for now.

🏷 Step 4 — Creating Elements Using Our Mini React

Let’s create two headers:

const header1 = React.createElement(
  'h1',
  { fontSize: "30px", backgroundColor: "blue", color: "white" },
  "Hello Coder Army"
);

const header2 = React.createElement(
  'h2',
  { fontSize: "20px", backgroundColor: "black", color: "white" },
  "How are you?"
);

We pass:

1. tag name
2. styles
3. text child

📦 Step 5 — Rendering the Elements

const root = document.getElementById('root');

ReactDOM.render(header1, root);
ReactDOM.render(header2, root);

This will show both headings on your webpage.

📋 Step 6 — Building a List (Nested Elements)

To show children as arrays, we create list items:

const li1 = React.createElement('li', {}, "HTML");
const li2 = React.createElement('li', {}, "CSS");
const li3 = React.createElement('li', {}, "JavaScript");

Then a parent <ul>:

const Ul = React.createElement(
  'ul',
  { fontSize: "30px", backgroundColor: "blue", color: "white" },
  [li1, li2, li3]
);

Because we pass an array → it appends all list items inside the <ul>.

Then we render:

ReactDOM.render(Ul, root);

Boom.
A styled list created using your own React.

🎯 And That’s It — You Just Built React (A Tiny Version)

Here’s what your version of React can do:

✔ Create elements
✔ Add styles
✔ Add children
✔ Handle arrays of children
✔ Render into the DOM
✔ Re-create the basic idea behind React

And the best part?

You now understand what actually happens underneath JSX.