Creating a Custom React Element Without React.js: A Deep Dive into the Basics

Learned from: [react.js by Hitesh Choudhary youtube]

As I delved into React.js, I wanted to understand the core of how React elements work by creating a custom React-like element without using React itself. This experiment helped me grasp the fundamentals before diving into the full-fledged library.

Building the Foundation: A Simple Container and Render Method

First, I created a container in my HTML file and accessed it using querySelector . This container acted as the root element where I would inject my custom elements. I then wrote a simple render method, which took an element and injected it into the container so it could be visible on the page.

Understanding React Elements: A Modular Approach

To better understand how React elements are structured, I attempted to create my element. Initially, I set each attribute individually, but soon realized this approach wasn’t modular. To improve it, I introduced a loop to handle attributes, making the process more efficient and scalable.

Exploring React.js: Functions and React.createElement()

During this exploration, I noticed that the functions I wrote in App.jsx could also be implemented in Main.jsx and would run just as effectively. This observation led me to test the custom element I had created within React. However, I encountered an issue: React has a built-in syntax, and my custom element couldn’t be passed directly.

This led me to use the React.createElement() method, which is transpiled by Babel. I took the time to understand the syntax of this method. I discovered that after creating an element, I could also inject variables into it using the last parameter of React.createElement() .

Diving Into the React Source Code

Finally, I took a deeper dive into React’s open-source library to get a better grasp of its inner workings. This exploration not only solidified my understanding of how React elements are constructed but also gave me insights into the library's design and functionality.

Video:
https://youtu.be/vz1RlUyrc3w?si=7S8zhBapZgAhnrEe

Deep dive into the basics of react.js(vedio 4th of react.js series)