Introducción a React, parte 1

Ya hemos hablado en este blog sobre la nueva pila de desarrollo de WordPress y la revolución que conlleva, tanto para la plataforma en sí como para los desarrolladores que ahora se ven obligados a aprender cosas nuevas. No hace mucho, por ejemplo, publiqué una publicación en la que explicaba cómo usar el paquete @wordpress/scripts para extender Gutenberg y agregar un botón a su interfaz de usuario. Como autora, me encanta escribir tutoriales porque puedo compartir algo que sé bien y siento que podemos aprender todos juntos.

Desafortunadamente, creo que los tutoriales esconden un gran problema: muchos de ustedes los siguen a ciegas sin entender realmente lo que está sucediendo, incluso si al final obtienen el resultado correcto. Pero la mayoría de los tutoriales carecen del "momento aha", el momento de perspicacia y comprensión en el que todo hace clic en tu cabeza y comprendes por qué las cosas son como son.

Así que hoy me gustaría comenzar una serie de publicaciones con una introducción a React para arrojar un poco de luz. Quiero desmitificar React y ayudarte a mejorar rápidamente. Quiero que entiendas por qué React es como es y por qué las cosas son como son. Quiero que entiendas los principios detrás de React. Quiero que escribas mejor código.

Programación funcional

Antes de hablar sobre React, creo que vale la pena dedicar un par de minutos a hablar sobre programación funcional , ya que muchos de los marcos que usamos hoy se basan en sus principios. Y React (junto con Redux) no es una excepción.

La programación funcional es un paradigma de programación en el que los programas se construyen aplicando y componiendo funciones. Puede pensar que, bueno, la "programación" siempre se ha tratado de construir y ejecutar funciones, ¿verdad? No exactamente. Tengan paciencia conmigo.

Considere, por ejemplo, la programación orientada a objetos. En OOP, los programas se construyen creando y componiendo objetos, que pueden contener datos, en forma de atributos o campos, y código, en forma de métodos o procedimientos. ¿Ver? No funciones, sino objetos.

Entonces, ¿qué hace que la programación funcional sea especial? Bueno, hay varios aspectos que caracterizan la programación funcional: funciones puras, transparencia referencial, inmutabilidad, funciones como ciudadanos de primer orden, funciones de orden superior, etc., y te recomiendo que los estudies por tu cuenta (o, si quieres, a, podemos hablar de ellos en futuros posts). Pero, para acortar esta publicación, hoy simplemente nos centraremos en una función...

Funciones puras

Una de las cosas que hace que la programación funcional sea diferente de otros paradigmas de programación es cómo define y trabaja con funciones. En FP, las funciones son puras, lo que significa que cumplen las siguientes dos condiciones:

1. Siempre produce el mismo resultado cuando se le dan los mismos argumentos.
2. No tiene efectos secundarios

Por ejemplo, esta no es una función pura:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

porque tiene varios efectos secundarios. Es decir, modifica una variable global (efecto secundario 1) y envía un texto a la consola (efecto secundario 2).

Otra función impura es la siguiente:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

porque, como puedes ver, no siempre da el mismo resultado. Cada vez que uno llama a createElement con un nombre determinado, el resultado que obtiene es diferente. Después de todo, el atributo id se genera a través Math.random ...

Las funciones puras son geniales por varias razones: son fáciles de entender y no contienen sorpresas. Les das algunas entradas, te devolverán una salida específica. Y esto es genial, porque esta forma de definir las funciones las acerca a nuestra comprensión matemática de lo que es una función: asigna cada entrada a una salida bien definida.

Componentes en React

¿Qué tienen que ver las funciones puras y la programación funcional? Bueno, veamos si podemos derivar su relación...

Como puede leer en su documentación, React es una biblioteca de JavaScript para crear interfaces de usuario a través de pequeños fragmentos de código llamados "Componentes". Este es el primer componente que verá en su tutorial:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Bastante simple e incluso autoexplicativo, ¿no?

¡Pero espera un segundo! Esto no parece en absoluto una "función pura". De hecho, esta es una clase implementada mediante programación orientada a objetos.

Sí, tienes toda la razón. Esto no se ve bien... ¿perdimos nuestro tiempo hablando de programación funcional?

Eche un vistazo al componente anterior de nuevo. Cómo se ve? ¿Qué hace? Bueno, es una clase con un solo método ( render ) que genera algo de HTML para representar una lista de compras. Esta lista de compras es siempre la misma (duh, es un ejemplo simple), pero tiene una parte variable: su título, donde la clase parece usar una propiedad interna this.props.name .

Entonces, si aún no sabemos nada sobre React y solo miramos el código e intentamos inferir qué hace, vemos lo siguiente:

1. El componente puede recibir un "nombre". No sabemos exactamente cómo recibe este nombre, pero sabemos que sí. Después de todo, this.props.name es una buena pista.
2. El método de render produce algo de HTML para generar una lista (estática) de "elementos de compras": Instagram , WhatsApp y Oculus .
3. El HTML resultante no es 100% estático; utiliza un "nombre" que puede variar según el valor de una propiedad.

¿Ves a dónde voy?

Componentes Funciones en React

¡Acabamos de describir una función pura! Tenemos un componente que toma un valor ( name ) y produce una salida bien definida (el HTML). ¿Significa esto que podemos alejarnos de OOP e implementar el componente anterior como una función?

¡Por supuesto! La clase demasiado complicada que acabamos de ver se puede reescribir como una función pura más simple y fácil de entender que recibe props y devuelve HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Esto es exactamente lo mismo que teníamos, pero mucho, mucho más simple. Incluso me atrevería a decir que es lo más simple que puedo implementar como programador: un componente React no es más que una función que toma algunos accesorios y produce un HTML .

Y esta es precisamente la primera lección que debe aprender: su componente React es una función pura : entrada de accesorios, salida HTML. Un componente no debe ejecutar funciones asincrónicas para obtener datos (ya que esos son efectos secundarios). Un componente tampoco puede modificar las propiedades que recibe (inmutabilidad).

Entonces, una vez más: un componente simplemente toma algunos accesorios y produce la salida HTML. Período.

Pero espera, si un componente es tan simple, ¿cómo podemos hacer algo útil con él? ¡Pues estad atentos, porque de esto hablaremos en el próximo post!

Imagen destacada de Josiah Weiss en Unsplash.