Hoy iniciaré una serie de artículos sobre React, la famosa librería de JavaScript para interfaces de usuario. No pretendo hacer un curso de React, pero sí una introducción para que los que no conozcaís React, podáis haceros una idea de las ventajas de usar una librería como esta en vuestros desarrollos web.

Com os decía, React es una librería basada en JavaScript para crear interfaces de usuario, creada por gente de Facebook (Jordan Walke) en 2013. En React el código HTML y JavaScript se unen para ser preprocesados y ejecutarse en un navegador.

React es una librería pequeña que nos facilita el trabajo pero que no contienen todas las herramientas para crear un aplicación completa. Necesitaremos herramientas como Webpack o librerías como React Router para completar un proyecto. React utiliza la sintaxis de ECMAScript.

React enfatiza el uso de la programación funcional. (La programación funcional es un paradigma que trata la computación como la manipulación del valor y evita el cambio de estado y datos mutables. En el código funcional, el valor de salida de una función depende SOLAMENTE de los argumentos que se pasan a la función.)

Para trabajar con React, además de conocer el lenguaje hay que aprender a usar herramientas de JavaScript como Webpack y Node Js. Si usamos Create React App, nos proporciona la infraestructura básica para poder compilar, comprimir, testear, etc.

El ecosistema de React es dinámico y cambiante. Tanto React como las librerías relacionadas, suelen sacar nuevas versiones que a veces, con cambios que implican incompatibilidad con las versiones anteriores. En caso de actualización es importante revisar siempre el CHANGELOG de la versión para comprobar si hay cambios y de qué tipo. 

 

¿Porqué React?

  • Hace un uso extensivo de JavaScript, con lo que no hemos de aprender un nuevo lenguaje.
  • Es extensible y fàcil de mantener, al trabajar con componentes independientes.
  • Es muy rápido, al hacer uso del DOM Virtual y actualizar sólo las diferencias entre estados.
  • El flujo de datos es unidireccional (one-way data flow), a diferencia de otras librerías como Angular que es bidireccional. Esto nos permite controlar mejor nuestros datos y sus mutaciones.
  • Facilita la atomización del código en componentes. Cuanto más específicos mejor y más reutilizables.
  • Ideal para desarrollar SPAs (Single Page Applications), Este modelo ofrece la ventaja de nunca navegar por páginas diferentes ni recargar una página. En este modelo, las diferentes vistas de la aplicación se cargan y descargan siempre en la misma página.

Introducción a React

Virtual DOM

Una de las grandes ventajas de React en cuanto a velocidad es el uso de VDOM, una copia del DOM.

Los componentes de React pueden tener estado y React solo actualiza la vista cuando detecta un cambio de estado.

React mantiene dos VDOM y utiliza un algoritmo de comparación para ver las diferencias entre cambios de estado. Una vez detectadas las diferencias, se aplican al DOM.

Gracias a esto, la manipulación y actualización del DOM se mantiene al mínimo necesario, aumentando así la velocidad de renderizado.

 

One-Way data flow

React es la V en el modelo MVC (Model View Controller). Lo malo del modelo MVC es que el flujo de datos es bidireccional y genera muchas actualizaciones del DOM, lo que ralentiza el sistema.

Con JavaScript cualquier modificación de la memoria afecta a la IU y viceversa, cualquier cambio en la IU, provoca una actualización de la memoria. Esto, a medida que la aplicación crece, acaba provocando muchos problemas.

Otro problema del MVC es la dificultad de mantenimiento, ya que es difícil seguir el código y el flujo de datos de la aplicación.

Con React solucionamos ambos problemas al crear un flujo de datos unidireccional y una arquitectura basada en componentes.

 

Con esto finalizamos la introducción a React, en  próximos artículos entraremos más en detalle de esta fabulosa librería en JavaScript.

Y recuerda que si necesitas un desarrollo profesional en React para tu empresa o negocio, solo tienes que contactar conmigo para empezar a diseñar tu nuevo proyecto con React.