Lecture on Creating a Custom React

Introduction

Welcome to the series 'Chai and React' where we learn React through projects and deep-dive into its details.
Today's goal: Create a custom React implementation (basic, minimal version).
Purpose: To understand that React is not a magical entity and to build confidence.
Aim for 1000 comments and 100 shares on the video for engagement.

Recap of React Basics

We have previously used Create React App and Vite.
React versions: ReactDOM for browser, React Native for mobile.
Goal: Import React library and use it in various environments.

Creating a Custom React

Setting Up the Project: Custom React Folder
- Create a folder named 'CustomReact'.
- Inside, create a react.js file and an index.html file.
- Basic index.html structure with a root div:
```
<html>
  <head>
    <title>CustomReact App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="customReact.js"></script>
  </body>
</html>
``
```

Creating the Custom React Library

Select the Root Element

const root = document.getElementById("root");

Render Method

function render(element, container) {
  container.appendChild(element);
}

Creating DOM Elements

function createReactElement(type, props, ...children) {
  const element = document.createElement(type);
  for (const [name, value] of Object.entries(props)) {
    element.setAttribute(name, value);
  }
  children.forEach(child => {
    if (typeof child === "string") {
      element.appendChild(document.createTextNode(child));
    } else {
      element.appendChild(child);
    }
  });
  return element;
}

Rendering a Component

const customReactElement = createReactElement("a", { href: "http://google.com", target: "_blank" }, "Click me to visit Google");
render(customReactElement, root);

In-Depth Explanation

Discussed how a React library's render and create element methods work.
Importance of understanding these fundamental concepts to demystify React.
Tips on debugging and error handling.

Practical Demo

Demonstrated rendering an anchor tag with a clickable URL using our custom React library.
Highlighted the simplicity of the create and render functions.

Conclusion and Next Steps

Encouraged engagement with comments and shares.
Next step: Move on to more complex projects and continue exploring React's internals.

Additional Insights

Emphasis on the importance of the React library's optimization and various algorithms behind the scenes.
Recommended diving into the open-source library code for a deeper understanding.

Homework

Try extending the custom React to handle more complex components.
Experiment with different HTML tags and properties.

Final Thoughts

Recapped the journey from understanding React basics to creating a custom implementation.
Fostered confidence in handling React and unlocking further capabilities through deeper exploration.