All right, We come back.
In this video.
Let's have a look at how React JS works behind the scene, the internals, how it works.
All right, cool.
So.
So how does React work behind the scene?
First of all, when you create a React application, you are creating a tree of React component and
one of them is what you call the app dot JS file with a component because this one is being rendered
onto the browser as that and called as a component, and you have dedicated video of components.
All right, cool.
So each component has a render method and that is what we have here as render here.
And when a component is mounted, meaning that when the mount it means when it's being displayed, because
now we have mounted our first component called app.
When that component is being mounted, what happens?
The random method is called this one is being called, and then the resulting react element is added
to the DOM.
When you say react element, it simply means a HTML element.
This what we are referring to as react element.
When I say react element simply means that in a HTML they are called element, meaning your tag and
the HTML tag and attribute combined together to form what is called element.
So React element simply means a HTML tag or a HTML element.
So it is being called that one is being added to the the DOM.
Right.
The dom.
That's a dom tree, right.
Have a look at the index.
The HTML here.
This is my Dom.
Have a look here.
You see that?
Here we have selected the ID root and now inside here, whatever I place in here is going to be visible
as well by here.
Instead of doing that one manually, we are going to allow React to inject that component inside here
so that it will be displayed to the user.
So then when you do that, we are then uses a virtual DOM to keep track of what has changed.
Remember that?
HMO and JavaScript has a dome ie a dome element, right?
That is, the HTML has a dome element.
So every ad create.
A copy of it on DOM, core, virtual Dom, and always the original dom of JavaScript or HTML is being
compared to the virtual dom of React.
So when something changes in the React Element tree, for example, which is this one, now we act updates
the DOM to match and this make React application more fast and responsive.
So any time you make changes, the original DOM is going to compare to the virtual dom of React and
see if there are changes.
If there's changes as soon as I save is going to render the updated one.
Have a look here.
So inside the app, the Jess file.
Now when I say hello world to now I will save it.
Right?
So as soon as I save it right now I have caused a change to the virtual dom of React.
So to be able to display is going to compare to the original DOM.
If there are changes, then it's going to display that.
So when I save it, have a look.
Let me save it here.
Let me save it using file and then save when I do that.
Have a look.
Automatically we have Halo work too.
That's how React is responsive.
All right, good.
So when you create a add component, you specify the input.
Don't worry about that one.
So that's a whole the simple definition of how React works.
And this process of creating a virtual DOM and then comparing it with a red dom is what you call reconciliation.
It is a core of how React works.
By using reconciliation, we can efficiently update the UI in response to changes in data.
That's a nutshell of how React works.
All right, cool.
So don't worry about understanding the loops and internals of React as you move on.
Things will be clearer to you.