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.
Components instead of templates
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.
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.
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.
- 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.
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.