Create your own react library and JSX | Chai aur react tutorial #4 Summary

Summary: Building Your Own React and Understanding How It Works

Watch - Chai aur react #4

In this video, I learned how to build a basic version of React from scratch. It was an amazing way to understand how React works under the hood. React is a popular JavaScript library that lets us use JSX (a syntax similar to HTML) to build user interfaces, but the browser doesn't understand JSX directly—it needs to be converted to something the browser can read.

So, we started by creating a new folder, and within that, we wrote some JavaScript that would mimic what React does. The goal was to convert JSX-like code into regular JavaScript that can be understood by the browser.

Step 1: Create a Simple React-Like Structure

First, we created a mainContainer by grabbing the root element from the HTML (the one where we want to show our content). Then, we created a reactElement variable where we essentially described what a React element should look like. For example, imagine we have an anchor tag (<a>). We defined the type as "a" (anchor), then added some props like href, target, and children (the inner text). This was our first step to emulate how React converts JSX to JavaScript objects.

Step 2: Write the Custom Render Function

Next, we created a customRender function. This is where the magic happens. It takes two arguments: the mainContainer (which is where we want to render the elements) and the reactElement (which holds the details of the JSX-like element).

Inside the render function, we:

1. Created an element based on the type defined in reactElement (like an anchor tag).

2. Set the attributes (like href, target) on that element.

3. Set the inner HTML using the children value.

4. Finally, we appended the element to the mainContainer, which is our root element in the HTML.

This process is similar to what React does behind the scenes when it takes JSX and converts it into real DOM elements for the browser to display.

Step 3: Improving the Code

At first, we were repeating some code when setting the attributes, which isn’t ideal. So, we optimized the code by using a loop to apply the props to the element, eliminating redundancy. This was a nice improvement to make the code cleaner and more efficient.

Step 4: Understanding React's Role

After building this simple version of React, we tried applying it in real code to better understand how it works. One important step React takes is converting JSX into JavaScript that the browser understands. While our custom React handled this in a basic way, React itself does this in a much more complex and optimized manner.

React also introduces something called the Virtual DOM, which makes React very fast. When we make changes in our React app, React doesn’t immediately update the real DOM (which can be slow). Instead, it first updates the Virtual DOM, which is a lightweight copy of the real DOM that exists in memory. React compares the changes, figures out what has actually changed, and then updates the real DOM with only the necessary parts. This is a key part of React’s performance optimization.

Step 5: JSX and React Components

We also learned how React renders components. Normally, when you write JSX like <App />, React knows it's a function, so it calls it to get the returned JSX. But what I didn’t realize before is that you can also call components as regular functions with parentheses, like App()—which is what’s really happening behind the scenes.

Another useful thing I learned was how to pass variables into JSX. You can declare a variable outside of the render and then include it inside the JSX using curly braces. This allows you to insert dynamic values into the UI, but it’s important to remember that only expressions (like calculations) are allowed inside those curly braces—complex logic like if-else needs to be handled outside the JSX or with the ternary operator.

Step 6: Diving into React’s Source Code

Finally, we explored React’s open-source code on GitHub, which gave us a better understanding of how everything works behind the scenes. It’s really interesting to see how a library as powerful as React is structured and maintained.

---

Final Thoughts:

Overall, this video helped me really grasp how React works by building a basic version from scratch. React simplifies our work by converting JSX into JavaScript, using the Virtual DOM to boost performance, and efficiently rendering the user interface. It was eye-opening to see how even something as complex as React can be broken down into manageable pieces, and it gave me a lot more confidence in using React in my own projects.