Empecemos por el principio, ¿qué es esto de React? De una forma muy resumida, esta librería es la más popular de JavaScript para construir una interfaz de usuario, fue creada en 2011 por Jordan Walke, un empleado de Facebook.

El objetivo de esta librería es desarrollar aplicaciones web de una manera más ordenada y con menos código que si usáramos JavaScript puro o librerías tan conocidas como JQuery centradas en la manipulación del DOM.

¡Ups! ¿qué es esto del DOM?

A medida que leemos este artículo, leeremos varias veces la palabra DOM. El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos.

Una de las principales características de React es que usa DOM virtuales y los aloja en la memoria, de esta manera conseguimos que cada vez que exista un cambio en el DOM real, el virtual cambia inmediatamente.

Este sistema evita que el DOM real fuerce las mejoras continuamente. Por lo tanto, la velocidad de nuestra aplicación no se verá interrumpida. Buscando por internet, encontré esta imagen en la web de O’Reilly que define muy bien como es el proceso del virtual DOM.

1. State Change. En este primer paso, se produce un cambio en el estado del nodo de color de rojo, lo cual provoca que se genere en memoria un Virtual DOM con el árbol resultante tras ese cambio. 2. Compute diff. A continuación, se realiza la comparación entre el árbol del Virtual DOM y el del navegador (DOM real) con el fin de detectar los cambios producidos. Como veis, el cambio afecta a toda la rama descendiente del nodo cuyo estado cambió. 3. Re-render. Finalmente, se consolida el cambio en el DOM real y la interfaz gráfica es actualizada de golpe.

¿Cuáles son sus características principales?

• Componentes

En React podremos pasar funciones como parámetros, lo que ya conocemos como composición funcional. Las apps las elaboramos con la composición de múltiples componentes y encapsulan un comportamiento de vista/estado.

• Flujo de datos unidireccional

Este patrón de funcionamiento que incluye React permite que los componentes superiores propaguen los datos a los que están en un orden inferior, estos componentes trabajarán con estos datos y cuando cambie su state, envían los eventos hacia los de un orden superior para poder actualizarse.

• Mejora de rendimiento gracias al virtual DOM

Las operaciones que realizamos con React cuando ejecutamos la aplicación, son mucho más por que se realizan antes sobre el virtual DOM que se carga en memoria, permite actualizaciones de hasta 60 frames por segundo, dando como como resultado una sensación de fluidez impresionante.

¿Qué compañías utilizan React?

Cada día que pasa, más empresas y desarrolladores nos decantamos por esta librería. Uno de los motivos principales es porque tiene soporte absoluto por parte del gigante Facebook. Netflix, American Express, Facebook, Instagram, AirBnB, Ebay y un largo etcétera, ya se han decantado por implementar esta librería en sus desarrollos.

Conclusión

Como resumen, existen hoy en día muchos tipos de librerías o frameworks como pueden ser Angular o VueJS, pero desde Blanco y en Batea aconsejamos tener a React muy en cuenta para cualquier tipo de trabajo que llegue a nuestra empresa, ya que permite un desarrollo front-end con un rendimiento envidiablemente rápido y eficiente.