Let’s see how React works surreptitiously

Photo by Ferenc Almasi on Unsplash

I have seen most of my friends working with react as a beginner, they have completed lots of projects. But the reality is among them, a few exactly know how react works behind the scene. Because they didn’t spend enough time or they didn’t find it necessary to understand this. So what happens ultimately? Those who learn in this way become frustrated or can’t find too much hope with learning any library or framework. So experts suggest knowing deeply about the language before going through a library or framework or knowing profoundly about the kinds of stuff. So today I am discussing how react works under the hood.

At first, let’s think about the naming of react. I have found a few articles where the writer claimed that when we try to update the DOM(we will discuss it later), react started comparing the changes with the previously created virtual DOM. That means how react reacts with the change(maybe this is the reason for naming react). However we have found a term DOM. Let’s find out the mystery behind this and why we should become aware of it while learning JS DOM property. According to MDN web doc:

The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

So what do we understand through this definition? Simply DOM is nothing but an object of documents. We can say it is like a tree. What’s the relationship of react with that DOM or where is the success of in this case? When we create a layout or structure of HTML elements, react closely descry this, it creates its own virtual DOM accordingly. When we try to change any part of that model, react can intellectually detect the change, it compares this change with its own virtual DOM which has been created previously, then it simply update not only the whole DOM but also that specific area. So here is the power of react. It is called Tree Reconciliation Algorithm.

Now it is the time for react to directly set foot in the browser. Which we call in the language of react is rendering. Before rendering, react has to acknowledge what to be rendered and where in the browser rendering is taking place. This is our well known ReactDOM.render. we use this method like the example below in class component:

render(){
    return (
       <div>
         <h3 style={{ textAlign: "center" }}>Hello World!</h3>
         <p>React is speaking</p>
       </div>
 )} 

In plain JS:

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h3’, {style: {textAlign:‘center’}},
‘Hello World!’),
React.createElement(‘p’, {},
‘React is speaking’)
)
ReactDOM.render(rootElement, document.getElementById(‘app’))

In order to show something on the UI, react has to create element. This is done by React.createElement. How we can write this element? We know how to write HTML element. But this is react. It is a JS library. So everything should be written in JS. So in this case what react do is to allow us to write HTML in JS format called JSX(JavaScript XML). This is so engrossing. So now the question arises how browser can recognize this JSX. There is something called Transpiler which performs this task perfectly. Here our transpiler is Babel. Most frequently we use Create-react-app CLI to create boilerplate. So most of us ignore this matter subconsciously. But if we try to find out, we can see that the starter template that we see after running create-react-app CLI, can be originated by a bunch of commands. One of these is babel-preset. So this is the transpiler. I have another article regarding this.

npm i @babel/preset-react

There is an important fact about rendering is that render() method should be pure, we can’t update the component’s state within render. We should do the task before rendering otherwise user will experience double rendering in the UI.

What is the component and how they communicate with each other?

A component is nothing but a javascript class or function. It accepts props and renders something which appears in the UI. What is props? This is the process of how components communicate. One component passes something to another component, another component accepts it as props. It can be object, array, etc. Parent component can pass data to child components, child components can pass data to the parent component, child components can pass data between them(repeatedly doing this task is sometimes called props drilling). Wait!!! there is one question. How can we validate the passed data? Hmm, there exists a method called prop-types, which will check your passed data it is a string or boolean or anything else. Here is another case in data flow. Suppose we are passing an object from parent component, it may contain lots of properties. If you need a property in child component which is not included in that props(object), you can set default property in that child component, by using defaultProps. Let’s see the following example:

output:

As expected. Now let’s remove age attribute from the App.js and see the result:

So there is the default value showing in the UI.