This open source JavaScript library, designed by Facebook, has experienced an almost meteoric rise since its first application in 2011, mainly due to its component structure and virtual DOM rendering. In this article, let’s firstly follow the story of react.js.

You do not have to build a new theater just because you want to change the stage design. According to this maxim, more than five years ago React (alternatively React.js or ReactJS) was used for the first time in the context of Facebook’s Newsfeed. The remarkable User Interface Library has since laid a remarkable career: from irritated reactions to one of the GitHub repositories with the most stars. Meanwhile React Native is a variant for the development of mobile Android and iOS apps available.

React

React started as a JavaScript port of XHP, a PHP version designed to prevent cross-site scripting attacks. In these XSS attacks, destructive scripts are injected into a web application to steal or otherwise harm data from the user. While XHP is able to prevent this, it does not solve the basic problem of dynamic web applications: to perform a complete, performance-damaging re-rendering with every small DOM manipulation. React was designed to solve this problem.

In addition to Facebook, the streaming service Netflix, AirBnB as well as the imagehoster Imgur use the JavaScript library. The photo and video sharing network Instagram is even fully programmed with it. Reason enough, therefore, to look at the software developed by Jordan Walke originally designed for Facebook. What does it really matter, what is its innovative element? Mainly two aspects are mentioned here.

Components instead of templates

React’s striking but difficult to understand property is in its initially crude-looking mixture of JavaScript and HTML, meaning functionality and view. In the form of JSX, the team even provides an optional JavaScript syntax extension comparable to XML. Please note, however, that the UI-Library does not claim to represent a complete MVC framework – it is limited to the view part.

The reason for the mixing of the two languages, which are otherwise strictly separated from one another, lies in the different project structure that React proposes. Instead of based on templates or HTML directives, web applications are broken down to so-called components. These are partly interleaved and are combined in the form of a tree structure to form an app that roughly simulates the user interface.

The special feature is to integrate HTML into JavaScript using the components, rather than differently. On the one hand, the DOM manipulations, which Web Components and AngularJS continue to suffer (eg in the case of Data Binding), can be avoided by hand.

Virtual DOM

In React, information is stored directly in the state of a component, where it can be modified by user actions. As soon as a state is changed, the component must be re-displayed; your render method is called. We now come to the actual innovation: where other libraries or frameworks would be forced to render the entire DOM at the smallest modification of the HTML, React allows a different approach.

React maintains a representation of the DOM, a so-called virtual DOM, to which the changes are initially applied. The real DOM uses a so-called diffing algorithm to match the virtual DOM, and then renders only those components whose state has changed. Another advantage is that several tiny changes can be bundled and re-rendered in a concentrated action. Because fewer reflows are performed, the performance improves considerably.

If, therefore, the stage design or the row of chairs in a theater have to be renewed, React does not attempt to rebuild the theater from scratch, but only the relevant components in a concerted action.

Other advantages

Of course, there are some other advantages, which are only listed here briefly:

  • it allows server-side rendering: In React, the server and client share the same code, allowing isomorphic rendering, so rendering on both client and server side. Because unrivaled apps can cause performance degradation on client engines, it is best to let the server take the work.
  • High SEO suitability: JavaScript pages are not perceived by many search engines because they have little HTML content. However, by its ability to render on the server side, a regular web page is returned to the user, which can then be crawled by Google & Co.
  • Browserevents: React has its own event system to prevent problems with browser implementation. It takes over browserevents, translates them into its own event system and can process them from there.

Conclusion

The appearance of React was a revolution, the impact of which we still can not measure today. Component-based programming and virtual DOMs will continue to swirl the WebApp development in the future. In addition, the numerous new alternatives show that the development has not yet come to an end.