Which framework should I use with React

What to know about React

What is React? In short, React is a library for developing graphical interfaces for web applications. But what else is there to know about React?

React is often referred to in connection with web UI frameworks such as Vue.js or Angular - but React is actually not a framework in the strict sense of the word. Instead, React is just a relatively small and simple library for rendering graphical interfaces. Unlike UI frameworks, React dispenses with concepts for data binding, routing, dependency injection and the like. First of all, this makes React much "lighter" than many of the alternatives.

That was revolutionary in the early days of React in 2013, especially compared to the top dog Angular 1 at the time, which was comfortable to use, but was hardly able to display complex UIs due to its mediocre performance and lack of scalability. React had already addressed exactly these problems back then and introduced various concepts from functional programming into the UI world for this purpose, for example immutability of data types or the so-called unidirectional data flow.

A major reason for using these functional concepts is that they enable the use of the so-called virtual DOM, an in-memory copy of the DOM that React can process with extremely high performance and that only after all tests and adjustments have been completed is synchronized with the real DOM. Of course, the functional concepts are not new in themselves, but React brings them more to the attention of developers.

What is also remarkable about React is that React relied heavily on component orientation from the start. There are now even two options for this, namely the so-called class-based components on the one hand, and the functional components on the other. In principle, the two can be used almost equally, but the functional approach is receiving increasing attention, which is why it is advisable to follow this path in new projects.

React was and is largely developed by Facebook, actually even for its own use: Facebook uses React to develop Facebook's UI. Initially, a major point of criticism with regard to React was the license used, which attracted attention due to proprietary and Facebook-specific extensions - but that has been a thing of the past for a few years and React is available under the common MIT license.

Manage React-State

An essential part of React is the handling of the so-called State, i.e. the current state of the application. Since State has to be changeable by definition, it is particularly interesting how a UI framework or a UI library deals with this topic. In React there is not only the state as an object for this purpose, but also dedicated functions to change this state. The use of these functions is similar to the use of the command pattern.

It is advisable to name these functions functional and not technical in order to be able to express more semantics in the application and to use less the common but harmful CRUD way of thinking. For this purpose, the functional components provide a hook that creates and returns a state object and also creates a function with which this state can be reset. It is important here that the state is actually replaced and not modified by calling the corresponding function in the sense of the immutability of objects. This approach can now also be found in numerous other state management modules.

However, it is not advisable to keep State in every component. Instead, a distinction is usually made between stateless and stateful components, whereby the former are only used to present data, but do not have their own logic. It can only be found in the stateful components, which tend to be higher up in the UI hierarchy. The state is passed through from top to bottom in the hierarchy of the UI components.

However, the lowest components trigger events in response to actions by the user, which, conversely, move from the bottom to the top of the state - and ultimately lead to a change in the state, which in turn is passed down through the hierarchy. Since components in React are ultimately nothing more than functions, it is ultimately about the composition and orchestration of functions.

Use JSX in React

React has its own language called JSX for arranging the components. This is an extension of JavaScript developed by Facebook that can process XML as an additional data type. Along the way, not only JavaScript code can be accommodated in a JSX file, but also HTML, so that the semantic structure of the component and its behavior can be managed in a common file.

If you also add a JSS solution, for example styled components, the CSS required for a component can also be accommodated in a JSX file. Along the way, all three perspectives of a component have been encapsulated together in one file, which can then be passed on and used as an independent artifact.

The special thing about this approach is that it enables a functional arrangement of code, and not - as classic web development suggests - a separation of languages: The historically determined distinction between HTML, CSS and JavaScript is precisely a "separation of languages", the technical criteria follows, whereas a technical separation according to "Separation of Concerns" would be much more sensible and sustainable.

Why React?

Now, when considering why you should use React over other UI approaches, there are essentially two reasons that you keep coming across. The first reason is that, as mentioned earlier, React is very specialized and lightweight, so it can be seen as one building block of many. Since you have to combine React with other modules in order to develop a complete application, React cannot grow to a system-relevant size.

Of course, replacing React with another technology will also be costly, but if the application is sensibly and neatly structured, only those components that are actually UI-related need to be revised. At first it sounds as if these are all components anyway - but a frontend ultimately contains a lot more code than just those with a direct UI reference.

This is far more difficult with frameworks that go beyond pure rendering and provide numerous other services for the front end, as they intervene much more strongly in the structure of the entire application. In this respect, React can be better decoupled. The disadvantage here is, however, that React naturally always has to be combined and integrated with other modules, with Angular, for example, requiring less effort. Ultimately, it cannot be said across the board that one is better or worse than the other - in the end they are simply different philosophies.

The second reason that is often cited as an argument for React is its tight integration with JavaScript. Unlike in Vue.js or Angular, for example, there is no proprietary way in React to create a loop, condition or data binding. Instead, React simply uses the constructs that already exist in JavaScript, which is why working with React helps to become a better JavaScript developer in general - and vice versa.

In contrast, with Vue.js and Angular you only learn framework-specific, proprietary procedures that you cannot apply outside of the respective framework.

display

Next.js and Redux

Since React has to be combined with other modules, it is good to know well-established and well-functioning modules. Next.js and Redux are particularly worth mentioning here.

Next.js is a runtime environment for React that already takes on numerous tasks, including server-side rendering, generating and exporting a static website, internationalization, optimizing images, and much more. If you combine React with Next.js, you save a lot of work and can concentrate primarily on designing and developing the actual components. In this respect, Next.js forms an excellent basis for working with React.

In contrast to this, Redux is a so-called state container, i.e. a module that has specialized in the management of state. The handling of State is in principle already included in React, but Redux professionalizes this approach again and introduces some of its own constructs, which are particularly useful for use in large and complex applications. This includes the central administration of a store as well as predefined paths on how these stores are to be updated.

React developers should therefore know both tools, Next.js and Redux, and have a basic understanding of them in order to be able to assess and use them if necessary.

Conclusion

Overall, it can be said that React is an extremely successful UI library with which extensive, complex and demanding graphical interfaces can be developed. React will be especially happy if you value functional programming and the concepts associated with it, and if you value the modularization of the front end more than a fully integrated all-in-one solution like the one offered by Angular. As already said, there is no blanket right and wrong here - React and Angular ultimately serve different philosophies.

Getting started with React is not easy at first due to JSX, the syntax takes some getting used to. However, once you have got used to JSX and the way of thinking behind it, you no longer want to miss the approach to integrating all aspects of a component.

A large part of the efficient and effective development with React is not least due to the ecosystem, which, in addition to numerous other modules, has produced two excellent additions, especially Next.js and Redux.

Golo Roden

Golo Roden is the founder, CTO and managing director of the native web GmbH, a company specializing in native web technologies.

Read CV ยป