React

React has massively gained popularity in recent years. Even though React could be defined as a JavaScript library designed to help create interactive interfaces, it has grown to become more than that. Let's find out what has allowed React to rise to be one of the hottest web development technologies.

React has massively gained popularity in recent years. Even though React could be defined as a JavaScript library designed to help create interactive interfaces, it has grown to become more than that. Let's find out what has allowed React to rise to be one of the hottest web development technologies.

Why React?

Creating web interfaces used to be a tedious task. Many lines of code were needed to turn static elements into elements that are interactive. When many interactive elements were involved, the code rapidly grew in size and complexity. Achieving actions that involved interactions between multiple parts of an interface were hard to maintain, and the solutions behind it were often fragile.

On the other hand, React was a fresh breeze among the tools and frameworks created for user interface creation. It is simple to get started but can be used to create complex interfaces. What makes it different from other tools is that React is much less opinionated. It gives developers a tool to create dynamic components with little restrictions. This freedom also means that likely no two React projects are the same. Development teams are free to choose from many different solutions for handling data, network requests, user sessions, and so on. React could be compared to Lego building blocks: React does not prescribe how and what you can build. It gives you a simple system to work with, which gives you the freedom to shape into what you need.

React could be compared to Lego building blocks: React does not prescribe how and what you can build.

How does React achieve this simplicity?

React engineers realized that the interface browsers offered to change what is being rendered (an interface like this is also called an application programming interface or API) on users’ screens did not offer the flexibility they were looking for. So instead, they created a small abstraction layer on top of the browser API, which gives developers the tools necessary to create highly dynamic interfaces for web and apps. Traditionally application logic and templates were separated. In the rendering process, those were combined again, with some parts being replaced with dynamic values. React does away with this and comes with its own rendering language called JSX. JSX is a seamless combination of HTML markup with Javascript. JSX makes creating interactive components much easier and faster, and it is part of React’s popularity.

setState()

At the heart of React is what it calls “State.” State is data that describes the state of the React application at any given time. When State changes, React intelligently updates the components that rely on it. This intelligent State, combined with the powerful JSX language and the freedom of choice, has made React one of the most loved tools by development teams.

React in a microservices architecture

Our account manager Patric Ojala uses a metaphor in his article that monolithic architecture puts all eggs in one basket, whereas microservices architecture does not. In short, compared to a classic web service built on monolithic architecture, microservices architecture splits the web services’ functionalities into separate applications that work together via APIs. React as a front-end application serves as the perfect counterpart for, e.g., Drupal in such architectures where the CMS backend and font-end are separated from each other.

Read the article: How can medium sized companies benefit from microservices architecture?

Separate boxes presenting how microservices architecture is a solution based on multiple elements

Wunder's JS guild's lead David Corbacho sharing our best practices in React documentation. The video was made for React Finland's event.

Would you like to hear more about React and its benefits for your web service? You know who to call.

More info about this

Peter Silvennoinen

CCO

+358 40 173 7666

peter.silvennoinen@wunder.io