How React Works Under the Hood

React is not a framework it’s a javascript library. We can import its built-in method and use it. React work with an entire network of tools all work together. Webpack, npm, node, J.S.X, and Babel. There are alternatives for tools but this is the most common use.

Photo by Malte luk from Pexels

J.S.X in React

//JSX
return (
<div className="title">
<h1>Hello World!</h1>
</div>
);

This is a simple JSX code inside the React component return method.

//Transform into Javascript code
return React.createElement(
"div",
null,
React.createElement("h1", { class: "title" }, "Hello World!")
);

In this way react babel preset transform JSX code into javascript code. After import, React create an element like JSX code using the createElement method The createElement accepts three-parameter first one for tag name as like HTML tag and second one attribute and last one for children.

Babel in React

//ES6 code
const sum = (a,b)=>{
return a+b;
}
//Babel compile
var sum = function sum(a, b) {
return a + b;
};

But something else Babel does in React it transforms JSX code also into Javascript code. When we have JSX code babel it’s turned into React.createElement. it does this with react Babel preset. Babel is a tool but react has created a preset. You can check it on your root directory package-lock.json file. ref

package-lock.json

Webpack in React

devtools

Behind the DOM Update

Virtual DOM diff Real DOM

Front End Developer