Front-end development with React.js and Redux

Have you already tried the most popular JavaScript library these days?

ReactJS is a set of libraries that allow us to make complex interfaces in a simple way using JavaScript. It is focused on the development of user interfaces. That is its main area of work, but the truth is that with the entire ecosystem of applications and tools and components, with React we find an excellent ally to do all kinds of web applications, SPA (Single Page Application) or even mobile applications.

Therefore, it is a base on which we build almost anything with JavaScript and that makes our development much easier since it offers us many ready-made things, in which we do not need to invest time to develop.  In React, thanks to the fact that the views are associated with the data, we do not need to write code to manipulate the page when the data changes, because this is done automatically. Performance is its main characteristic of React, which is why it has been selected for a lot of high-level projects, as well as providing an agile, neat and maintainable architecture development.

It should be noted that React by itself is a library and not a framework since it deals with user interfaces. However, several add-ons can make React a product that is comparable in features to a framework. When the development is based on reusable components we get a very consistent architecture with easy scalability and maintenance. Besides, a wide community has been created around React, so it is easy to find technical information and components already created that can be used in any project.

Take care of your data layer

Some of the most common problems that we face during the design of our applications, regarding its state management, are the following:

  • Where is the state of the application stored?
  • What is the status of the application each moment? Where is it modified and in what situations?
  • Who is in charge of manipulating the state, and how?
  • How do I share and manage the status of the application through multiple components, and how are they updated when the application changes?

All these problems are solved in a simple way with the use of Redux, a library that controls the status of the application easily and in a consistent way. Redux provides a unidirectional data flow through the introduction of the concept of 'predictable state container', allowing us to understand what happens in our systems in a very simple and precise way; in addition to other advantages, such as being able to keep a history of the state.

It is agnostic to any framework, and although it is typically used in combination with React. The combination of ReactJS with Redux offers us the possibility to develop the frontend of an application by taking control of the data very easily and understand the data flow.

ReactJS it is in charge of the front end, and of generating the necessary HTML which will be presented to the end user and Redux is responsible for managing the state of the application and convert this state into props so that they can be accessed from our components or containers in a very simple way.

on November 5, 2018