Create your own react library and JSX

Root Div: The serves as a container where the custom-rendered content will be inserted.

Custom Render Function:

The customRender function takes two arguments:

reactElement: An object representing the element to be rendered.
container: The DOM element where the rendered element will be appended.

DOM Element Creation:

const domElement = document.createElement(reactElement.type); creates a new DOM element of the type specified in reactElement.type (in this case, an element).

Setting Inner HTML:

domElement.innerHTML = reactElement.children; sets the inner HTML of the newly created DOM element to the value of reactElement.children (which is the text "Click me to visit google").

Setting Attributes:

domElement.setAttribute('href', reactElement.props.href); sets the href attribute of the element to the URL specified in reactElement.props.href ("http://google.com").
domElement.setAttribute('target', reactElement.props.target); sets the target attribute of the element to the value specified in reactElement.props.target ("_blank").

Appending to Container:

container.appendChild(domElement); appends the newly created and configured DOM element to the specified container (mainContainer).

React Element Object:

The reactElement object simulates a simplified React element with a type (the type of HTML element), props (an object containing attributes for the element), and children (the inner content of the element).

Selecting Main Container:

const mainContainer = document.querySelector('#root'); selects the

element with the ID of "root" to serve as the container for the rendered content.

Rendering the Element:

customRender(reactElement, mainContainer); calls the customRender function with the reactElement object and the mainContainer DOM element, rendering an anchor () element inside the root div.

Result

When this code runs, it creates an anchor () element with the text "Click me to visit google", which links to http://google.com and opens in a new tab (target="_blank"), and appends it to the div with the ID root in the HTML document.

Now we modulate above code by using loops

Now let's examine how work is done in React.

Ques:-What is an App?
Ans:-An App is a function.

Given that App is a function, can we declare it here as well?

So, it's working, which means App is a function.

However, if App is a function, why is the syntax used? This syntax is JSX.

Ques:-Where does this come from?
Ans:-Every React application uses a bundler, such as Babel or Vite, to handle JSX.

Ques:-What is the Role of a Bundler?
Ans:-A bundler's role is to correct and update the syntax.

HTML Syntax

A bundler's role is to convert this syntax to another form. HTML syntax is obviously easier to understand, but React doesn't natively understand HTML syntax. This is why JSX is used—it mixes JavaScript with HTML. However, the actual syntax should look like this:

The HTML syntax is parsed and converted into a tree structure similar to the syntax above.

An important point is that MyApp is both a function and JSX. Therefore, Babel or another transpiler in the backend should also be converting MyApp. It works this way because, in the end, it is a function. Although we can write it like this, we typically do not use this approach.

Can we write more React elements in main.jsx?

As we mentioned, what we write in the MyApp function will be parsed into a React element object. So, can't we directly pass that object? However, we can't call it directly because React provides methods with its own syntax. This syntax is necessary as it converts the code into a tree structure.

Now we create React elements according to React's specifications, so we import React. The syntax here is predefined.

Previously, we created React elements manually using ReactElement, but now React does not allow us to do this directly. Although React is a library and not as comprehensive as a framework, it provides specific methods for rendering.

In our custom implementation, we used our own render method in customReact, but here we use the render method provided by React.

Now let's explore how variables or JavaScript should be injected.

Note: {username} is called an expression. This means it's an evaluated expression, indicating that we don't write JavaScript here directly but rather the outcome or result of its evaluation.