Review ReactJS
A lo largo de los cinco meses que llevo jugando con ReactJS me he encontrado con una serie de retos muy buenos que me han llevado a replantearme muchas cuestiones que creí que conocía. A lo largo de esta nota te contaré un poco sobre cada uno de estos retos.
Lo primero fue comenzar a entender algunos de los conceptos que maneja ReactJS sobre la manipulación del DOM Virtual, la definición de una interfaz de usuario mediante JSX (creado por Facebook), el Diseño Orientado a Componentes, las propiedades de los componentes, los estados de un componente y el data binding unidireccional.
DOM virtual
En lugar de generar directamente elementos HTML y modificar el DOM, los componentes de ReactJs generan un modelo del DOM en memoria. Una vez generado el Virtual DOM, ReactJS se encarga de buscar las diferencias entre el DOM real y el virtual y realizar únicamente las modificaciones necesarias sobre el real. Esta es una característica que me parece sumamente eficiente.
JavaScript mediante JSX
Cuando empecé a escribir HTML dentro de JavaScript, me quedé con una cara de WHAT?? Pero analizando un poco e investigando más sobre qué era JSX, quedé encantado, ya que se encarga de convertir todo nuestro código a JS para hacernos la vida más fácil.
Diseño Orientado a Componentes
ReactJS nos hace pensar en componentes, una nueva tendencia en el mundo del desarrollo frontend. La componentización de elementos en nuestras aplicaciones consiste en separar cada uno de los elementos para hacerlos más reutilizables.
Propiedades y estados de un componente
Las propiedades de un componente están formadas por información que es inmutable para los componentes y se recibe por medio de los props.
Se trata de información que el componente no “posee”, por lo que será el componente padre el encargado de modificarla. Cuando esa modificación se produzca, el dueño de la información reconstruirá nuevamente todo su Virtual DOM asociado, incluyendo sus componentes hijos, los cuales serán creados desde cero con la nueva información. Gracias a ello que podemos confiar que no será modificada en ningún momento de su ciclo de vida.
El estado de un componente se almacena en la propiedad state y está conformado por aquella información que sí es gestionada y modificada directamente por el componente cada vez que se realice una acción del usuario o algún factor externo; el componente se renderizará nuevamente con todos su componente hijos.
Data binding unidireccional
ReactJs utiliza un sistema en el cual los controles son generados partir de la información del modelo, pero la actualización del mismo sucede de forma explícita. Es decir, para montar este sistema, todos los componentes de ReactJS cuentan con un método render, que es el encargado de generar el HTML correspondiente en cada uno de ellos. Durante este proceso, es posible enganchar maneadores de eventos a los elementos HTML y detectar cambios en el estado interno del componente, el cual se vuelve a renderizar por completo con ayuda del Virtual DOM. Esto lo hace extremadamente eficiente.
Conclusión
En mi opinión personal, durante el tiempo que he jugado con esta fantástica librería, he quedado fascinado con lo que puedes lograr, sobre todo cuando la mezclas con otras librerías como REDUX, la cual nos ayuda a manejar todos los estados de nuestra aplicación y sus datos, y RADIUM, una excelente opción para escribir CSS inline que nos provee de un enfoque muy poderoso y a la vez nos da ciertas ventajas sobre el CSS tradicional. Sobre ellas hablaremos más adelante en otras entradas.
WHO IS USING REACT IN PRODUCTION?
