Antes de comenzar a programar nuevos ejemplos con React nos vamos a tomar nuevamente algo de tiempo para la teoría, en concreto para analizar la librería y así conocer más de cerca algunas de sus características. Ya tendremos tiempo en el Manual de React de ponernos algo más prácticos.

React es una librería para crear aplicaciones web, con Javascript del lado del cliente y del lado del servidor. Esa definición hace hincapié en una dualidad (cliente + servidor) que resulta una de las principales características de la librería, de las que ya hemos hablado anteriormente, en el artículo de Qué es React y por qué usarlo. Aunque volveremos sobre ese punto, ahora vamos a conocer otros datos de interés.

Composición de componentes

Así como en programación funcional se pasan funciones como parámetros para resolver problemas más complejos, creando lo que se conoce como composición funcional, en ReactJS podemos aplicar este mismo patrón mediante la composición de componentes

Las aplicaciones se realizan con la composición de varios componentes. Estos componentes encapsulan un comportamiento, una vista y un estado. Pueden ser muy complejos, pero es algo de lo que no necesitamos preocuparnos cuando estamos desarrollando la aplicación, porque el comportamiento queda dentro del componente y no necesitamos complicarnos por él una vez se ha realizado.

Esto es algo sobre lo que ya hemos hablado. En resumen, al desarrollar crearemos componentes para resolver pequeños problemas, que por ser pequeños son más fáciles de resolver y en adelante son más fáciles de visualizar y comprender. Luego, unos componentes se apoyarán en otros para resolver problemas mayores y al final la aplicación será un conjunto de componentes que trabajan entre sí. Este modelo de trabajo tiene varias ventajas, como la facilidad de mantenimiento, depuración, escalabilidad, etc.

Desarrollo Declarativo Vs Imperativo

En la experiencia de desarrollo con librerías más sencillas como jQuery, o el propio "Vanilla Javascript" realizamos un estilo de programación imperativo. En ese estilo se realizan scripts que paso por paso tienen que informar sobre qué acciones o cambios en el DOM se deben realizar. Hay que ser muy concisos en esas acciones, especificando con detalle cada uno de los cambios que se quieren realizar. La forma imperativa de declarar nos obliga a escribir mucho código, porque cada pequeño cambio se debe definir en un script y cuando el cambio puede ser provocado desde muchos sitios, cuando agregamos eventos, el código comienza a ser poco mantenible.

Sin embargo, el estilo de React es más declarativo, en el que nosotros contamos con un estado de la aplicación y sus componentes reaccionan ante el cambio de ese estado. Los componentes tienen una funcionalidad dada y cuando cambia una de sus propiedades ellos producen un cambio. En el código de nuestra aplicación tendremos ese componente, y en él se declarará de donde vienen los datos que él necesita para realizar su comportamiento. Podremos usarlo tantas veces como queramos declarando que lo queremos usar y declarando también los datos que él necesita para funcionar.

Quizás ahora, si no tenemos experiencia con otras librerías o frameworks de enfoque declarativo la idea pueda quedar algo confusa, pero lo iremos viendo mejor con los ejemplos.

Flujo de datos unidireccional

Ésta es otra de las cosas que facilita React, aunque no es exclusivo. En este modelo de funcionamiento, los componentes de orden superior propagan datos a los componentes de orden inferior. Los de orden inferior trabajarán con esos datos y cuando cambia su estado podrán propagar eventos hacia los componentes de orden superior para actualizar sus estados.

Este flujo tiende a ser unidireccional, pero entre componentes hermanos muchas veces se hace más cómodo que sea bidireccional y también se puede hacer dentro de React. Sin embargo, si tratamos siempre de mantener el patrón de funcionamiento unidireccional, nos facilitará mucho el mantenimiento de la aplicación y su depuración.

Performance gracias al DOM Virtual

El desempeño de React es muy alto, gracias a su funcionamiento. Nos referimos al desempeño a la hora del renderizado de la aplicación. Esto se consigue por medio del DOM Virtual. No es que React no opere con el DOM real del navegador, pero sus operaciones las realiza antes sobre el DOM Virtual, que es mucho más rápido.

El DOM Virtual está cargado en memoria y gracias a la herramienta que diferenciación entre él y el real, el DOM del navegador se actualiza. El resultado es que estas operaciones permiten actualizaciones de hasta 60 frames por segundo, lo que producen aplicaciones muy fluidas, con movimientos suavizados.

Isomorfismo

Es la capacidad de ejecutar el código tanto en el cliente como el servidor. También se conoce como "Javascript Universal". Sirve principalmente para solucionar problemas de posicionamiento tradicionales de las aplicaciones Javascript.

Como anteriormente ya hemos hablado sobre este punto, lo vamos a dejar por aquí.

Elementos y JSX

ReactJS no retorna HTML. El código embebido dentro de Javascript, parece HTML pero realmente es JSX. Son como funciones Javascript, pero expresadas mediante una sintaxis propia de React llamada JSX. Lo que produce son elementos en memoria y no elementos del DOM tradicional, con lo cual las funciones no ocupan tiempo en producir pesados objetos del navegador sino simplemente elementos de un DOM virtual. Todo esto, como hemos dicho, es mucho más rápido.

React DOM y la herramienta de diffing, se encargarán más tarde de convertir esos elementos devueltos por JSX en DOM Real, sin que nosotros tengamos que intervenir.

Componentes con y sin estado

React permite crear componentes de diversas maneras, pero hay una diferencia entre componentes con y sin estado.

Los componentes stateless son los componentes que no tienen estado, digamos que no guardan en su memoria datos. Eso no quiere decir que no puedan recibir valores de propiedades, pero esas propiedades siempre las llevarán a las vistas sin producir un estado dentro del componente. Estos componentes sin estado se pueden escribir con una sencilla función que retorna el JSX que el componente debe representar en la página.

Los componentes statefull son un poco más complejos, porque son capaces de guardar un estado y mantienen lógica de negocio generalmente. Su principal diferencia es que se escriben en el código de una manera más compleja, generalmente por medio de una clase ES6 (Javascript con ECMAScript 2015), en la que podemos tener atributos y métodos para realizar todo tipo de operaciones. Los componentes statefull, con estado, necesitan tener un método render() que se encarga de devolver el JSX que usar para representarlo en la página.

Podemos decir que los componentes con estado son componentes "listos" y los que no tienen estado son "tontos". Los statefull se usan para resolver problemas mayores, con lógica de negocio, mientras que los stateless se usan más para interfaces de usuario.

Ciclo de vida de los componentes

React implementa un ciclo de vida para los componentes. Son métodos que se ejecutan cuando pasan cosas comunes con el componente, que nos permiten suscribir acciones cuando se produce una inicialización, se recibe la devolución de una promesa, etc.

En definitiva, todas estas cosas las iremos conociendo a lo largo del Manual de React de DesarrolloWeb.com. Aunque recuerda que si quieres aprender mucho mejor, con menos tiempo y ayudado por profesores, tienes el Curso de React de EscuelaIT.