Creating own react library

In today's learning session, I explored the creation of a custom React library. It helped me dive deeper into React's structure and strengthened my understanding of how components work together.

Setting Up My React Library

I began my journey by creating a folder named custom-react, which would house all the components and files for my library.

Inside this folder, I created a new file called index.html to serve as the entry point for my application.
In the index.html file, I included an <div> with an id of root, which will be where my React components will render.
I also added a <script> tag with the source set to custom-react.js, where I will be writing the JavaScript for my library.

Inside “customreact.js”

function customRender(reactElement, container){
    const domElement = document.createElement(reactElement.type)
    domElement.innerHTML = reactElement.children
    domElement.setAttribute('href',reactElement.props.href)
    domElement.setAttribute('target', reactElement.props.target)

    container.appendChild(domElement)


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

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

Function definition for custom rendering

function customRender(reactElement, container){ }
What are we injecting? -> reactElement
This is the React component or element that we want to render.
Where are we injecting it? -> mainContainer
This is the DOM element (usually a div) where the reactElement will be injected.

Inside the Function

First, an empty DOM element is created, acting as a container for the React element. To populate it, we inject content using the following code:
domElement.innerHTML = reactElement.children
This step ensures the element now has its children properly added.

Next, we set up the attributes for this element.
domElement.setAttribute('href',reactElement.props.href)
Here, href is the attribute, and its value is pulled from reactElement.props.href.
We follow the same process for other attributes.

Finally, we inject everything into the newly created domElement, completing the setup.

And that's it—our element is fully created and configured!

Creating a More Modular Structure

To improve efficiency and keep the code clean, I introduced a loop to handle setting attributes dynamically, instead of manually assigning each attribute one by one. This approach makes the code more modular and scalable, especially when dealing with multiple attributes. By looping through the reactElement.props object, we can easily apply each attribute to the DOM element without repeating code.

function customRender(reactElement, container){
    const domElement = document.createElement(reactElement.type);
    domElement.innerHTML = reactElement.children
    for (const prop in reactElement.props) {
        if(prop === 'children') continue
        domElement.setAttribute(prop, reactElement.props[prop])

        }
    container.appendChild(domElement)
}
const reactElement = {
    type: 'a',
    props: {
        href: 'https://google.com',
        target: '_blank'
    },
    children: 'Click me to visit google'
}

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

This was the custom React library that helped me truly understand how React operates. Through this process, I learned that React works in a similar way, continuously creating elements and constructing an element tree (virtual DOM), where components form a dynamic graph of elements, ultimately rendering the UI efficiently.