From a huge shared codebase to well-defined data flow — see our personal list of six valid reasons to fall for React if you haven’t already done so
React is a declarative JS library for building user interfaces. Its true power lies in the ability to create dynamic UIs that can be updated without page reloads. This makes React rock the stage, especially when it comes to single-page web apps that have gained popularity in recent years.
Many have fallen in love with React since it was open-sourced in 2013, and we are no exception. Below are our top six reasons why React deserves to be praised over and over again.
Easy to learn
Despite other JS frameworks, such as Angular and Ember, React is really easy and fast to learn for those with even basic knowledge of JavaScript and HTML. Consequently, the better command of JavaScript one has, the easier it is to master React to the extent at which one is able to use it in the projects.
So, if you are already well-versed in JavaScript, we can safely state that you are a couple of tutorials away from your first React-based app.
Components
In React, all UI elements, such as buttons, menus, headers, etc., exist as separate components. You may think of them as building blocks used to compose an interface, brick by brick.
In the code, components can be represented by functions or classes depending on their purpose. For example, functional components are pretty simple and straightforward as they are used to simply present data, i.e. accept properties and re-render the UI accordingly.
Unlike their functional counterparts, class-based components can manage data. For instance, they can hold the internal state (in other words, the history of how the component has been changed over time) — and this explains why you open a web page and appear on the same tab you opened last before closing it. The good news is that with the introduction of hooks, this feature will become available to functional components as well.
The super power of React components is that, created once, they can be safely re-used further in the project. It is possible because the variable parameters of a component, such as style, color, text, etc., should not necessarily be hardcoded — they can be passed to a certain class or function as properties. So, for example, if there are five buttons on a page, you simply need to create the Button class (or function) once and then pass different parameters to it to get five different buttons.
You can go as far as to create a shared library of components and then use it across various projects. Or you can leverage the existing libraries of React components, such as Material UI, Bootstrap, Bulma.io, etc.
Virtual DOM
The major problem of most JS frameworks are unnecessary DOM updates. When a change occurs in one object, the entire interface has to be re-rendered to implement the change. This can slow down the app performance significantly.
In React, the problem is handled by a virtual DOM.
Put simply, virtual DOM is a copy of a real DOM, kept in browser memory. When a user interacts with the interface, for example, presses a button, every virtual DOM object gets updated. Then, React compares the updated virtual DOM with its previous version and implements the changes only in those objects of the real DOM that have been changed in its virtual copy.
It might seem that these manipulations take a lot of time. However, as far as the virtual DOM can’t directly change the things displayed on the screen, its objects get updated much faster than the real ones.
Flux architecture
Flux is an architectural pattern responsible for the smooth store operation in JS-powered applications. Using the MVC architecture terminology, React handles the View component, while Flux is responsible for the Model.
In the picture below, you can see the typical components of the Flux-enabled data layer structure.
The Flux architecture implements the concept of unidirectional data flow. Simply put, it makes the data inside the app move in a strictly defined order, where each component plays its role.
Actions react to user interactions with the interface and pass the received data to the Dispatcher, which further communicates the data to the Stores holding the relevant state. After the Stores get updated, the Views retrieve the relevant data from them, get updated themselves, and update the child Views.
Flux helps build well-structured and easy-to-understand data layers in React-powered apps. Its main benefit lies in scalability — as the app grows bigger and more complex, the order described above remains stable and never breaks, thus minimizing errors in the data flow and facilitating bug-fixing.
Helping tools
There are a lot of useful tools to help React developers on the road. Among them are React Developer Tools and Redux Developer Tools, which are Chrome extensions that help detect errors in the code and fix bugs. Also, we’ve already mentioned the diverse libraries of React components that can be used freely across various projects. With a toolkit like this at hand, even newbies can jump on their first projects early enough, without having to learn React inside-out.
React Native
Finally, the icing on the cake. If you are well-versed in React, by default, you have another powerful tool at your disposal — here comes React Native. Used to create mobile apps on plain JavaScript, React Native is a replica of React’s design as it relies on the same component-based architecture to build truly native apps for both iOS and Android. The best thing is that you don’t have to master any native frameworks since React has you totally covered. Nice, isn’t it?
So, this is a short list of the things that make us fall in love with React every day. It is no way complete and just reflects our own vision. If you think that something important has slipped our mind, join the discussion on LinkedIn (link to our profile) and let us know in the comments section.
Originally published at yellow.id.
