ReactJS, o simplemente React, es una tecnología para el desarrollo de componentes frontend, principalmente para SPA (Aplicaciones de una sola página). Fue creada por el equipo de Facebook e Instagram y, al liberarse como open source, una interesante comunidad a su alrededor.

React aspira a uniformar, mediante algo similar a Modelo-Vista-Controlador, las interfaces de usuario (siendo el papel que suele tomar la librería, Vista, usada en conjunto con otras librerías como Backbone o Angular. Aunque ciertamente hace algo más que eso cuando se indaga en profundidad, por ejemplo adoptando la arquitectura Flux en vez de MVC).

Su rendimiento está extremadamente optimizado siendo su especialidad el redibujado de zonas de alta mutabilidad (como por ejemplo las listas largas que cambian frecuentemente).

Su secreto es el uso de un DOM virtual, que después volcará al DOM real de manera selectiva.

Por otro lado, React aunque tiene muchas similitudes, también tiene diferencias importantes a las que cuesta hacerse en un principio, sobre todo si vienes de otras librerías más tradicionales. Es necesario invertir un tiempo antes de saber si te llegas a sentir cómodo con React.

React dista del MVC en que está fuertemente orientado a la comunicación en un solo sentido, cuando el último suele tener una comunicación bidireccional entre sus componentes. Por un lado, es ser un elemento clave para facilitar la depuración del código, pero por otro lado presenta problemas de circunvalación de código en secciones complejas, o de ser necesaria una “caja de herramientas” bastante más extensa de lo que se acostumbra en otros frameworks, como el transliterador Babel de NodeJs para el uso de ES6 (La última versión de motor JS).

Un breve comentario sobre Flux:

La arquitectura Flux, pensada en complementar React, usa el concepto de Flujo de Datos Unidireccional. Sus componentes principales son:

  1. Dispatcher, es un gestor de eventos: recibe acciones (actions) y emite información hacia las funciones que estén expectantes a dicha accion (callbacks). Además es capaz de arbitrar el orden y encolar las actualizaciones antes de emitirlas.
  1. Actions, son funciones que facilitan el envío de datos al Dispatcher. Son eventos producidos por distintos elementos de la aplicación o interacciones del usuario (Hemos hecho click en un botón, o hemos recibido datos de otro sitio, etc), perfectamente organizados bajo constantes de un Store.
  1. Stores, o almacenes, son contenedores de la lógica y el estado de la aplicación y se suscriben a la información que les provee el Dispatcher. Normalmente habrá más de un Store, al menos uno por cada sección de la aplicación.
  2. Controller Views, que serían los componentes de React que reciben el estado de los Stores, y lo delegan en sus subcomponentes, convirtiéndolo en elementos tangibles.

 

Referencias: