Rohan Gope's blog

Developing a Custom React Library: A Comprehensive Exploration of React Fundamentals

Rohan Gope's photo
Rohan Gope
·

3 min read

Developing a Custom React Library: A Comprehensive Exploration of React Fundamentals

React, a transformative JavaScript library has revolutionized web development. A deep understanding of its functions is vital, empowering developers to innovate and enhance user experiences. Proficiency in React and its frameworks not only formalizes skills but also expands the horizons of web technology, shaping the future of digital interactions.

Implementing a Custom Render Function for Efficient DOM Element Injection

<!--index.html-->
<!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">
        <!-- The Element will be pushed here -->
    </div>
    <script src="./customreactelement.js"></script>
</body>
</html>

//customreactelement.js
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: 'div',
    props: {
        id: 'container',
        className: 'main-container',
        style: 'background-color: red; color: white;'
    },
    children: 'This is the Injected Element'
}

const dom = document.getElementById('root')

customRender(reactElement, dom)

The above code defines a customRender function that creates a DOM element based on a given React-like element object. It sets element attributes and appends them to the specified container. The reactElement object represents a <div> element with specific props and children. Finally, the script attempts to inject this element into an HTML container with the id root.

How does the above concept help to understand the basic injection of elements in React?

// The main.jsx in vite
import React from 'react'
import ReactDOM from 'react-dom/client'

import App from './App.jsx'

/*const reactElement = {
    type: 'div',
    props: {
        id: 'container',
        className: 'main-container',
        style: 'background-color: red; color: white;'
    },
    children: 'This is the Injected Element'
}*/

const check= "I am checking"
const reactElement = React.createElement(
    'div',
    {id: 'container',className: 'main-container', style: {backgroundColor: 'red', color: 'white', marginBottom : '4px'} },
    'This is the Injected React Element. ',
    check
)

const anotherElement = (
    <div id="container" className="main-container" style={{ backgroundColor: 'red', color: 'white' }}>
        This is the Injected Element</div>
)

ReactDOM.createRoot(document.getElementById('root')).render(
    <>
        {reactElement}
        {anotherElement}
    </> 
)

Here, the React.createElement is used to create a virtual DOM element representing a <div> with specific attributes and children. The first argument specifies the element type, the second is an object containing attributes like id, className, and style. The subsequent arguments are the element's children, including text and variables like check.

💡
Note: The check is injected at the last and it will considered children.

This virtual element is then rendered into the actual DOM using ReactDOM.createRoot().render(). Additionally, there's a JSX equivalent of the same element represented by anotherElement. Both elements share the same structure but showcase different ways to create React elements: using React.createElement the first one and JSX syntax for the second, demonstrating the flexibility and interchangeability of React's element creation methods.

💡
Note: The commented reactElement is not working because it's a custom object not defined in React Library. That is why it will not work.

For more information and a better understanding of the topic refer to this video by Hitesh sir :

https://youtu.be/kAOuj6o7Kxs?si=gazyGNQjlQpopyXp
React