Introduction to ReactJs:
Let me put it this way- a page will be divided in smaller chunks based upon their functionality, these small chunks which will implement UI along with complete functionality are called Components. All the components are then embedded together and are put on a single HTML page to form complete page. You must be wondering why do we need to divide when I’d to put all together on single page. Your question is obvious. Before I go on to explain why this is necessary, let us put it in representation form.
Home page is my complete page having different sections divided into six components. Division of page into smaller components helps improve the re-usability of our code and easy to maintain.
React is based on the concept of virtual DOM. It is virtually present behind actual DOM being rendered on browser.
var example = React.createElement('div');
ReactDOM.render(example , document.getElementById('root'));
This code will then rendered on the browser.
Why Virtual DOM?
In legacy application where entire page was coded in HTML or corresponding language and upon any change in the page, entire page was required to be re-rendered. This required huge performance impact and not so user friendly.
ReactJs has entirely changed this narrative. It says reload only what you change and leave rest as it is. Isn’t this fantastic?
In very beginning we saw an illustration of segregating page in smaller components, let’s refer to it and say for instance, you made some changes which require DOM on component2 to be reloaded. Here at this moment, virtual DOM kicks in. Based on Diff algorithm the difference is calculated at Virtual DOM level and change is first reflected at Virtual DOM and then it reflects at actual DOM.