Using React JS for Web Applications

This article is an introduction to React, which is a JavaScript library used to create UIs. React abstracts away the DOM from you, providing a simpler programming model and better performance.

React, a JavaScript library for creating user interfaces, has been adopted by Facebook and Instagram. React is intended to be the ‘V’ in MVC (Model-ViewController), i.e., the user interface. It has been built to solve the problem of large applications where data changes over time. It is ideal for single page application (SPA). It is used to create interactive, reusable and state full components. Instagram.com is entirely written in React. It uses a high speed virtual DOM (Document Object Model), and has an easy-to-use and understand syntax.

React became popular because of its rapid DOM rendering speed. A Web page is made up of the structure of HTML elements. It creates a tree for all nodes, but reading and writing the DOM is slow. React JS uses the concept of a virtual DOM to make it faster.

The virtual DOM of React JS

Normally, when the DOM is updated, the rendering of the page takes place.

Reading and writing the DOM is slow, whereas reading and writing JavaScript objects is fast. The React virtual DOM is a JavaScript object. React never reads from the real DOM, and it writes DOM only if it is absolutely necessary and that, too, only the required content is written.

In Figure 1, we can see that JavaScript directly interacts with the DOM—reading and writing it. When we use methods like getElementById we are basically querying the DOM for a specific element.

In the same way, when we change the element class or content of the element, we are writing back to the DOM. In JavaScript, this happens many times if the state is changed frequently. If we are using views or some other method to update, we are rendering the same data again and again. This happens even if the changes take place in a small portion. As we continue to render, it slows down our apps. When we use some templating to generate the view, the case is entirely different, in which case, we may not have any idea of how the DOM is being updated.