Today I will start a series of articles on React, the famous JavaScript library for user interfaces. I do not intend to do a React course, but an introduction so that those who do not know React, can get an idea of ​​the advantages of using a library like this one in your web developments.

React is a JavaScript-based library for creating user interfaces, created by people from Facebook (Jordan Walke) in 2013. In React the HTML and JavaScript code come together to be preprocessed and run in a browser.

React is a small library that makes our work easier but does not contain all the tools to create a complete application. We will need tools like Webpack or libraries like React Router to complete a project. React uses the ECMAScript syntax.

React emphasizes the use of functional programming. (Functional programming is a paradigm that treats computing as the manipulation of value and prevents the change of state and mutable data. In the functional code, the output value of a function depends ONLY on the arguments passed to the function. )

To work with React, in addition to knowing the language you have to learn to use JavaScript tools such as Webpack and Node Js. If we use Create React App, it provides us with the basic infrastructure to compile, compress, test, etc.

The React ecosystem is dynamic and changing. Both React and related libraries, often release new versions that sometimes, with changes that imply incompatibility with previous versions. In case of update it is important to always check the version CHANGELOG to see if there are changes and of what type.

Why React

  • It makes extensive use of JavaScript, so we don’t have to learn a new language.
  • It is extensible and easy to maintain, when working with independent components.
  • It is very fast, making use of the Virtual DOM and updating only the differences between states.
  • The data flow is unidirectional (one-way data flow), unlike other libraries such as Angular which is bidirectional.
  • This allows us to better control our data and its mutations.
  • It facilitates the atomization of the code in components. The more specific the better and more reusable.
  • Ideal for developing SPAs (Single Page Applications), This model offers the advantage of never browsing different pages or reloading a page. In this model, the different views of the application are always loaded and downloaded on the same page.

Introduction to React

Virtual DOM

One of the great advantages of React in terms of speed is the use of VDOM, a copy of the DOM.

React components may have status and React only updates the view when it detects a change of state.

React maintains two VDOMs and uses a comparison algorithm to see the differences between state changes. Once the differences are detected, they are applied to the DOM.

Thanks to this, the manipulation and updating of the DOM is kept to the minimum necessary, thus increasing the rendering speed.

 

One-way data flow

React is the V in the MVC (Model View Controller) model. The bad thing about the MVC model is that the data flow is bidirectional and generates many DOM updates, which slows down the system.

With JavaScript, any memory modification affects the UI and vice versa, any change in the UI causes a memory update. This, as the application grows, ends up causing many problems.

Another problem of the MVC is the difficulty of maintenance, since it is difficult to follow the code and the data flow of the application.

With React we solve both problems by creating a unidirectional data flow and a component-based architecture.

With this we finish the introduction to React, in future articles we will go into more detail of this fabulous JavaScript library.

And remember that if you need a professional development in React for your company or business, you just have to contact me to start designing your new project with React.