All About React

React JSX: react jsx is neither a string nor an HTML tag. It's a powerful thing where we can use all javascript power. We can create HTML elements using javascript.

let element = document.createElement("h3")
element.innerText = "hi Rahul"
document.getElementById("app").appendChild(element)

In this process, we can create Html element using js. In the backend react is automatically creates the element in this process.

import React from 'react';
const element = React.createElement('h1', null, "Hello Rahul");

Here element is a valid JavaScript object. so we can do anything with it. We can write in a more simple way like this

import React from "react";
const element = <h3>Hello Rahul</h3>;
console.log(element);

Now JSX means javascript XML that looks like this up code and this conversion happen using babel
We can use javascript in jsx inside {} notation . We can set attribute in jsx like HTML tag.

ReactDOM.render(element,  document.getElementById("app"))

this line shows the react element in the HTML page. if we change the element like then the code looks like

import React from "react";
import ReactDOM from "react-dom";
setInterval(() => {
const element = (
<h3 className="h3">
<span>
Hi Rahul
{Date()}
</span>
</h3>
);
ReactDOM.render(element, document.getElementById("app"));
}, 1000);

Browser DOM:

This is the HTML rendering process in the browser. If we change something on the page it will rerender the page each change. So if we rerender the page it will slow the browser.

Batch update: Batch update is an update process where first all update happens then render the page at last.

Virtual DOM: In this process, a replica of the main dom is created and which is a javascript object. If something is changed in the dom react graph the change using reconciliation algorithm and find the change.

useState(): useState is a function that controls the state of the react component. Here state means the data that change for each update. This is called the state of a react element.