Building Your Own Version of React.js

November 29, 2024 (4mo ago)

The more I learn, the more I realize how much I don't know.

[— Albert Einstein]

When using React.js to build web applications, many processes happen behind the scenes: state updates when a button is clicked, data passed from parent to child components, and the use of hooks to simplify and speed up development. Many developers see React as just a tool and may not care about what’s happening under the hood. In this article, I’ll show you how to create your own version of React.js to understand its fundamental concepts and how it works.

In React.js, one of the most essential parts is how it renders and mounts the representation of the DOM (referred to as the Virtual DOM), which is stored in memory, onto the real DOM that exists in the browser. Another key aspect is how state updates trigger re-renders when the state changes. This reactivity is the reason for the name "React"—it refers to the DOM's ability to react to changes dynamically.

React.js is designed to be smart: it compares changes between the current Virtual DOM and the previous one to determine the minimal updates required. This process, known as diffing (diffing algorithm), ensures that only the necessary parts of the real DOM are updated, making re-renders efficient and seamless.

What We’re Building

We’ll create a simple functions that:

  • Provides a createElement function to define elements.
  • Uses a virtual DOM to represent elements.
  • Supports rendering to the real DOM.
  • Includes functional components for reusability.

Preparation

Before we make our own version of React we need to prepare a few things:

  • index.html (where we’ll mount our virtual DOM)
  • index.js or index.mjs (where we’ll write our code)
  • styles.css — optional. We’ll use this to style our simple app.

you can copy and paste the code below into your index.html file.

<!doctype html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>
 
  <body>
    <div id="root"></div>
    <!-- The container where we’ll render our app -->
    <script src="./index.mjs" type="module"></script>
  </body>
</html>

so the file structure should look like this:

app/
├── src/
│   └── index.html         # The HTML file
│   └── index.mjs          # The JavaScript file
│   └── style.css          # Optional
└── package.json

Let’s get started!

1. The createElement Function (virtual DOM)

As we discussed earlier, React uses a Virtual DOM to store the structure of the UI in memory before rendering it to the real DOM. Below is a function that implements this concept:

// index.mjs
 
/**
 * Creates a virtual DOM element.
 *
 * @param {string | function} type - The type of the element (e.g., 'div', 'h1', or a component function).
 * @param {object} props - An object containing element attributes (e.g., className, id, event handlers).
 * @param {...any} children - The child elements or text nodes.
 * @returns {object} - A virtual DOM object representing the element.
 */
function createElement(type, props, ...children) {
  return {
    type, // The type of element (e.g., 'div', 'span', or a custom component)
    props: {
      ...props, // Spread operator to copy all properties into the props object
      children: children.map(child =>
        // Convert each child to a virtual DOM element
        typeof child === 'object' ? child : createTextElement(child),
      ),
    },
  };
}
 
/**
 * Creates a virtual DOM element for text nodes.
 *
 * @param {string} text - The text content.
 * @returns {object} - A virtual DOM object representing a text node.
 */
function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT', // Special type to identify text nodes
    props: {
      nodeValue: text, // Store the text content as a property
      children: [], // Text nodes don’t have children
    },
  };
}

The createElement function generates a virtual DOM element. This is React’s core way to represent components in memory.

  • Purpose: createElement constructs a virtual DOM tree.
  • Text Nodes: Since text isn't an object, we handle it separately using createTextElement.

2. The render Function

Now that we understand how the createElement function works, let’s move on to the render function. The render function is responsible for converting the Virtual DOM into real DOM nodes and appending them to the browser's DOM. This is a crucial step in making the UI visible and interactive for the user.

// index.mjs
 
/**
 * Renders a virtual DOM element into the real DOM.
 *
 * @param {object} element - The virtual DOM object to render.
 * @param {HTMLElement} container - The real DOM node where the virtual DOM will be mounted.
 */
function render(element, container) {
  // Step 1: Create a real DOM node based on the element type.
  const dom =
    element.type === 'TEXT_ELEMENT'
      ? document.createTextNode(element.props.nodeValue) // Create a text node if the type is 'TEXT_ELEMENT'
      : document.createElement(element.type); // Otherwise, create an element node (e.g., 'div', 'h1')
 
  // Step 2: Assign properties to the real DOM node.
  for (const prop in element.props) {
    if (prop !== 'children') {
      if (prop.startsWith('on')) {
        const eventType = prop.toLowerCase().substring(2);
        dom.addEventListener(eventType, element.props[prop]);
      } else {
        // Skip the 'children' prop since it’s handled separately
        dom[prop] = element.props[prop]; // Assign attributes like 'className' or 'id' to the DOM node
      }
    }
  }
 
  // Step 3: Recursively render and append child elements.
  element.props.children.forEach(child => render(child, dom));
 
  // Step 4: Append the created DOM node to the container.
  container.appendChild(dom);
}
  • Functional Components: The render function checks if the type is a function and executes it.
  • Attributes and Events: Props like id or onClick are added to the real DOM nodes.
  • Recursion: The function is recursive, handling nested children automatically. see here.

3. Building the Virtual DOM Tree and Rendering to the Real DOM

We’ve successfully written a minimal version of the core functionality needed to create our version of React. Now, we can invoke the render function we just created and use it to inject our Virtual DOM into the real HTML DOM. Here’s an example:

// index.mjs
 
// Create a virtual DOM structure using the createElement function
const element = createElement(
  'div', // Type: The root element is a 'div'
  { id: 'app' }, // Props: Assign an 'id' of 'app' to the 'div'
 
  // First child: An 'h1' element
  createElement(
    'h1', // Type: 'h1' element
    { className: 'greeting', id: 'main-title' }, // Props: 'className' and 'id' for the 'h1'
    'Hello, World with Props!', // Text content for the 'h1'
  ),
 
  // Second child: A 'button' element
  createElement(
    'button', // Type: 'button' element
    { onClick: () => console.log('clicked') }, // Props: Add an 'onClick' event listener
    'My Button', // Text content for the button
  ),
);

This element represents our Virtual DOM tree, which is a JavaScript object describing the structure of our UI. Now, let’s invoke the render method to convert this Virtual DOM into real DOM elements and append them to the page:

// index.mjs
 
const container = document.getElementById('root');
render(element, container);

In this example:

  • The createElement function is used to construct the Virtual DOM tree.
  • The render function takes the Virtual DOM tree and translates it into actual DOM nodes that are attached to the container, which is the root element in the browser’s DOM.

This demonstrates the essential workflow of React: describing the UI with a Virtual DOM and rendering it efficiently to the real DOM.

4. Creating Components

One of the key benefits of using React is the ability to create reusable components. Components allow you to encapsulate UI elements and their behavior, making it easier to build and maintain complex user interfaces.

Here’s an example of a simple functional component:

// index.mjs
 
function Greeting(props) {
  return createElement(
    'h1',
    { className: 'greeting' },
    `Hello, ${props.name}!`,
  );
}
 
const element = createElement(
  'div',
  { id: 'app' },
  createElement(
    'h1',
    { className: 'greeting', id: 'main-title' },
    'Hello, World with Props!',
  ),
  createElement(
    'button',
    { onClick: () => console.log('clicked') },
    'My Button',
  ),
  // Render the Greeting component with the name prop set to 'World'
  createElement(Greeting, { name: 'World' }),
);

In this example:

  • The Greeting function is a React component.
  • It accepts props (short for properties), which are used to pass data into the component.
  • The component returns a Virtual DOM element created using our createElement function. It renders an element with the text Hello, [name]!, where [name] is replaced with the value of props.name.

Components like this demonstrate how React simplifies the creation of dynamic and reusable UI elements by separating them into manageable, self-contained units.

5. Reactivity

One of the most powerful aspects of React is its reactivity, which allows your application to update and re-render efficiently when the state or props change. Let’s explore how reactivity works in our custom React-like implementation. In the example above, we use the Greeting component to display a dynamic greeting message based on the name prop:

When Greeting is rendered, it takes the props.name value and generates the appropriate content for the Virtual DOM. The key idea is that when the props or state of a component changes, React detects this and efficiently re-renders only the parts of the DOM that are affected.

Although our custom implementation lacks a state system and a diffing algorithm like React’s reconciliation, this concept of reactivity can be extended. In a complete implementation, you would:

  • Track State Changes: Use a state management system to store values and trigger re-renders when state changes.
  • Reconciliation: Compare the new Virtual DOM tree with the previous one to determine which real DOM elements need updating.
  • Efficient Updates: Update only the affected DOM nodes instead of re-rendering the entire UI.

I’ll cover how reactivity works in React, including state management and the reconciliation process, in a future post. Stay tuned!

6. Completed Code

Below is the complete code. I’ve also attached a link to my CodeSandbox project, where you can see the interactive result of this article in action. Check it out here

// index.mjs
// full code: https://codesandbox.io/p/sandbox/nzv78y?file=%2Fsrc%2Findex.mjs%3A57%2C1
 
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child),
      ),
    },
  };
}
 
function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}
 
function render(element, container) {
  if (typeof element.type === 'function') {
    const componentElement = element.type(element.props);
    render(componentElement, container);
    return;
  }
 
  const dom =
    element.type === 'TEXT_ELEMENT'
      ? document.createTextNode(element.props.nodeValue)
      : document.createElement(element.type);
 
  for (const prop in element.props) {
    if (prop !== 'children') {
      if (prop.startsWith('on')) {
        const eventType = prop.toLowerCase().substring(2);
        dom.addEventListener(eventType, element.props[prop]);
      } else {
        dom[prop] = element.props[prop];
      }
    }
  }
 
  element.props.children.forEach(child => render(child, dom));
  container.appendChild(dom);
}
 
function Greeting(props) {
  return createElement(
    'h1',
    { className: 'greeting' },
    `Hello, ${props.name}!`,
  );
}
 
const element = createElement(
  'div',
  { id: 'app' },
  createElement(
    'h1',
    { className: 'greeting', id: 'main-title' },
    'Hello, World with Props!',
  ),
  createElement(
    'button',
    { onClick: () => console.log('clicked') },
    'My Button',
  ),
  createElement(Greeting, { name: 'World' }),
);
 
const container = document.getElementById('root');
render(element, container);

Feel free to experiment with the code and see how it works in real-time!

7. Conclusion

Using tools like React, Next.js, and Remix is great for building modern web applications, but it’s also essential to understand the fundamentals of what we’re doing. Blindly writing code without understanding how it works under the hood might make you a "framework user", but not necessarily a real coder. Strive to go deeper and learn the core concepts—it’ll make you a better developer.

Disclaimer

  • This article is not an exact representation of how React’s codebase works. It’s a simplified abstraction to help you understand the basic concepts of how React operates under the hood.
  • Some links provided may refer to legacy documentation, but you can find the latest React docs here.
  • I used ChatGPT as a research assistant while writing this article. Embracing AI is an important part of staying ahead as a developer today.
LinkedIn
X