Nisham Mahsin's blog

Build your own Reactjs from scratch - Chapter 1

Nisham Mahsin's photo
Nisham Mahsin
·

2 min read

This is a React-like library to understand how React works internally

Welcome to my blog post series on creating a React-like library to understand how React works internally.

In this series, I’ll be sharing my experience of building a library that mimics the functionality of React and explaining how it works.

Understanding how React works internally can be challenging, especially for beginners.

That’s why I decided to create a React-like library from scratch to gain a better understanding of how React works under the hood.

In this series, I’ll be sharing my experience of building this library and explaining the concepts behind it.

All the codes are available in the following GitHub repository
https://github.com/nishammahsin/react-like-library/tree/chapter1

Chapter 1: ReactDom/createRoot
The code is a simple implementation of the createRoot function that takes a container as an argument and returns an object with a render method. The render method takes an element as an argument and sets the innerHTML of the container to a string that contains the element wrapped in a span tag.

const createRoot = function (container) {
    return {
      render: function (element) {
        container.innerHTML = '<span>' + element + '</span>';
      }
    };
};

export { createRoot }

Here’s what the code does step by step:

The createRootfunction takes a container as an argument.

The function returns an object with a single method called render.

The render method takes an element as an argument.

currently render method is very simple. it will only render the element as a string. The render function won’t be able to render JSX. However, this will be covered in the coming chapters.

Please note that this is not the final code and is just meant to be a starting point.

Usage

import { createRoot } from 'react-like-library/react-dom';
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const app = "<h1>Hello World</h1>";
root.render(app);

Please refer to unit Tests for the unit tests code of createRoot function.

currently, we have only a few test cases for createRoot function.

those are very simple test cases. we will add more test cases in the coming chapters as we add more features to the createRoot function.

Stay tuned for upcoming chapters.

Chapter 2 :Compile JSX to Plain Javscript

I am sure it will be a fun learning experience!

JavaScriptReactvanilla-js