Building Your Own Mini React Renderer in Vanilla JavaScript

Subhradeep BasuSubhradeep Basu
3 min read

Ever wondered what really happens when you write something like:

<a href="https://google.com" target="_blank">Click me</a>

How does React magically turn that into a real clickable link in your browser?

In this blog, we’re not just going to talk about it — we’ll build our own mini React renderer from scratch!
And along the way, we’ll also uncover how React internally handles JSX, virtual DOM, and even uses the Fiber algorithm for faster updates.

Get ready. You’re about to decode React's magic ✨!

🎯 What We’ll Build

We’ll create:

  • A reactElement (a plain JS object)

  • A customRender function (that builds real DOM from it)

  • A sneak peek at how real React does it with Fiber (in a simple way)

📦 Basic Setup (HTML + JS)

First, create a basic HTML file:

htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./customreact.js"></script>
</body>
</html>

This gives us a #root div where we'll inject our custom React elements.

🧩 Defining Our React Element

In customreact.js, let’s manually create an element the way React would behind the scenes:

const reactElement = {
  type: 'a',
  props: {
    href: 'https://google.com',
    target: '_blank'
  },
  children: 'Click me to visit Google'
};

This object describes what we want to render:
An <a> tag with some attributes and text inside it.

🛠️ Building the customRender Function

Now, let's bring it to life with our very own render function:

function customRender(reactElement, container) {
  // Create the DOM element
  const domElement = document.createElement(reactElement.type);

  // Set inner content
  domElement.innerHTML = reactElement.children;

  // Set all attributes (except 'children')
  for (const prop in reactElement.props) {
    if (prop === 'children') continue;
    domElement.setAttribute(prop, reactElement.props[prop]);
  }

  // Append the element to the container
  container.appendChild(domElement);
}

✅ Now render it:

const mainContainer = document.querySelector('#root');
customRender(reactElement, mainContainer);

Open the page — Boom! 🎉
You’ll see a clickable link:
Click me to visit Google

💡 Fun Fact: Components Are Just Functions!

When you write:

<MyApp />

You’re actually just calling a function behind the scenes!

Example:

function MyApp() {
  return {
    type: 'h1',
    props: {},
    children: 'Hello from MyApp!'
  };
}

// Internally: MyApp()

React treats components as simple functions that return reactElement-like objects.

👉 JSX is sugar. Underneath, it’s just JavaScript functions and objects!

🌳 How Real React Parses JSX (Fiber - Quick Dive)

Okay, so we built a simple version.
Now... how does React REALLY manage complex apps with hundreds of elements?

✨ Quick Breakdown:

  • JSX (<div>Hello</div>) is first compiled into JavaScript objects — this is called the Virtual DOM.

  • React builds a tree of these virtual objects.

  • Instead of updating everything blindly, React compares the Virtual DOM with the previous one using a smart diffing algorithm.

  • Only the parts that changed are updated in the real DOM — saving huge performance cost!

Updating the whole tree at once would block the UI — that’s where Fiber steps in.

✅ What Fiber Does:

  • Breaks the work into small units (fibers).

  • Allows React to pause, prioritize, and resume rendering tasks smartly.

  • Matches the new Virtual DOM with the current Real DOM efficiently using diffing — not full re-rendering!

  • Commits only the necessary changes — keeping apps buttery smooth even during heavy updates.

Each Fiber node points to:

  • Its child

  • Its sibling

  • Its parent (return)

🧠 Think of Fiber like a skilled project manager — deciding what to do first, what can wait, and only fixing what's broken — without rebuilding the whole house!

🧠 Why This Matters

Without Fiber and Virtual DOM diffing, even a small change would cause your entire webpage to re-render — leading to laggy, unresponsive apps.
Fiber is what lets React scale to thousands of components without breaking a sweat.

For a deeper dive, check out this video:

https://youtu.be/kAOuj6o7Kxs?si=aWd-RpTctdRlxqEI
1
Subscribe to my newsletter

Read articles from Subhradeep Basu directly inside your inbox. Subscribe to the newsletter, and don't miss out.

ReactWeb DevelopmentwebdevReact FiberJavaScriptrender

Written by

Subhradeep Basu
Subhradeep Basu