React JS Overview

ReactJS is a JavaScript library developed by Facebook. It is used for building reusable UI components. React JS official documentation defined it as follows:

React is a library for building composable user interfaces, it supports and encourages the creation of reusable UI components, which presents data that changes over time by using declarative syntax.

React is used by most developers as the "V" part of the MVC architecture. React abstracts away the DOM from you, offering a simpler programming model and off course better experience.

One of the selling points of React is that it can also render on the server using Node. It can power native apps using its framework called React Native. It implements one-way reactive data flow, which reduces the boilerplate making its comprehension easier than traditional data binding.

It uses a concept called Virtual Dom, that selectively renders subtrees of nodes upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

What is Virtual Dom?

Think of a Virtual DOM as an object modeled around a Person ?A?. It has every relevant property this person could possibly have, and it mirrored the person current state. This is exactly what React does to the DOM.

Now think, about adding some properties and extra features to this Virtual DOM modeled against Person "A". In the Land of React, when changes are made on the Virtual DOM two things takes place:

First, React runs a "diffing" algorithm, which identifies what was changed and Secondly, it reconciles and Updates the DOM with the changes on the Virtual DOM.

The way React works, rather than taking the Person "A" and rebuild from ground up, it would only change the cloths, face and arms. This implies that only that portion which needs be reconciled is updated.

Since React is using a "Fake" DOM called Virtual DOM and not the actual DOM, it also opens up a whole of new possibilities, thus we can render this Fake DOM on the server, and there comes server side React Views.

Next: Getting Started