React Más Allá de Hola Mundo

El presente artículo está dirigido a personas que ya están familiarizadas con React o alguna biblioteca para single page applications (SPA). En él abordo distintos puntos que pueden ser de utilidad para profundizar su comprensión de React así como conocer herramientas que los puedan ayudar a construir mejor sus aplicaciones.

React no es un framework

React es una biblioteca de Javascript para crear Interfaces de usuario. Esto va en contraste con alternativas como Angular y Vue, que te dan un framework completo “listo para usarse” para crear single page applications. En React necesitas utilizar bibliotecas complementarias para resolver aspectos comunes en aplicaciones tales como manejar estados, autorización, entre otras cosas.

Esto puede ser una ventaja o una desventaja de acuerdo a tu forma de ver las cosas. Para personas sin un amplio conocimiento del ecosistema Javascript esto es una desventaja, ya que al usar React requerimos conocer otras herramientas, patrones o bibliotecas para implementar una aplicación completa y con buenas prácticas.

Pero para quienes conocen JavaScript bien, el hecho de que React solo es una view library nos otorga un gran poder y flexibilidad, ya que dependiendo de la audiencia y  requerimientos de la aplicación podemos implementar una solución a la medida justo para nuestras necesidades.

Otro diferencia entre React y otras bibliotecas para modificar el DOM es que con las alternativas típicamente se separa la estructura de la vista (HTML) y la funcionalidad (JS). En cambio, el modelo arquitectónico en React consiste justamente en dividir nuestro front-end en componentes, donde cada componente conjunta la estructura y comportamiento deseados.

Ambiente inicial

Para las personas que nunca han experimentado con React y deseen hacerlo, la forma más sencilla de comenzar es usando la herramienta de línea de comando create-react-app. Para poder utilizar esta herramienta es necesario tener NodeJS [1] en tu sistema y un gestor de paquetes como npm o yarn [2] (personalmente, prefiero este último).

Una vez instalado node y yarn, podemos instalar create-react-app con el comando:

yarn global add create-react-app

y luego creamos un nuevo proyecto:

create-react-app [nombre-del-proyecto]

Este comando ejecuta una serie de scripts que generan un ambiente de desarrollo para una app React.

Una vez creada nuestra aplicación, para arrancarla debemos ingresar al directorio del proyecto y ejecutar el comando yarn start  lo cual inicia la app y abre una ventana de navegador en la dirección http://localhost:3000 que es donde está corriendo.

Si necesitas más información sobre los comandos disponibles en create-react-app o cómo hacer deployment de un SPA hecha con create-react-app la documentación te sacará de apuros [3].

HTML mezclado con JS ¿?

Si inspeccionamos el código en src/App.js encontraremos código como el que aparece en el listado 1. Como pueden ver, parece que React mezcla HTML y JS en el mismo archivo.

Listado 1. App.js inicial.

En realidad no se está mezclando HTML con JS. Lo que parece HTML es en realidad JSX, que es una extensión de sintaxis de JS, que entre otras cosas permite manejar elementos HTML como objetos para poder manipularlos a gusto. Para verificar esto, podemos copiar el código del listado 1 en la página demo de babel (http://babeljs.io/repl) y veremos el JS correspondiente, donde las etiquetas de HTML se transforman en llamadas a React.createElement.

Los detractores de React argumentan que React, mediante JSX, combina JS con HTML e inmediatamente califican eso como algo malo, pero hay que entender el por qué de esto. Simplemente, React reconoce el hecho de que la lógica de renderizado está intrínsecamente acoplada con el resto de la lógica del UI incluyendo el manejo de eventos, el cambio de estado a lo largo del tiempo y la preparación de datos para ser desplegados.

En vez de artificialmente separar tecnologías, poniendo el HTML en un archivo y la lógica en otro, React se enfoca en separar intereses. En React, la unidad básica de código son los “componentes”. Típicamente, cada componente resuelve un interés muy puntual (ej. un header o una lista) y tienen bajo acoplamiento entre sí, por lo que son altamente reutilizables dentro de una aplicación.

El listado 2 muestra cómo React utiliza el paradigma de composición. En el componente App invocamos al componente SplitPane indicando en el atributo left al componente Contacts y en el atributo right al componente Chat. El componente SplitPane es definido en una función con este nombre, y utiliza el objeto props para obtener el valor de sus atributos.

Listado 2. Composición.

Esta forma de propagar los datos mediante props es el secreto detrás del desempeño de React y nos obliga a usar patrones de programación funcional.

Componentes de alto nivel

Otro patrón prestado de la programación funcional es conocido como componentes de alto nivel (higher order components). En esencia, un componente de alto nivel es simplemente una función que toma un componente y lo convierte en otro componente con comportamiento distinto [4].

Los componentes de alto nivel, como tal, no son una capacidad de React, sino simplemente un patrón que surje naturalmente por el paradigma de composición que usa React.

El listado 3 ejemplifica el uso de componentes de alto nivel usando el código de https://github.com/kentor/react-click-outside, que agrega un evento que se desata cuando el usuario da click fuera del componente.

Listado 3. Componente de alto nivel.

Estilos

Como hemos comentado, el paradigma de React consiste en utilizar Javascript (incluyendo JSX) para controlar tanto el comportamiento como la lógica de presentación de cada componente. Pero entonces, ¿cómo manejamos la apariencia de los elementos HTML?

Dado que la mayoría de los desarrolladores web está acostumbrado a tener hojas CSS externas y controlar la apariencia de los elementos HTML definiendo clases, esto también es posible en React. Solo hay un pequeño detalle, al invocar un componente HTML desde JSX en lugar de usar el atributo class debemos usar el atributo className (ej. <div className="SplitPane">). El problema con esta forma de hacer las cosas, es que nos esamos saliendo del paradigma de composición natural de React, y desaprovechamos las capacidades de Javascript para poder gestionar y modificar la apariencia de nuestros componentes.

Una vez que te sientas cómodo con el paradigma de React, va a haber casos en los que prefieras gestionar desde React mismo la apariencia de tus componentes. Una biblioteca popular para lograr este objetivo es styled-components [5], que permite escribir CSS dentro de JS usado una capacidad de ES6 llamada tagged template literals.

El listado 4 define un botón y su apariencia usando styled-components:

Listado 4. Botón con styled components.

En principio parece inútil definir atributos CSS de esta forma, pero debemos entender que el hecho de que al final sea JS, nos da ventajas para gestionar su comportamiento. Por ejemplo, como parte de la definición del botón podríamos incluir algo como:

color: ${props => props.primary ? 'blue' : 'red'};

Al final, usar styled-components es una estrategia más congruente con el paradigma de React, ya que como su nombre lo indica, estamos estilizando componentes, no elementos HTML.

Estados

Otro aspecto que se puede complicar en React es el manejo de estado de nuestros componentes (eg ON/OFF), que aun usando bibliotecas como Redux o MobX es muy verboso.

Una biblioteca en la que nos podemos apoyar para facilitar la gestión de estados es React PowerPlug [6]. Este es un conjunto de componentes y helpers que proveen distintos estados y lógica estándar que podemos utilizar en nuestros componentes. Esto reduce dramáticamente la cantidad de código que de otra manera deberíamos escribir.

Para entender las bondades de PowerPlug, consideremos el código necesario para operar el Toggle (activado/desactivado) de un checkbox. El listado 5a tiene como se definiría en React normal, mientras que el listado 5b tiene como se hace apoyándonos en PowerPlug.

Listado 5a. Toggle normal.

Listado 5b. Toggle con PowerPlug.

Conclusión

El ecosistema de React y JavaScript en general está en constante evolución. Lo mejor que puedes hacer como front-end developer es mantenerte al día y no quedarte con una sola herramienta; las ideas no se crean en el vacío, por lo que lo que aprendas hoy serán las bases de la herramienta  del mañana.

“La única constante es el cambio” —Heraclito

Referencias

1. https://nodejs.org/en/download
2. https://yarnpkg.com/lang/en/docs/install
3. https://github.com/facebook/create-react-app
4. https://reactjs.org/docs/higher-order-components.html
5. https://www.styled-components.com
6. https://github.com/renatorib/react-powerplug