Introducción a React (parte 1)

Hemos hablado ya varias veces en el blog sobre el nuevo stack de desarrollo para WordPress y la revolución que esto supone, tanto para la plataforma como para los desarrolladores que nos tenemos que reciclar. Hace no mucho, por ejemplo, publiqué una entrada explicando cómo usar el paquete @wordpress/scripts para extender Gutenberg y añadir un botón en su UI. Me encanta escribir este tipo de entradas porque me permiten hablar de cosas que conozco bien y con las que podemos aprender juntos.

Pero ese tipo de entradas, estos «tutoriales», tienen un problema… y es que creo que muchos de vosotros los seguís a pies juntillas sin entender muy bien qué está pasando. Sigues un tutorial y consigues el resultado esperado, pero falta que llegue ese momento de «¡ajá!», en el que todo encaja en tu cabeza y de repente entiendes por qué las cosas son como son.

Así que hoy me gustaría empezar una serie de entradas con una introducción a React para arrojar un poco de luz a todo el misticismo que lo rodea (especialmente si eres un novato en esta tecnología). Mi objetivo no es explicarte detalles técnicos ni entender las entrañas de React, sino todo lo contrario: quiero que entiendas por qué es como es y por qué las cosas se hacen como se hacen. Quiero que comprendas los principios que hay detrás de React. Quiero ayudarte a escribir mejor código.

Programación Funcional

Antes de hablar de React creo que merece la pena dedicar un par de minutos a hablar de la programación funcional, pues muchos de los frameworks que estamos viendo últimamente para crear interfaces de usuario se basan en ella. 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 creando y componiendo funciones. De entrada, puedes pensar que, bueno, la «programación» siempre se ha basado en crear funciones, ¿no? Pues no exactamente.

Si piensas, por ejemplo, en la programación orientada a objetos, el paradigma es diferente y los programas se construyen creando y componiendo objetos. Funciones, no; objetos. Entes que aglutinan datos (campos o atributos) y métodos (procedimientos) para manipularlos.

Parecido, pero diferente, ¿no crees?

Entonces, ¿qué es lo que hace especial a la programación funcional? Pues hay varios aspectos que caracterizan a la programación funcional: funciones puras, transparencia referencial, inmutabilidad, funciones como entidades, funciones de alto nivel, etc, y te recomiendo que los estudies por tu cuenta (o, si es algo que te interesa, dímelo en los comentarios y lo trataremos en otras entradas). Pero si tuviera que escoger uno es, precisamente, el hecho de que sus funciones son puras.

Funciones Puras

Una de las cosas que hace diferente a la programación funcional de los demás paradigmas de programación son, precisamente, sus funciones, que, como te decía, son «puras». Una función es pura si se cumplen las siguientes dos condiciones:

1. La función siempre produce el mismo resultado cuando se le dan los mismos argumentos
2. La función no produce efectos secundarios

Por ejemplo, esto 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 efectos secundarios (como modificar una variable global o escribir en la consola).

Pero esto tampoco es una función pura:

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

porque parte del resultado es aleatorio. Cada vez que llamo a createElement con un mismo nombre, el resultado que obtengo es un objeto diferente, pues el atributo id del mismo se genera a través de Math.random.

Si te fijas, definir las funciones como puras las acerca al sentido matemático de lo que entendemos por una «función»: dada una entrada concreta, obtenemos siempre el mismo resultado y la función existe únicamente para obtener ese resultado, nada más.

Nelio Forms

Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.

Wajari Velasquez

WordPress.org

Descarga gratis

Versión premium

Componentes en React

Ahora que ya sabes lo que es una función pura en el paradigma de programación funcional, dejemos atrás la teoría y centrémonos en lo que te interesa: React. Tal y como puedes leer en su documentación, React es una librería JavaScript para crear interfaces de usuario a través de pequeñas piezas de código llamadas «Componentes».

¿Y qué es un componente? Pues esto:

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>
    );
  }
}

Espera, espera, espera… Te acabo de soltar un rollo sobre programación funcional y lo primero que vemos es ¡¿programación orientada a objetos?!

Tienes razón, mal empezamos. Pero fíjate un segundo en lo que está haciendo exactamente este pequeño ejemplo de código. Básicamente solo tenemos un método (render) que siempre pinta la misma lista de la compra. Y el componente solo tiene una parte variable: this.props.name. Es decir, hemos implementado algo muy sencillo como una clase, con métodos, propiedades internas, etc.

Si intentas entender qué está haciendo este código a un nivel abstracto verás que es algo muy sencillo:

1. El componente recibe un nombre. No vemos explícitamente cómo lo recibe, pero lo intuimos porque vemos que usa un atributo propio de la clase this.props.name.
2. El método render de este componente se encarga de pintar una lista de la compra que, en este sencillo ejemplo, siempre tiene los mismos tres elementos: Instagram, WhatsApp y Oculus.
3. Pero, ¡ojo!, el título de la lista de la compra depende de la propiedad de la que acabamos de hablar (this.props.name).

Es decir, estamos encapsulando en un componente algo que toma un valor (un name) y que únicamente sirve para generar un HTML (a través de render). Y dado el mismo valor, siempre genera el mismo HTML…

Componentes Funciones en React

Vaya, parece que acabamos de definir el comportamiento de una función pura, aunque lo tenemos expresado como una clase. ¿Podemos pasar de un paradigma a otro?

¡Pues claro que sí! La clase anterior, excesivamente complicada, se puede describir de forma mucho más sencilla como una función pura 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>
);

¡Fantástico! Esto es lo más sencillo que podía imaginar como programador: parece que en todo* componente react, entran props y sale HTML.

Y esta es, precisamente, la primera lección que debes memorizar: tu componente React es una función pura: entran props, sale HTML. Un componente no puede ejecutar una función asíncrona para ir a buscar datos (o lo que es lo mismo, no puede tener efectos secundarios). Tampoco puede modificar ninguna de las propiedades que le entran (porque, recordemos, en programación funcional la inmutabilidad es importante).

Pero entonces, si un componente es así de simple… si es así de tonto… ¿Cómo podemos hacer nada útil? Pues sigue atento a esta serie, porque en la próxima entrada te lo explico.

Imagen destacada de Josiah Weiss en Unsplash.