Vamos a hacer un hook que se encargará de detectar si el usuario tiene el modo oscuro activo.

Primero el componente que mostrará el resultado:

const App = () => {
  return (
    <p>Is dark?</p>
  );
}

Luego lo editaremos para que use el hook que creamos ya mismo.

const useIsDark = () => {

  // El hook mantiene un state con el valor que tendrá que devolver
  const [isDark, setIsDark] = useState(false);
  
  // Usa un useEffect para crear un listener y limpiarlo cuando sea
  // necesario.
  useEffect(() => {
    const match = window.matchMedia('(prefers-color-scheme: dark)');
    const test = e => setIsDark(e.matches);
    match.addEventListener('change', test);
    return () => match.removeListener(test);
  }, []);
  
  return isDark;
}

Como se ve ahí, una parte fundamental de los hooks es que pueden hacer uso de herramientas de React, como useEffect o useState (de los que ya hablamos en su artículo), y esa es la diferencia principal que hay entre una función normal y hook. Lo único que tenemos que tener en cuenta es que los hooks deben empezar por la palabra use.

Para poder utilizar este hook, sólo hay que agregar una linea al componente App, que quedaría así:

const App = () => {

  const isDark = useIsDark();
  
  return (
    <p>Is dark? {isDark ? '' : ''}</p>
  );
}

Realmente no hay mucho más que explicar. Los hooks son una herramienta sencilla de crear y de utilizar, lo difícil es pensar qué hooks tienes que hacer.

Os dejo el código funcionando en Codepen:

See the Pen by Josep Viciana (@emmgfx) on CodePen.

Foto de Joetography en Pexels

La entrada Cómo crear hooks propios en React se publicó primero en EMMGFX.

El hook de estado

Lo primero que habría que hacer es importarlo. Ten en cuenta que en las últimas versiones no hace falta importar React en cada componente, así que sería algo así:

import { useState } from 'react';

¿Por qué useState? porque la norma dice que si es un hook empieza por «use», y como básicamente sirve para gestionar un state, no hay más que hablar.

Usarlo es casi igual de sencillo que importarlo. Para ilustrarlo voy a usar el ejemplo de siempre: un contador.

const [count, setCount] = useState(0);

¿Identificas la sintaxis? El método useState retorna un array con dos valores, de manera que podemos desestructurarlo. Ya sé que al principio puede parecer magia, pero qué bien se lee, ¿verdad? Y para terminar, el 0 que le estamos mandando como parámetro es el valor inicial de ese estado.

Un ejemplo rápido pero completo:

import { useState } from "react";

const App = () => {

  const [count, setCount] = useState(0);

  return (
    <>
      <h1>You made {count} clicks</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </>
  );
};

Y listo. Tal y como yo lo veo, es más fácil que el this.setState de las clases. Lo malo es que siempre hay un pero, y en este caso es importante: no hay callback y los setters son asíncronos, así que hay que tener cuidado con esto.

Siguiendo el ejemplo anterior, vamos a introducir el siguiente hook, que también es de los más usados: useEffect.

El hook de «efecto»

Imagino que todo empieza a parecer casi tan confuso como interesante . Con useEffect podemos enterarnos de cuando hay cambios. Esto es muy interesante, porque sólo con el método useEffect podemos hacer lo mismo que con componentDidMount, componentDidUpdate y componentWillUnmount. Sé que al principio es confuso, pero dale una oportunidad y verás que tiene bastante sentido.

Vamos a crear otro state en el que mantendremos un booleano indicando si el contador ha sido incrementado o no, simplemente así:

const [increased, setIncreased] = useState(false);

Y el componente no retornará siempre el mismo h1, le diremos que si no se ha incrementado nunca muestre otra cosa:

{ increased ?
  <h1>You made {count} clicks</h1> : 
  <h1>Not clicked yet</h1>
}

Ahora bien, ¿cómo actualizamos el valor de increased? Podríamos hacerlo «escuchando» los cambios en counter. Y ahí aparece useEffect, que recibe una función en el primer parámetro y un array de dependencias, estas dependencias son las que, en caso de cambiar, dispararán la función del primer parámetro.

useEffect(() => {
  setIncreased(true);
}, [count]);

Ahora deberíamos tener un código más o menos así:

import { useState, useEffect } from "react";

const App = () => {

  const [count, setCount] = useState(0);
  const [increased, setIncreased] = useState(false);

  useEffect(() => {
    setIncreased(true);
  }, [count]);

  return (
    <>
      { increased ?
        <h1>You made {count} clicks</h1> : 
        <h1>Not clicked yet</h1>
      } 
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </>
  );
};

Esto sería casi correcto y está a punto de funcionar. ¿Por qué no funciona? Porque en cuanto el componente se monta hace el primer setCount, que rebota en ese useEffect y setea increased a true.

Ahora deberíamos conocer si ese efecto está ejecutandose por el montado o por un cambio «real» en count, lo que nos lleva diréctamente al siguiente hook: useRef.

El hook de referencia

Y con este vamos a ir terminando, no desesperes. El hook useRef sirve para mantener un valor durante la vida del componente, es decir, que no se reiniciará en cada render. Su uso más habitual no es este que voy a darle ahora, pero es muy adecuado y viene bien para enlazar estos 3 hooks. Vamos allá:

Lo primero sería crear una referencia en la que almacenaremos un booleano con el que sabemos si estamos en la primera ejecución o no.

const firstUpdate = React.useRef(true);

El segundo paso sería utilizar de nuevo el hook useEffect para actualizar el valor de firstUpdate cuando fuera necesario.

useEffect(() => {
  if(firstUpdate.current) {
    firstUpdate.current = false;
    return;
  }
}, []);

// Fíjate en el array de dependencias. Como ves está vacío, 
// eso significa que tendrá un comportamiento similar a componentDidMount
// y sólo se ejecutará en el primer renderizado, lo cual ya nos va bien.

Como ves, en firstUpdate no se guarda directamente el valor, si no que está en su propiedad current.

Para terminar sólo habría que actualizar el efecto anterior para que sólo modifique el estado increased en caso de que no sea el primer render.

useEffect(() => {
  if(!firstUpdate.current){
    setIncreased(true); 
  }
}, [count]);

Y ahora sí, ya estaría terminado y para ejemplificarlo en condiciones un Codepen en el que se puede ver el resultado y el código final.

See the Pen by Josep Viciana (@emmgfx) on CodePen.

Photo by Anete Lusina from Pexels

La entrada Hooks para componentes funcionales se publicó primero en EMMGFX.

Como este articulo no incluye gestión del ciclo de vida ni estados porque esos puntos tienen un post dedicado, aprovecho para enlazarlo con el anterior artículo sobre la desestructuración.

Para empezar, lo más sencillo:

const Greeting = () => {
  return (
    <p>Hello world</p>
  )
}

Podría simplificarse incluso más (const Greeting = () => <p>Hello world</p>) pero como sabemos que vamos a ir ampliándolo no tendría mucho sentido ir a una versión tan reducida.

Cómo recibir props

Voy a poner tres ejemplos para ver las opciones más comunes: recibir el objeto props, desestructurarlo y aplicarle valores por defecto.

El único parámetro de la función es el objeto props, y es opcional.

const Greeting = (props) => {
  return (
    <p>Hello {props.name}</p>
  )
}

Normalmente sabremos los valores que vamos a recibir, así que sería una buena práctica desestructurar ya que serviría para, de alguna manera, describir qué opciones deberían estar disponibles.

const Greeting = ({ name }) => {
  return (
    <p>Hello {name}</p>
  )
}

Y cuando estamos desestructurando podemos describir valores por defecto:

const Greeting = ({ name = "Anonymous" }) => {
  return (
    <p>Hello {name}</p>
  )
}

Cuestiones importantes

Un componente funcional es básicamente esto y no necesita nada más, pero hay que tener en cuenta algunas cosas. Estos componentes no «viven» como una instancia que se mantiene en el tiempo; cada vez que hay un cambio (props o state, que veremos más adelante) se vuelve a ejecutar y todo el código se repite. Esto al principio suele dar muchos problemas de exceso de renderizados o comportamientos inesperados.

Es por eso que dependen muchísimo de los hooks. Si no te suenan no te preocupes, a partir de ahora los verás por todos lados, empezando por el próximo artículo sobre los hooks principales.

Photo by Devanshu Damle on Unsplash

La entrada Componentes funcionales en React se publicó primero en EMMGFX.

Para empezar hay que tener en cuenta que los componentes de clase se escriben utilizando clases de ES6 y que deben extender la clase Component de React. Los componentes de clase son capaces de gestionar su propio estado y ciclo de vida, mientras que los funcionales teóricamente no, aunque podremos sobrellevarlo y casi parece que puedan.

Nada más fácil para entender como funciona un componente de clase que un ejemplo:

// Importamos React
import React from "react";

// Creamos una nueva clase extendiendo Component
class ExampleComponent extends React.Component {

  // El constructor, opcional
  constructor(props) {
    super(props);
    this.state = {}
  }

  // Existen métodos para controlar el ciclo de vida
  componentDidMount() {
    console.log("componentDidMount");
  }


  // Método render, el único obligatorio
  render() {
    return (
      <div>
        <h1>Example Component</h1>
        <p>This is a class component</p>
      </div>
    );
  }

}

En el ejemplo sólo he utilizado el método componentDidMount para la gestión del ciclo de vida, pero hay otros: esencialmente componentDidUpdate y componentWillUnmount. El primero se ejecuta cuando hay cambios en el state o las props, y el segundo, quizá*, antes de desmontarse el componente.

* No puedes depender de ese método para funciones críticas (notificar la salida al servidor, por ejemplo) ya que cerrar la pestaña de alguna manera también desmontaría el componente y no ejecutaría ese método.

Cómo usar componentDidUpdate

Dentro de componentDidUpdate podemos utilizar dos objetos, prevProps y prevState. Con ellos podrás buscar y analizar las diferencias para valorar lo que quieres hacer. Por ejemplo:

componentDidUpdate(prevProps, prevState) {

  if (this.props.isOpen !== prevProps.isOpen) {
    // Sabemos que isOpen ha cambiado
    if (this.props.isOpen) {
      // Y que ha cambiado de false a true...
    } else {
      // ...o que ha cambiado de true a false
    }
  }

}

Usar state y props

En los componentes de clase tenemos el objeto this, y es desde ahí desde donde podemos leer tanto el state como las props.

render() {
  return (
    <div>
      <h1>Example Component</h1>
      { this.state.loggedIn &&
        <p>Hola {this.props.name}</p>
      }
    </div>
  );
}

Actualizar el state

Mientras que las props no se pueden modificar por motivos obvios, el state sí, se hace a través del método setState (que también tenemos en this).

constructor(props) {
  super(props);
  this.state = {
    counter: 0,
  }
}

increaseCounter() {
  this.setState({
    counter: this.state.counter + 1,
  });
}

render() {
  return (
    <div>
      <h1>Counter: {this.state.counter}</h1>
      <button onClick={this.increaseCounter}>Increase</button>
    </div>
  );
}

El método increaseCounter también podría reducirse usando funciones flecha.

increaseCounter = () => this.setState({
  counter: this.state.counter + 1,
});

Cuando usar un componente de clase

Pues depende del proyecto y del componente. Mi consejo es que intentes no usarlos, porque lo recomendado en las últimas versiones de React es que se usen funcionales y hooks, que además suelen ser más sencillos de escribir y hay más documentación en internet.

Pero no hay una diferencia técnica tan importante, puedes usar los unos, los otros, o incluso tenerlos mezclados (abro paraguas). Si estás aprendiendo y tienes tiempo, te recomiendo que intentes escribir algunos componentes primero con clases y luego los conviertas a funcionales para poder ver sus diferencias y handicaps.

Photo by Ryan Quintal on Unsplash.

La entrada Componentes de clase en React se publicó primero en EMMGFX.

Si al principio te suena mal o te parece complicado no te asustes: es muy sencillo. Tan sencillo que como digo, las personas que se están iniciando lo confunden. Pero antes de empezar a explicar cómo hacer determinadas cosas, explicaré un poco de base para que luego todo se entienda más fácil.

En 3 puntos:

1. Cuando se escribe JSX en realidad estás escribiendo JavaScript.
2. Un proceso de compilado se encargará de convertirlo en algo más parecido al JavaScript que ya conoces, el que no parece HTML.
3. Este código compilado será el que se encargue de crear y gestionar elementos del DOM, es decir, el HTML real.

Un ejemplo:

// Este código:
const element = <p>Lorem Ipsum</p>;

// Una vez compilado acabaría así:
const element = React.createElement('p', {}, "Lorem Ipsum");

A partir de ahí React se encargará de pasarlo a su DOM virtual y de ahí al DOM real. Pero de todo eso te puedes desentender.

Palabras reservadas y camelCase

Debes tener en cuenta que al estar escribiendo JavaScript, hay ciertas discrepancias respecto a HTML con las que te vas a encontrar, como son el uso de palabras reservadas o el uso de camelCase.

Por ejemplo, no puedes escribir <div class="...">, ya que class es una palabra reservada de JavaScript, en su lugar se utiliza <div className="...">, de hecho si estás tratando con el DOM directamente tiene este mismo nombre y por el mismo motivo. De la misma forma, en lugar de escribir tabindex="" escribirás tabIndex="" siguiendo el estilo de JavaScript en lugar de HTML.

Tenlo en cuenta también si trabajas con SVG’s ya que es código que normalmente no escribirás tu y está lleno de palabras inválidas como fill-rule o stroke-width, entre muchas otras, que tendrás que cambiar por fillRule y strokeWidth.

Como incluir una expresión

Es tan sencillo que lo explico directamente con algunos ejemplos:

// Podemos poner simplemente un string:
const name = "John";
const greetings = <p>Hello {name}</p>;

// Una función:
const name = "John";
const phrase = (name) => `Hello ${name}`;
const greetings = <p>{phrase(name)}</p>;

// Unas sumas sencillas:
const userNotifications = 40;
const systemNofitications = 2;
const alert = <p>You have { userNotifications + systemNotifications } notifications</p>

// O mucho más:
const notifications = [
  { id: 1, text: "Lorem Ipsum" },
  { id: 2, text: "Dolor Sit Amet" },
  ...
];

const list = <ul>{
  notifications.map((notification) => {
    return <li key={notification.id}>{notification.text}</li>);
  });
}</ul>

Si estos ejemplos se han entendido más o menos y no te parecen una cosa extrañísima, ya lo tienes casi todo. En unas horas de práctica lo dominarás. No tienes que preocuparte de nada más, ni siquiera de problemas de inyección de código y demás, ya que JSX se encarga de escapar todo lo que procesa.

Ejemplos prácticos

Podrías incluir un elemento de forma condicional así:

{ showHeader && <Header /> }

O podrías pasar un parámetro (o prop, como veremos en siguientes artículos) a ese mismo header así:

<Header sticky={false} />

Aunque ya se ha visto en un ejemplo anterior, pongo otro de como podrías mostrar un listado:

const TasksList = () => {
  const tasks = ['task 1', 'task 2', 'task 3'];
  return (
    <ul>
      { tasks.map((text) => <li key={<meta charset="utf-8">text}>{<meta charset="utf-8">text}</li>) }
    </ul>
  );
}

Puedes usar condicionales ternarios, pero con cuidado no vayas a crear un código poco legible.

const logged = false;
//...
<p>{ logged ? "No has iniciado sesión" : "Sesión iniciada }</p>

No puedes usar un switch directamente en JSX, pero sí podrías aprovechar los ternarios para algo parecido:

<p>
  {
    code === 400 ? "Bad Request" :
    code === 401 ? "Unauthorized" :
    code === 402 ? "Payment Required" :
    code === 403 ? "Forbidden" :
    code === 404 ? "Not found" :
    `Unknown error (${code})`
  } 
</p>

Conclusiones

Como ves, aunque hay que habituarse, no implica ninguna complejidad ni debería suponer ningún problema controlarlo completamente. Mi consejo en todo caso, es que intentes repasar el uso de operadores modernos, como &&, ?? y ||, porque te ayudarán a entender mejor el código de los demás y escribir un código más sencillo.

Photo by Ferenc Almasi on Unsplash.

La entrada Qué es JSX y como usarlo se publicó primero en EMMGFX.

Antes de nada, los scopes

Hay 3 tipos de scopes, que dicho de una forma más natural, vendría a ser el lugar en el que viven y son accesibles las variables. Existe el global scope, el local scope y el block scope. Tanto let como const forman parte de este último.

El global scope es el que se puede escribir y leer en cualquier lugar, y viviría en el objeto window. Por ejemplo:

(function test(){
  name = "Barb"; // Ojo, no uso la palabra var
})();
console.log(window.name); // Barb

Imagina lo peligroso que es esto, tienes variables que se pueden sobreescribir y no sabes ni por dónde te van a venir los palos.

El local scope contendría las variables dentro de una función, y para usarlo se escribiría var delante.

(function test(){
  var name = "Barb";
})();
console.log(window.name); // undefined (name sólo existe dentro de test()

El block scope vendría a ser el comportamiento que habitualmente esperarías. Es parecido al local scope pero ligeramente más restrictivo ya que restringe a cualquier bloque delimitado por {}, no sólo funciones.

(function test(){

  let letters = ["B", "i", "g", "g", "i", "e"];
  let name = "";

  for(let i = 0; i < letters.length; i++){
    // Dentro de este bloque tengo acceso tanto a name como a i
    name += letters[i];
  }

  // En este bloque ya no tengo acceso a i, sólo a letters y name.
  console.log(letters); // ["B", "i", "g", "g", "i", "e"]
  console.log(name); // "Biggie"
  console.log(i); // Uncaught ReferenceError: i is not defined
})();

¿Qué pasaría si en este for hubiéramos definido la i del bucle con var en lugar de let? Pues que el último console.log no fallaría, mantendríamos acceso a él desde ahí (y podríamos modificarlo). ¿Y si hubiéramos omitido usar var siquiera? El desastre: tendríamos acceso a esa i en cualquier lugar del código.

Cuando usar const

Usamos const cuando el valor de la variable no se puede reasignar. Por ejemplo si decimos que const name = "Poppy";, desde ese momento no podremos volver a definirlo, ni volviendo a usar la palabra clave const ni sin ella, de manera que name = "Barb"; daría un error como este:

Uncaught TypeError: Assignment to constant variable.

Esto no significa que sea inmutable. La inmutabilidad es otro concepto interesante pero que no explicaré de momento, quiero mantener esto sencillo. El valor podría mutar en una situación como esta:

const characters = ["Poppy", "Barb", "Branch"]; // Define un array
characters.push("Mr. Dinkles"); // Agrega un nuevo índice, sin problemas
console.log(characters) // ["Poppy", "Barb", "Branch", "Mr. Dinkles"]

¿Cuál es la ventaja de usar const? Principalmente que no sobreescribirás el valor por error llevándote a un escenario impredecible en el que puedes no saber de dónde sale, o dicho de otra forma: el código se vuelve más legible. Esta es la ventaja humana, pero también hay una ventaja técnica: Se mejoran los consumos de memoria, aunque en realidad eso es algo menos relevante y se me escapa muchísimo.

Cuando usar let

Cuando vayas a necesitar modificar el valor de una variable. Para poner un ejemplo volvamos al bucle anterior.

for(let i = 0; i < letters.length; i++){
  // La i se define con let, así que es modificable y vive
  // dentro de este bloque.
}

for(const i = 0; i < letters.length; i++){
  // Si la definimos con const, cuando intentamos incrementar
  // su valor para pasar a la siguiente iteración, dará un error:
  // Uncaught TypeError: Assignment to constant variable.
}

Otro ejemplo habitual sería algo así:

let string = "Esta cadena ? es modificable";
string = string.replace("?", "sí");
console.log(string); // "Esta cadena sí es modificable"

const string = "Esta cadena ? es modificable";
string = string.replace("?", "no");
console.log(string); // Uncaught TypeError: Assignment to constant variable

Conclusiones

• Puedes usar const por defecto, y en caso de necesitar modificarlo y cambiar a let.
• Raramente utilizarás var, y ante la duda no deberías usarlo.
• Definir una variable sin declararla es algo peligroso.

Photo by Raymond Lee on Unsplash

La entrada Qué son los scopes y las variables let, const y var se publicó primero en EMMGFX.