Juan C. Guaña - freeCodeCamp.org

Cómo recuperar datos en React: hoja de trucos + ejemplos

Juan C. Guaña — Tue, 13 Aug 2024 15:33:39 +0000

Artículo original: How to Fetch Data in React: Cheat Sheet + Examples

Hay muchas formas de recuperar datos de una API externa en React. Pero, ¿cuál debería utilizar para sus aplicaciones en 2021?

En este tutorial, revisaremos cinco de los patrones más utilizados para recuperar datos con React realizando una solicitud HTTP a una API REST.

No solo cubriremos cómo recuperar datos, sino también cómo manejar mejor la carga y el estado de error al recuperar nuestros datos.

¡Empecemos!

Para todos estos ejemplos, usaremos un endpoint del popular JSON Placeholder API, pero puedes usar su propia API que haya creado (como una API de Node con Express) o cualquier otra API pública.

1. Cómo Recuperar Datos en React Usando la API Fetch

La forma más accesible de recuperar datos con React es utilizar la API Fetch.

Fetch API es una herramienta integrada en la mayoría de los navegadores modernos en el objeto window ( window.fetch) y nos permite realizar solicitudes HTTP muy fácilmente utilizando promesas de JavaScript.

Para realizar una solicitud GET simple con fetch solo necesitamos incluir la URL del endpoint al que queremos realizar nuestra solicitud. Queremos realizar esta solicitud una vez que nuestro componente React se haya montado.

Para hacerlo, realizamos nuestra solicitud dentro del hook useEffect y nos aseguramos de proporcionar un arreglo de dependencias vacía como segundo argumento, de modo que nuestra solicitud solo se realice una vez (asumiendo que no depende de ningún otro dato en nuestro componente).

En el primer callback .then(), verificamos si la respuesta fue correcta ( response.ok). Si es así, devolvemos nuestra respuesta para pasar a la siguiente, luego volvemos a llamar como datos JSON, ya que esos son los datos que obtendremos de nuestra API de usuario aleatorio.

Si no es una respuesta correcta, asumimos que hubo un error al realizar la solicitud. Al usar fetch, necesitamos manejar los errores nosotros mismos, por lo que lo arrojamos responsecomo un error para que nuestro callback catch lo maneje.

Aquí, en nuestro ejemplo, colocamos nuestros datos de error en el estado con setError. Si hay un error, devolvemos el texto "¡Error!".

Tenga en cuenta que también puede mostrar un mensaje de error del objeto de error que pusimos en estado usando error.message.

Usamos el callback .finally() como función que se llama cuando nuestra promesa se resolvió exitosamente o no. En él, lo configuramos loadingen falso, para que ya no veamos nuestro texto de carga.

En su lugar, vemos nuestros datos en la página si la solicitud se realizó correctamente o si hubo un error al realizar la solicitud.

2. Cómo Recuperar Datos en React Usando Axios

El segundo enfoque para realizar solicitudes con React es utilizar la librería axios.

En este ejemplo, simplemente revisaremos nuestro ejemplo de Fetch instalando primero axiosusando npm:

npm install axios

Luego lo importaremos en la parte superior de nuestro archivo de componente.

Lo que axios nos permite hacer es usar exactamente la misma sintaxis de promesa que fetch, pero en lugar de usar nuestra devolución de llamada primero y luego para determinar manualmente si la respuesta es correcta y arrojar un error, axios se encarga de eso por nosotros.

Además, nos permite en esa primera devolución de llamada obtener los datos JSON de response.data.

Lo conveniente de usar axios es que tiene una sintaxis mucho más corta que nos permite reducir nuestro código e incluye muchas herramientas y características que Fetch no tiene en su API.

Todas estas razones son las que se han convertido en la librería HTTP de referencia para los desarrolladores de React.

3. Cómo recuperar datos en React Usando la Sintaxis async/await

En ES7, fue posible resolver promesas utilizando la sintaxis async / await.

El beneficio de esto es que nos permite eliminar los callback .then(), .catch()y .finally() simplemente recupera nuestros datos resueltos asincrónicamente como si estuviéramos escribiendo código síncrono sin ninguna promesa.

En otras palabras, no tenemos que depender de devoluciones de llamada cuando usamos async/await con React.

Tenemos que ser conscientes del hecho de que cuando usamos useEffect, la función de efecto (el primer argumento) no puede convertirse en una async función.

Si echamos un vistazo al error de linting que nos da React si estábamos usando Create React App para construir nuestro proyecto, se nos dirá que esta función no puede ser asincrónica para evitar condiciones de carrera.

Como resultado, en lugar de hacer que esa función sea asíncrona, simplemente podemos crear una función asíncrona separada en nuestro componente, a la que podemos llamar sincrónicamente. Es decir, sin la palabra clave await delante.

En este ejemplo, creamos una función asíncrona llamada getData. Al llamarlo sincrónicamente dentro de useEffect, podemos recuperar nuestros datos como esperábamos.

4. Cómo Recuperar Datos en React Usando un Hook de React Personalizado (useFetch)

Con el tiempo, es posible que te des cuenta de que se vuelve un poco tedioso y lleva mucho tiempo seguir escribiendo el hook useEffect con todo su texto estándar dentro de cada componente en el que desea recuperar datos.

Para reducir nuestro código reutilizado, podemos usar un hook personalizado como una abstracción especial, que podemos escribir nosotros mismos desde una librería de terceros (como estamos aquí, usando la librería react-fetch-hook).

Un hook personalizado que realiza nuestra solicitud HTTP nos permite hacer que nuestros componentes sean mucho más concisos. Todo lo que tenemos que hacer es llamar a nuestro hook en la parte superior de nuestro componente.

En este caso, recuperamos todos los datos, la carga y el estado de error que necesitamos para poder usar la misma estructura para nuestro componente que antes, pero sin tener que hacerlo con useEffect. Además, ya no necesitamos escribir imperativamente cómo resolver nuestra promesa de nuestra solicitud GET cada vez que queremos realizar una solicitud.

5. Cómo Recuperar Datos en React Usando la Librería React Query

El uso de hooks personalizados es una excelente manera de escribir solicitudes HTTP mucho más concisas para obtener nuestros datos y todo su estado relacionado. Pero una librería que realmente lleva la recuperación de datos con hooks al siguiente nivel es React Query.

React Query no solo nos permite usar hooks personalizados que podemos reutilizar en nuestros componentes de manera concisa, sino que también nos brinda una gran cantidad de herramientas de administración de estado para poder controlar cuándo, cómo y con qué frecuencia se obtienen nuestros datos.

En particular, React query nos proporciona un caché, que puede ver a continuación a través de React Query Devtools. Esto nos permite gestionar fácilmente las solicitudes que hemos realizado según el valor clave que especificamos para cada solicitud.

Para las solicitudes siguientes, nuestra consulta de datos de usuario aleatorios se identifica mediante la cadena 'random-user' (proporcionada como primer argumento de useQuery).

Al hacer referencia a esa clave, podemos hacer cosas poderosas como recuperar, validar o restablecer nuestras diversas consultas.

Si confiamos en nuestra solución de hook personalizada o useEffect, recuperaremos nuestros datos cada vez que se monte nuestro componente. En la mayoría de los casos, hacer esto es innecesario. Si nuestro estado externo no ha cambiado, idealmente no deberíamos tener que mostrar el estado de carga cada vez que mostramos nuestro componente.

React Query mejora enormemente nuestra experiencia de usuario al intentar servir nuestros datos desde su caché primero y luego actualizar los datos en segundo plano para mostrar los cambios si el estado de nuestra API ha cambiado.

También nos brinda un arsenal de herramientas poderosas para administrar mejor nuestras solicitudes de acuerdo con cómo cambian nuestros datos a través de nuestra solicitud.

Por ejemplo, si nuestra aplicación nos permitió agregar un usuario diferente, es posible que queramos recuperar esa consulta una vez que se agregó el usuario. Si supiéramos que la consulta se cambia con mucha frecuencia, es posible que deseemos especificar que se actualice aproximadamente cada minuto. O para actualizarse cada vez que el usuario enfoque la pestaña de su ventana.

En resumen, React Query es la solución ideal no solo para realizar solicitudes de manera concisa, sino también para administrar de manera eficiente y efectiva los datos que se devuelven para nuestras solicitudes HTTP en todos los componentes de nuestra aplicación.

¿Quiere conservar esta guía para consultarla en el futuro?

Aquí hay 3 ganancias rápidas que obtienes cuando obtienes la versión descargable:

Obtendrá toneladas de fragmentos de código copiables para reutilizarlos fácilmente en sus propios proyectos.
Es una excelente guía de referencia para fortalecer tus habilidades como desarrollador de React y para entrevistas de trabajo.
Puede llevar, utilizar, imprimir, leer y releer esta guía literalmente donde quiera.

Conviértete en un Desarrollador Profesional de React

React es difícil. No deberías tener que resolverlo tú mismo.

He reunido todo lo que sé sobre React en un solo curso para ayudarte a alcanzar tus objetivos en un tiempo récord:

Presentamos: El Bootcamp de React

Es el único curso que desearía tener cuando comencé a aprender React.

Haga clic a continuación para probar React Bootcamp usted mismo:

Haga clic para comenzar

Cómo usar Axios con React: La guía definitiva (2021)

Juan C. Guaña — Thu, 14 Jul 2022 20:47:50 +0000

Artículo original: How To Use Axios With React: The Definitive Guide (2021)

En esta guía, aprenderás cómo usar Axios.js con React usando toneladas de ejemplos del mundo real con hooks de React.

Veras por qué debería usar Axios como una biblioteca de obtención de datos, cómo configurarlo con React y realizar todo tipo de solicitud HTTP con él.

Luego, hablaremos de funciones más avanzadas, como la creación de una instancia de Axios para la reutilización, el uso de async-await con Axios para simplificar y cómo usar Axios como un hook personalizado.

Empecemos!

Tabla de contenido

¿Qué es Axios?

Axios es una biblioteca de cliente HTTP que le permite realizar solicitudes a un endpoint determinado:

Esto podría ser una API externa o su propio servidor backend Node.js, por ejemplo.

Al realizar una solicitud, se espera que su API realice una operación de acuerdo con la solicitud que realizaste.

Por ejemplo, si realizas una solicitud GET, esperas obtener datos para mostrar en su aplicación.

Por qué usar Axios en React

Hay varias bibliotecas diferentes que puede usar para realizar estas solicitudes, entonces, ¿por qué elegir Axios?

Aquí hay cinco razones por las que debería usar Axios como su cliente para realizar solicitudes HTTP:

Tiene buenos valores predeterminados para trabajar con datos JSON. A diferencia de alternativas como Fetch API, a menudo no necesita configurar sus encabezados. O realice tareas tediosas como convertir el cuerpo de su solicitud en una cadena JSON.
Axios tiene nombres de funciones que coinciden con cualquier método HTTP. Para realizar una solicitud GET, utiliza el método .get().
Axios hace más con menos código. A diferencia de Fetch API, solo necesita una devolución de llamada .then() para acceder a los datos JSON solicitados.
Axios tiene un mejor manejo de errores. Axios arroja 400 y 500 errores de rango por nosotros. A diferencia de Fetch API, donde debe verificar el código de estado y arrojar el error nosotros mismo.
Axios se puede utilizar tanto en el servidor como en el cliente. Si está escribiendo una aplicación en Node.js, tenga en cuenta que Axios también se puede usar en un entorno separado del navegador.

Cómo configurar Axios con React

Usar Axios con React es un proceso muy simple. Necesitas tres cosas:

Un proyecto React existente
Para instalar Axios con npm/yarn
Un endpoint API para realizar solicitudes

La forma más rápida de crear una nueva aplicación React es yendo a react.new.

Si tienes un proyecto React existente, solo necesita instalar Axios con npm (o cualquier otro administrador de paquetes):

npm install axios

En esta guía, utilizarás la API de JSON Placeholder para obtener y cambiar los datos de las publicaciones.

Aquí hay una lista de todas las diferentes rutas a las que puede realizar solicitudes, junto con el método HTTP apropiado para cada una:

Aquí hay un ejemplo rápido de todas las operaciones que realizarás con Axios y endpoint API: — recuperar, crear, actualizar y eliminar publicaciones:

Cómo hacer una solicitud GET

Para obtener datos o recuperarlos, realiza una solicitud GET.

Primero, vas a hacer una solicitud de publicaciones individuales. Si observa el endpoint, obtendrás la primera publicación del endpoint /posts:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    
      {post.title}
      {post.body}
    
  );
}

Para realizar esta solicitud, cuando se monta el componente, utiliza el hook useEffect. Esto implica importar Axios, usar el método .get() para realizar una solicitud GET a su endpoint y usar el callback .then() para recuperar todos los datos de respuesta.

Note that you can always find the requested data from the .data property in the response. Ten en cuenta que siempre puede encontrar los datos solicitados de la propiedad .data en la respuesta.

Cómo hacer una solicitud POST

Para crear nuevos datos, realiza una solicitud POST.

De acuerdo con la API, esto debe realizarse hacia el endpoint /posts. Si observas el código a continuación, verás que hay un botón para crear una publicación:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
      
    
  );
}

Cuando haces clic en el botón, llama a la función createPost.

Para realizar esa solicitud POST con Axios, utiliza el método .post(). Como segundo argumento, incluye una propiedad de objeto que especifica cómo deseas que sea la nueva publicación.

Una vez más, usa el callback .then() para recuperar los datos de respuesta y reemplaza la primera publicación que recibiste con la nueva publicación que solicitaste.

Esto es muy similar al método .get(), pero el nuevo recurso que deseas crear se proporciona como el segundo argumento después del endpoint del API.

Cómo hacer una solicitud PUT

Para actualizar un recurso determinado, realiza una solicitud PUT.

En este caso, actualizarás la primera publicación.

Para ello, volverás a crear un botón. Pero esta vez, el botón llamará a una función para actualizar una publicación:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
      
    
  );
}

En el código anterior, utilizaste el método PUT de Axios. Y al igual que con el método POST, incluye las propiedades que deseas que estén en el recurso actualizado.

Nuevamente, usando la devolución de llamada .then(), actualiza el JSX con los datos que se devuelven.

Cómo hacer una solicitud de ELIMINACIÓN

Finalmente, para eliminar un recurso, utiliza el método DELETE.

Como ejemplo, eliminaremos la primera publicación.

Ten en cuenta que no necesitas ningún segundo argumento para realizar esta solicitud:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
      
    
  );
}

En la mayoría de los casos, no necesita los datos que se devuelven desde el método .delete().

Pero en el código anterior, el callback .then() todavía se usa para garantizar que su solicitud se resuelva con éxito.

En el código anterior, después de eliminar una publicación, se alerta al usuario de que se eliminó correctamente. Luego, los datos de la publicación se borran del estado al configurarlos en su valor inicial de null.

Además, una vez que se elimina una publicación, el texto "No post" se muestra inmediatamente después del mensaje de alerta.

Cómo manejar errores con Axios

¿Qué pasa con el manejo de errores con Axios?

¿Qué pasa si hay un error al hacer una solicitud? Por ejemplo, es posible que transmita datos incorrectos, realizar una solicitud al endpoint incorrecto o tener un error de red.

Para simular un error, enviarás una solicitud a un extremo de la API que no existe: /posts/asdf.

Esta solicitud devolverá un código de estado 404:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
    
  );
}

En este caso, en lugar de ejecutar el callback .then(), Axios generará un error y ejecutará el callback .catch().

En esta función, estamos tomando los datos del error y poniéndolos en estado para alertar a nuestro usuario sobre el error. Entonces, si tenemos un error, mostraremos ese mensaje de error.

Cuando ejecutes este código de código, verás el texto "Error: Request failed with status code 404".

Cómo crear una instancia de Axios

Si observas los ejemplos anteriores, verá que hay una baseURL que usamos como parte del endpoint para que Axios realice estas solicitudes.

Sin embargo, se vuelve un poco tedioso seguir escribiendo esa baseURL para cada solicitud. ¿No podría simplemente hacer que Axios recuerde qué baseURL está usando, ya que siempre involucra un punto final similar?

De hecho, puedes. Si creas una instancia con el método .create(), Axios recordará esa baseURL, además de otros valores que quizás desees especificar para cada solicitud, incluidos los encabezados:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
      
    
  );
}

La única propiedad en el objeto de configuración anterior es baseURL, a la que pasa el endpoint.

La función .create() devuelve una instancia recién creada, que en este caso se llama client.

Luego, en el futuro, puedes usar todos los mismos métodos que usaste antes, pero ya no tienes que incluir la baseURL como el primer argumento. Solo tiene que hacer referencia a la ruta específica que desea, por ejemplo, /, /1, etc.

Cómo usar la sintaxis Async-Await con Axios

Un gran beneficio de usar promesas en JavaScript (incluidas las aplicaciones React) es la sintaxis async-await.

Async-await te permite escribir un código mucho más limpio sin los callbacks then y catch. Además, el código con async-await se parece mucho al código síncrono y es más fácil de entender.

Pero, ¿cómo se usa la sintaxis async-await con Axios?

En el siguiente ejemplo, se recuperan las publicaciones y todavía hay un botón para eliminar esa publicación:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    
      {post.title}
      {post.body}
      
    
  );
}

Sin embargo, en useEffect, hay una función async llamada getPost.

Hacerlo async te permite usar la palabra clave await para resolver la solicitud GET y establecer esos datos en estado en la siguiente línea sin la devolución de llamada .then().

Ten en cuenta que la función getPost se llama inmediatamente después de su creación.

Además, la función deletePost ahora es async, lo cual es un requisito para usar la palabra clave que resuelve la promesa que devuelve (todos los métodos de Axios devuelven una promesa para resolver).

Después de usar la palabra clave await con la solicitud DELETE, se alerta al usuario de que la publicación se eliminó y la publicación se establece en null.

Como puedes ver, async-await limpia mucho el código y puedes usarlo con Axios muy fácilmente.

Cómo crear un hook `useAxios` personalizado

Async-await es una excelente manera de simplificar su código, pero puede llevar esto un paso más allá.

En lugar de usar useEffect para obtener datos cuando se monta el componente, puedes crear su propio hook personalizado con Axios para realizar la misma operación que una función reutilizable.

Si bien puedes crear este hook personalizado por ti mismo, hay una biblioteca muy buena que te brinda un hook personalizado useAxios llamado use-axios-client.

Primero, instala el paquete:

npm install use-axios-client

Para usar el hook en sí, importa useAxios desde use-axios-client en la parte superior del componente.

Como ya no necesitas useEffect, puede eliminar la importación de React:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    
      {data.title}
      {data.body}
    
  ) 
}

Ahora puedes llamar a useAxios en la parte superior del componente de la aplicación, pasar la URL a la que desea realizar una solicitud y el hook devuelve un objeto con todos los valores que necesita para manejar los diferentes estados: loading, error y data resueltos .

En el proceso de realizar esta solicitud, el valor de loading será verdadero. Si hay un error, querrás mostrar ese estado de error. De lo contrario, si tiene los datos devueltos, puede mostrarlos en la interfaz de usuario.

El beneficio de los hooks personalizados como este es que realmente reduce el código y lo simplifica en general.

Si estás buscando una manera de obtener datos aún más simple con Axios, prueba un gancho de useAxios personalizado como este.

¿Qué sigue?

¡Felicidades! Ahora sabes cómo usar una de las bibliotecas de clientes HTTP más poderosas para potenciar sus aplicaciones React.

Espero que hayas sacado mucho provecho de esta guía.

Proyecto ReactJS: Crea una Wiki de personajes de Rick y Morty

Juan C. Guaña — Fri, 04 Feb 2022 04:38:51 +0000

Artículo original escrito por: Joy Shaheb
Artículo original: ReactJS Project – Build a Rick and Morty Character Wiki
Traducido y adaptado por: Juan C. Guaña

Hoy vamos a practicar nuestras habilidades de React JS construyendo una Wiki de personajes de Rick and Morty.

Esto es lo que construiremos hoy:

Aquí hay una [demostración en vivo del proyecto] ?‌
https://react-projects-psi.vercel.app/.

Y aquí está el repositorio de GitHub.

Los temas que cubriremos mientras construimos este proyecto son:

React Hooks (useState, useEffect)
React Components
Fetch API
Bootstrap - para estilos
Paginación
Barra de búsqueda
Filtrado de datos
Enrutamiento dinámico

También puedes ver este tutorial en YouTube si lo deseas:

Características del proyecto

Veamos una demostración de todas las funciones que crearemos durante todo el transcurso de este artículo.

Este proyecto está lleno de características interesantes para que pueda aprovechar al máximo este tutorial y ser realmente bueno escribiendo código ReactJS.

Barra de búsqueda

Construiremos esta barra de búsqueda genial para que podamos buscar a nuestros personajes favoritos.

Paginación

En total hay más de 800 caracteres. Para mostrar y administrar todos estos caracteres, implementaremos un sistema de paginación donde cada página mostrará 20 caracteres.

Filtros

Hay muchas etiquetas presentes en la API. Utilizándolas, podemos filtrar nuestros datos y buscar exactamente lo que necesitamos. Aquí está la demostración:

Enrutamiento

Implementaremos este componente para cambiar nuestras páginas y crear una barra de navegación. Usaremos la libreria llamada react-router-dom para hacer esto.

Enrutamiento dinámico

Usando react-router-dom, también agregaremos enrutamiento dinámico para que podamos aprender más sobre un personaje cuando hagamos clic en él.

Tabla de contenido

Configuración
Estructura de carpetas
Obtención de datos
Tarjetas de personaje
Barra de búsqueda
Paginación con React
Filtros
Enrutamiento con React
Episodios
Ubicación
Páginas dinámicas

Configuración

Antes de comenzar el proyecto, sigue estos pasos para configurarlo:

Crea una carpeta llamada 'react-wiki'
Abre esa carpeta en VS code
Abre tu terminal y ejecuta estos comandos uno por uno: ?

npx create-react-app .

npm install bootstrap

npm install @popperjs/core --save

npm install sass

npm install react-router-dom

npm install react-paginate --save

npm start

Para facilitar su experiencia de desarrollo, descarga estas extensiones de VSCode:

ES7 React/Redux/GraphQL/React-Native snippets
ESLint

Estructura de carpeta

Dividiremos todo nuestro proyecto en 5 componentes:

Card
Pagination
Search
Filter
Navbar

Crea una carpeta llamada 'components' dentro de su carpeta 'src' y crea 5 carpetas como esta: ?

Y luego, crea estos archivos de acuerdo con los nombres de nuestros componentes. ?

App.js

Algunos otros cambios que necesitas hacer:

Elimina todo del archivo App.css
Importa los React hooks y Bootstrap en la parte superior en App.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";

A continuación, importa todos sus módulos desde componentes:

import Search from "./components/Search/Search";
import Card from "./components/Card/Card";
import Pagination from "./components/Pagination/Pagination";
import Filter from "./components/Filter/Filter";
import Navbar from "./components/Navbar/Navbar";

Dentro del return statement, elimina todo y agrega este código: ?


  Characters
  
  
    Filter component will be placed here
    
      
        Card component will be placed here

index.css

Agrega estos estilos predeterminados: ?

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ubuntu {
  font-family: "Ubuntu" !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Este es el resultado hasta ahora:

¡Felicidades! Hemos terminado con el proceso de configuración. Así que ahora comencemos a codificar.

Cómo obtener datos de la API

Para obtener datos de nuestra API, usaremos la API de personajes de Rick and Morty. Tendremos que agregar algunas cosas.

App.js ?

 let api = `https://rickandmortyapi.com/api/character/?page=1`

Nota: no uses comillas o comillas dobles alrededor de la URL, usa comillas invertidas en su lugar. ☝

Para obtener datos de esta API, usaremos nuestro hook useEffects de esta manera: ?

  useEffect(() => { }, [api]);

Estamos escribiendo el hook useEffect y poniendo el observador en api. Esto significa que, en caso de que cambie la variable api, queremos recargar datos nuevos.

Continuemos. ?

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    console.log(data);
  })();
}, [api]);

Estamos usando una función asíncrona para obtener nuestros datos sin procesar y luego los convertimos al formato JSON. Revisemos la consola para ver qué tenemos hasta ahora: ?

¿Quieres probarlo tú mismo? Cambia el número de página a 2 dentro de la API y encontrarás nuevos datos en tu consola: ?

let api = `https://rickandmortyapi.com/api/character/?page=1`

En lugar de almacenar los datos en la consola, usemos el hook useState. Esto almacenará los datos en una variable, y tendremos una clave de función para cambiar los datos de la variable cada vez que el hook useEffect obtenga nuevos datos. ?

let [fetchedData, updateFetchedData] = useState([]);
let { info, results } = fetchedData;

Además, estamos desestructurando info and result de la variable fetchedData para facilitarnos la vida. ?

La variable fetchedData almacenará los datos que obtuvimos de la API. Usaremos la función updateFetchedData para cambiar los datos cuando queramos.

Cambiemos nuestro hook useEffect: ?

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    updateFetchedData(data);
  })();
}, [api]);

Cómo hacer las tarjetas de personajes

Comencemos a construir nuestras tarjetas de personajes.?

En primer lugar, importa el componente card reemplazando el texto escrito Card component will be placed here. Luego, pasa los datos obtenidos de nuestro componente App.js a nuestro componente Card de esta manera:?

Card.js

Ahora, primero desestructura los datos que obtuvimos de nuestro componente App.js.?

const Card = ({ results }) => {}

Luego crea una variable llamada display. Esto mantendrá todas nuestras tarjetas. Junto con esto, crearemos una declaración if else para verificar si los datos que obtuvimos de nuestra API están vacíos o no.?

const Card = ({ results }) => {
  let display;

  if (results) {}
  else{
    display = "No Characters Found :/";
  }

  return <>{display};
}

Ahora, vamos a asignar nuestros results a nuestro componente card de manera que creará tarjetas para nosotros automáticamente. Pero primero, debemos desestructurar los datos que obtuvimos de nuestra API.?

if (results) {
  display = results.map((x) => {
  let { id, image, name, status, location } = x;

    return (
      
      
  );
});
}

Crea un archivo llamado Card.module.scss y agrega este código: ?

$radius: 10px;
.card {
  border: 2px solid #0b5ed7;
  border-radius: $radius;
}
.content {
  padding: 10px;
}
.img {
  border-radius: $radius $radius 0 0;
}
.badge {
  top: 10px; right: 20px;
  font-size: 17px;
}

Además, impórtalo dentro del componente Card.js : ?

import styles from "./Card.module.scss";

Ahora es el momento de crear nuestra plantilla de tarjeta y colocar los datos en sus respectivos lugares.?


  
  
    {name}
    
      Last Location
      {location.name}

Los resultados hasta ahora se ven así: ?

Por último, usaremos este código ? para que los usuarios sepan si el personaje está vivo, muerto o desconocido:

{
(() => {
  if (status === "Dead") {
    return (
      
        {status}
      
    );
  } else if (status === "Alive") {
    return (
      
        {status}
      
    );
  } else {
    return (
      
        {status}
      
    );
  }
})()}

Los resultados hasta ahora: ?

Cómo construir la barra de búsqueda

Aquí hay un video de demostración de nuestro componente de barra de búsqueda: ?

Ahora, construyamos nuestra barra de búsqueda de personajes. Pero primero, necesitamos crear dos hooks useState para mantener nuestras palabras clave de búsqueda y el número de página actual. ?

App.js

let [pageNumber, updatePageNumber] = useState(1);
let [search, setSearch] = useState("");

Luego, necesitamos actualizar nuestra API con variables. Esto significa que siempre que nuestra API cambie, nuestro hook useEffect obtendrá nuevos datos de nuestra base de datos. ?

let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}`;

Ahora, vamos a importar nuestro componente de barra de búsqueda dentro de la declaración de devolución. Y junto con eso, vamos a pasar nuestras variables de estado recién creadas dentro de ese componente. ?

  Characters

Crea un archivo llamado Search.module.scss para contener los estilos de un módulo específico. Luego, haz estos ajustes: ?

Search.module.scss

.input {
  width: 40%; border-radius: 8px;
  border: 2px solid #0b5ed7;
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
  padding: 10px 15px;
  &:focus { outline: none; }
}
.btn {
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
}
@media (max-width: 576px) {
  .input { width: 80%; }
}

Search.js

En primer lugar, necesitamos desestructurar nuestros accesorios. Luego, crearemos una función llamada searchBtn para evitar el comportamiento predeterminado de nuestra aplicación, de esta manera: ?

import React from "react";
import styles from "./Search.module.scss";

const Search = ({ setSearch, updatePageNumber }) => {
  let searchBtn = (e) => {
    e.preventDefault();
  };
};

Luego, escribamos dentro de nuestra declaración de devolución. En primer lugar, escribamos la etiqueta de formulario para contener nuestras etiquetas de entrada y botón. ?

return (
  
  
);

Luego, creamos el botón y las etiquetas de entrada dentro de nuestra etiqueta de formulario. ?

 {
    updatePageNumber(1);
    setSearch(e.target.value);
  }}
  placeholder="Search for characters"
  className={styles.input}
  type="text"
/>

Los resultados hasta ahora: ?

Cómo configurar la paginación con React-paginate

Aquí hay una demostración de nuestro componente React-paginate: ?

Vamos a usar este paquete para paginar nuestros datos. Entonces, importémoslo en la parte inferior: ?

App.js

Pagination.js

Aquí, vamos a desestructurar nuestras propiedades y luego escribiremos en algunos estilos JSX: ?

import React, { useState, useEffect } from "react";
import ReactPaginate from "react-paginate";

const Pagination = ({ pageNumber, info, updatePageNumber }) => {}

Dentro de la declaración de devolución, escribimos los estilos en JSX así: ?

return (
<>


);

Ahora, crea esta función para manejar la función de cambio de página: ?

let pageChange = (data) => {
  updatePageNumber(data.selected + 1);
};

Para que nuestro componente de paginación sea adapte al tamaño de la pantalla, necesitamos escribir este pequeño componente:

const [width, setWidth] = useState(window.innerWidth);
const updateDimensions = () => {
  setWidth(window.innerWidth);
};
useEffect(() => {
  window.addEventListener("resize", updateDimensions);
  return () => window.removeEventListener("resize", updateDimensions);
}, []);

Muy bien a todos, excelente! Ahora vamos a usar el paquete react-paginate.

Primero, diseñemos todo usando las propiedades integradas de react-paginate para estilizar los elementos básicos:?

Aquí está lo más importante: vamos a agregar las funcionalidades a nuestro componente para que funcione correctamente. ?

Los resultados hasta ahora: ?

Cómo hacer el componente de filtros

Aquí hay una demostración de nuestro componente de filtros:?

Lo primero que debemos hacer es crear una estructura de carpetas para contener todos los pequeños componentes que vamos a usar. Crea estos componentes dentro de la carpeta Filter:?

App.js

Ahora, crea estos useState hooks para almacenar nuestro estado, género y especie.

let [status, updateStatus] = useState("");
let [gender, updateGender] = useState("");
let [species, updateSpecies] = useState("");

Además, necesitamos modificar nuestra variable api de acuerdo con nuestras variables de useState hook. ?

  let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species}`;

Ahora, importaremos nuestro componente filter dentro de nuestra aplicación, donde se colocará aquí su componente de filtro escrito. Además, pasa todas estas propiedades requeridas: ?

Filter.js

Hagamos estos cambios en nuestro componente Filtro para que podamos lograr los resultados deseados. Primero, importa todos los componentes de nuestra categoría de esta manera:?

import React from "react";
import Gender from "./category/Gender";
import Species from "./category/Species";
import Status from "./category/Status";

Luego, desestructura las propiedades pasadas y coloca un accordion que incluya un clear button:

const Filter = ({
  pageNumber, updatePageNumber,
  updateStatus, updateGender,
  updateSpecies,
}) => {

return (

  Filters
   Clear Filters 
  
    {/* Category components will be placed here */}
  

);
};

Realiza esta función para que podamos borrar nuestros filtros y actualizar la página:?

let clear = () => {
  updateStatus("");
  updateGender("");
  updateSpecies("");
  updatePageNumber(1);
  window.location.reload(false);
};

Los resultados hasta ahora se ven así ?

FilterBTN.js

Primero, creemos estos botones de filtro. También desestructuraremos las propiedades necesarias. ?

const FilterBTN = ({ input, task, updatePageNumber, index, name }) => {
return (

  

);
};

Ahora, colocamos el componente de entrada principal con etiquetas debajo del style jsx: ?


  
   {
      task(input); updatePageNumber(1);
    }}
    className="btn btn-outline-primary"
    for={`${name}-${index}`}
  > {input}

Status.js

Escribe este código de inicio dentro de Status.js:

import FilterBTN from "../FilterBTN";

const Status = ({ updateStatus, updatePageNumber }) => {
  let status = ["Alive", "Dead", "Unknown"];
  return (
    
      
        
      
    
  );
};

Luego, crea los botones de estado mapeando nuestro arreglos de datos. ?

Debajo de la etiqueta h2 final, colócalos dentro ?, lo que nos ayudará a mapear automáticamente los datos y crear nuestros botones de estado:



  {status.map((item, index) => (
    
  ))}

Hora de probar en Filter.js

Escribe estas líneas dentro del Filter.js para comprobar si el componente funciona o no: ?

Los resultados hasta ahora: ?

Species.js

Escribe estos códigos de inicio dentro de Species.js:

import FilterBTN from "../FilterBTN";

const Species = ({ updateSpecies, updatePageNumber }) => {
return (

  
    
  

)}

Ahora, crea un arreglo para contener todos nuestros posibles datos de especies: ?

  let species = [
    "Human", "Alien", "Humanoid",
    "Poopybutthole", "Mythological", "Unknown",
    "Animal", "Disease","Robot","Cronenberg","Planet",
  ];

Y luego, creamos los botones Species mapeando nuestro arreglo de datos de esta manera: ?


  
    {species.map((item, index) => {
      return (
        
      );
    })}

Hora de probar en Filter.js

Escriba estas líneas dentro de Filter.js para verificar si el componente funciona o no: ?

Los resultados hasta ahora: ?

Gender.js

Escribe este código de inicio:?

import FilterBTN from "../FilterBTN";

const Gender = ({ updateGender, updatePageNumber }) => {
let genders = ["female", "male", "genderless", "unknown"];
return (
  
    
      
    
  
);
};

Debajo de la etiqueta h2 final, coloca este código dentro? que nos ayudará a mapear automáticamente los datos y crear nuestros botones de género:



  {genders.map((items, index) => {
    return (
      
      );
    })}

Hora de probar en Filter.js

Escribe estas líneas dentro de Filter.js para comprobar si el componente funciona o no: ?

Los resultados hasta ahora: ?

Cómo configurar React Router

Aquí hay una demostración de nuestro componente de navegación: ?

Comencemos a codificar!

Primero, crea una carpeta llamada Pages dentro de la carpeta src. Contendrá 2 archivos: Episodes.j y Location.js. Algo como esto:?

App.js

Importa su componente de páginas recién creado en App.js: ?

import Episodes from "./Pages/Episodes";
import Location from "./Pages/Location";

Para declarar el enrutador y definir todo tipo de rutas de archivos, debemos importar react-router-dom en App.js, incluidos sus componentes principales. ?

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Ahora, crea un nuevo componente funcional llamado Home dentro del archivo App.js. Luego, corta todo desde el componente App y colóquelo dentro del componente Home: ?

const Home = () => {
  // Everything you've written so far
}

Dentro de la función del componente App, crea un nuevo componente Router y colóquelo dentro del componente Navbar. ?

function App() {
  return (
    
      
        
      
    
  );
}

Ahora, necesitamos definir todas nuestras rutas. Recuerda, Routes es una colección de Route. La ruta es la ruta real del archivo.

Cada ruta requiere 2 cosas: el path al que conducirá la aplicación y el element que se cargará. ?


  } />

  } />

  } />

¡Hasta ahora todo bien! Ahora, hagamos el componente de la barra de navegación. Primero, importa 2 componentes desde react-router-dom. Luego, escribe esta clase principal de arranque que incluya el nombre de la marca para contener nuestro componente de páginas de la barra de navegación:?

import { NavLink, Link } from "react-router-dom";

const Navbar = () => {
return (
  
    
      
        Rick & Morty WiKi
      
      
    
  
);
};

Escribe este código para generar nuestro menú de hamburguesas responsivo:?

Escribe este código para generar nuestros enlaces de barra de navegación en los que se puede hacer clic. Ten en cuenta que estamos usando el componente de react-router-dom para vincular a la URL del componente de nuestra página: ?

 
    
      Characters
    
    
      Episode
    
    Location

App.css

Además, escribe estos estilos si deseas que la barra de navegación se vea bien y que sus usuarios sepan exactamente en qué página se encuentran actualmente: ?

.active {
  color: #0b5ed7 !important;
  font-weight: bold;
  border-bottom: 3px solid #0b5ed7;
}

Luego, dentro de Navbar.js, importa los estilos de esta manera: ?

import "../../App.css";

El resultado hasta ahora: ?

Episodios

Para crear esta página, necesitamos 2 componentes: el primero es el componente card, que ya está construido, y el segundo es el componente Input Group a través del cual podemos cambiar nuestro número de episodio.

InputGroup.js

Nuestros grupos de entrada solo estarán disponibles en el componente Episodes y Location para que podamos cambiar el número de episodio y la ubicación para buscar personajes. ¡Empecemos! ?

Dentro de la carpeta category de la carpeta Filter, crea un nuevo archivo llamado InputGroup.js y escriba este código de inicio, incluido el sistema de desestructuración de accesorios: ?

const InputGroup = ({ name, changeID, total }) => {
return 
  

};

Luego, creemos nuestra opción de grupo de entrada. Escriba este código dentro de su etiqueta select: ?


{[...Array(total).keys()].map((x, index) => {
  return (
    
  );
})}

Episodes.js

Dentro de este archivo, importe estos componentes:?

import React, { useEffect, useState } from "react";
import Card from "../components/Card/Card";
import InputGroup from "../components/Filter/category/InputGroup";

Ahora, crea estos estados para que podamos retener y cambiar información crucial para obtener datos de nuestra api:?

const Episodes = () => {
  let [results, setResults] = React.useState([]);
  let [info, setInfo] = useState([]);
  let { air_date, episode, name } = info;
  let [id, setID] = useState(1);

let api = `https://rickandmortyapi.com/api/episode/${id}`;
}

Escriba este código para obtener datos de nuestra API: ?

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    setInfo(data);

    let a = await Promise.all(
      data.characters.map((x) => {
        return fetch(x).then((res) => res.json());
      })
    );
    setResults(a);
  })();
}, [api]);

Ahora, escribamos el código para representar los resultados en nuestra pantalla. Primero, mostremos el nombre del episodio y la fecha de emisión de esta manera: ?

return (

  
    
      Episode name :{" "}
      {name === "" ? "Unknown" : name}
    
    
      Air Date: {air_date === "" ? "Unknown" : air_date}
    
  

);

Los resultados hasta ahora se ven así: ?

Ahora, mostremos las tarjetas de personajes y los grupos de entrada: ?


  
    Pick Episode

Los resultados hasta ahora: ?

Location

Hacer este componente es similar a hacer una página de episodes. Primero, copia todo desde la página de episodes y realiza estos pocos cambios:?

  let [results, setResults] = useState([]);
  let [info, setInfo] = useState([]);
  let { dimension, type, name } = info;
  let [number, setNumber] = useState(1);

  let api = `https://rickandmortyapi.com/api/location/${number}`;

Ahora cambie solo una palabra clave en el hook useEffect, de characters a residents, así:?

useEffect(() => {
      // Other codes are here
      data.residents.map((x) => {
      })
    // Other codes are here
}, [api]);

En la declaración de devolución, realiza estos cambios: ?

return (

  Location :
  
    {name === "" ? "Unknown" : name}
  


  Dimension: {dimension === "" ? "Unknown" : dimension}

Type: {type === "" ? "Unknown" : type}
);

Y finalmente, realiza estos cambios para nuestro componente InputGroup: ?

Los resultados hasta ahora?

Páginas dinámicas

Este es el último paso de nuestro proyecto. Nuestro objetivo principal es saber más sobre un personaje específico cuando hacemos clic en la tarjeta. Vamos a utilizar el sistema de módulos dinámicos de react-router-dom, algo como esto:?

CardDetails.js

Para lograr nuestros objetivos, necesitamos crear un componente separado para mostrar más detalles sobre el personaje. Crearemos un nuevo archivo llamado CardDetails.js dentro de la carpeta Card.

Primero, importemos los componentes esenciales:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

Luego, necesitamos almacenar nuestra api y usar algunos hooks useState. Usaremos el useParams hook para obtener la identificación de la URL:?

const CardDetails = () => {
let { id } = useParams();
let [fetchedData, updateFetchedData] = useState([]);
let { name, location, origin, gender, image, status, species } = fetchedData;

let api = `https://rickandmortyapi.com/api/character/${id}`;
}

Usaremos este hook useEffect para obtener datos de nuestra API: ?

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    updateFetchedData(data);
  })();
}, [api]);

Ahora, escribamos este código que generará el nombre y la imagen de nuestro personaje: ?

return (

  
    {name}
    
  

)

Ahora, escribe este código en caso de que quieras mostrar el estado actual de cada personaje:?

{(() => {
if (status === "Dead") {
  return {status};
} else if (status === "Alive") {
  return {status};
} else {
  return {status};
}
})()}

A continuación, escribe este código para mostrar toda la información sobre el personaje: ?


  
    Gender : 
    {gender}
  
  
    Location: 
    {location?.name}
  
  
    Origin: 
    {origin?.name}
  
  
    Species: 
    {species}

App.js

A continuación, debemos definir nuestras rutas para que nuestro componente de enrutador dinámico funcione correctamente. Primero, importe y luego agregue este código:?

import CardDetails from "./components/Card/CardDetails";
// other codes are here


  } />
  } />
  } />

Ahora, desplázate hacia abajo dentro de tu App.js y haz esta pequeña modificación ? para que se refiera a la página de inicio:

Card.js

Vaya al componente de su tarjeta y realiza estos cambios: ?

Primero, desestructura los nuevos accesorios e importa el Link desde react-router-dom

import { Link } from "react-router-dom";

const Card = ({ page, results }) => {}

A continuación, envuelve todo dentro de la declaración de devolución dentro de una etiqueta de enlace:


{/* Other codes are here */}

Episodes.js

En este archivo, solo ajuste esta pequeña línea: ?

Location.js

Al igual que en Episodes.js, solo ajusta esta pequeña línea: ?

Los resultados: ✨✨✨

Conclusión

¡Felicidades por leer hasta el final! Ahora puedes usar React JS y Bootstrap de manera fácil y eficiente para manejar proyectos.

También aprendiste cómo obtener datos de una API y mapear los resultados. No solo eso, también tienes un proyecto para mostrarle a tu reclutador local.

Aquí está tu medalla por leer hasta el final. ❤️

Las sugerencias y críticas son muy apreciadas ❤️

Tutorial de React: Cómo construir el juego 2048 en React

Juan C. Guaña — Tue, 14 Dec 2021 03:13:14 +0000

Artículo original escrito por: Matt Sokola
Artículo original: React Tutorial – How to Build the 2048 Game in React
Traducido y adaptado por: Juan C. Guaña

Hoy aprenderás a construir tu propio clon del juego 2048 en React.

Lo que hace que este artículo sea único es que nos centraremos en crear divertidas animaciones. Aparte de React, usaremos TypeScript y haremos algunas transiciones CSS usando LESS.

Solo usaremos interfaces de React modernas como hooks y la API context.

Este artículo contiene algunos recursos externos como:

Juego 2048 (GitHub Pages)
Ejemplos de animación para 2048 (GitHub Pages)
Código fuente (GitHub)
... y un video de YouTube. Me tomó más de un mes preparar este tutorial, por lo que significaría muchísimo para mí si lo miras, presionas el botón Me gusta y te suscribes a mi canal.

¡Gracias!

Reglas del juego 2048

En este juego, el jugador debe combinar fichas que contengan los mismos números hasta alcanzar el número 2048. Las fichas solo pueden contener valores enteros a partir de 2, y que sean una potencia de dos, como 2, 4, 8, 16, 32, etc.

Idealmente, el jugador debería alcanzar la ficha 2048 en el menor número de pasos. El tablero tiene una dimensión de 4 x 4 azulejos, por lo que puede caber hasta 16 azulejos. Si el tablero está lleno y no hay movimiento posible para hacer como unir fichas, el juego termina.

Mientras creaba este tutorial, tomé atajos para enfocarme en la mecánica y las animaciones del juego. ¿De qué me deshice?

En nuestro ejemplo, el juego siempre crea una nueva ficha con el número 2. Pero en la versión propia debería generar un número aleatorio (2 o 4, para que sea más difícil jugar).
Además, no manejaremos las victorias y las derrotas. Puedes jugar después de completar el número 2048, y no pasa nada cuando el tablero no se puede resolver; debes hacer clic en el botón de reinicio.
Me salté la puntuación.

Si lo deseas, puedes implementar esas funciones que faltan por tu cuenta. Simplemente haz un fork de mi repositorio e impleméntelo en tu propia configuración.

Estructura del proyecto

La aplicación contiene los siguientes elementos:

Board (componente) – responsable de renderizar mosaicos. Expone un hook llamado useBoard.
Grid (componente) – renderiza una cuadrícula de 4x4.
Tile (componente) – responsable de todas las animaciones relacionadas con el mosaico y de renderizar el mosaico en sí.
Game (componente) – combina todos los elementos anteriores juntos. Incluye el hook useGame que es responsable de hacer cumplir las reglas y restricciones del juego.

Cómo construir el componente Tile

Queremos invertir más tiempo en animaciones, así que comenzaré la historia desde el componente Tile. Al final, este componente es responsable de todas las animaciones del juego.

Solo hay dos animaciones bastante simples en 2048 – resaltar mosaicos y deslizarlos por el tablero. Podemos manejar esas animaciones con transiciones CSS declarando los siguientes estilos:

.tile {
  // ...
  transition-property: transform;
  transition-duration: 100ms;
  transform: scale(1);
}

En el momento actual, definí solo una transición que resaltará el mosaico cuando se crea o se fusiona. Lo dejaremos así por ahora.

Consideremos cómo se supone que deben verse los metadatos de Tile, para que podamos usarlos fácilmente. Decidí llamarlo TileMeta, ya que no queremos que el nombre entre en conflicto con otras entidades como el componente Tile:

type TileMeta = {
  id: number;
  position: [number, number];
  value: number;
  mergeWith?: number;
};

id – el identificador único del mosaico. Es importante para que React DOM no vuelva a renderizar todos los mosaicos desde cero en cada cambio. De lo contrario, veríamos todos los mosaicos resaltados en cada acción del jugador.
position – la posición de la ficha en el tablero. Es un arreglo con dos elementos, la coordenada x e y (los valores posibles son 0 - 3 en ambos casos).
value – el valor del mosaico. Solo potencia de dos, a partir de 2.
mergeWith – (opcional) la id del mosaico que va a absorber el mosaico actual. Si está presente, el mosaico debe fusionarse con otro mosaico y desaparecer.

Cómo crear y fusionar mosaicos

Queremos resaltar de alguna manera que el mosaico cambió después de la acción del jugador. Creo que la mejor manera sería cambiar la escala del mosaico para indicar que se ha creado un nuevo mosaico o se ha cambiado uno.

export const Tile = ({ value, position }: Props) => {
  const [scale, setScale] = useState(1);

  const prevValue = usePrevProps(value);

  const isNew = prevCoords === undefined;
  const hasChanged = prevValue !== value;
  const shallAnimate = isNew || hasChanged;

  useEffect(() => {
    if (shallAnimate) {
      setScale(1.1);
      setTimeout(() => setScale(1), 100);
    }
  }, [shallAnimate, scale]);

  const style = {
    transform: `scale(${scale})`,
  };

  return (
    
      {value}
    
  );
};

Para activar la animación, debemos considerar dos casos:

un nuevo mosaico – el valor anterior será null.
el mosaico cambió el valor – el valor anterior será diferente al actual.

Y el resultado es el siguiente:

Es posible que hayas notado que estoy usando un hook personalizado llamado usePrevProps. Éste ayuda a rastrear los valores anteriores de las propiedades del componente (props).

Podría usar referencias para recuperar los valores anteriores, pero desordenaría mi componente. Decidí extraerlo en un hook independiente, para que el código sea legible y pueda usar este hook en otros lugares.

Si deseas usarlo en tu proyecto, simplemente copia este fragmento:

import { useEffect, useRef } from "react";

/**
 * `usePrevProps` stores the previous value of the prop.
 *
 * @param {K} value
 * @returns {K | undefined}
 */
export const usePrevProps = (value: K) => {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
};

Cómo deslizar baldosas por el tablero

El juego se verá chiflado sin el deslizamiento animado de las fichas por el tablero. Podemos crear fácilmente esta animación usando transiciones CSS.

Lo más conveniente será utilizar propiedades responsables del posicionamiento, como left y top. Así que necesitamos modificar nuestros estilos CSS para que se vean así:

.tile {
  position: absolute;
  // ...
  transition-property: left, top, transform;
  transition-duration: 250ms, 250ms, 100ms;
  transform: scale(1);
}

Una vez que hemos declarado los estilos, podemos implementar la lógica responsable de cambiar la posición de una ficha en el tablero.

export const Tile = ({ value, position, zIndex }: Props) => {
  const [boardWidthInPixels, tileCount] = useBoard();
  // ...

  useEffect(() => {
    // ...
  }, [shallAnimate, scale]);

  const positionToPixels = (position: number) => {
    return (position / tileCount) * (boardWidthInPixels as number);
  };

  const style = {
    top: positionToPixels(position[1]),
    left: positionToPixels(position[0]),
    transform: `scale(${scale})`,
    zIndex,
  };

  // ...
};

Como puedes ver, la ecuación en la función positionToPixels necesita conocer la posición del mosaico, la cantidad total de mosaicos por fila y columna, y la longitud total del tablero en píxeles (ancho o alto, igual que – es un cuadrado). El valor calculado se transmite al elemento HTML como un estilo en línea.

Espere un minuto ... pero ¿qué pasa con el hook useBoard y la propiedad zIndex?

useBoard nos permite acceder a las propiedades de la placa dentro de los componentes secundarios sin pasarlos. El componente Tile necesita conocer el ancho y el recuento total de mosaicos para encontrar el lugar correcto en el tablero. Gracias a React Context API podemos compartir propiedades en múltiples capas de componentes sin contaminar sus propiedades (accesorios).
zIndex es una propiedad de CSS que define el orden de los mosaicos en la pila. En nuestro caso es el id del mosaico. Como puedes ver en el gif a continuación, los mosaicos se pueden apilar unos sobre otros, por lo que zIndex nos permitió especificar cuál estará en la parte superior.

Cómo construir el tablero

Otra parte importante del juego es el tablero. El componente Board es responsable de renderizar la cuadrícula y los mosaicos.

Parece que el tablero ha duplicado la lógica de negocio con el componente Tile, pero hay una pequeña diferencia. El tablero contiene información sobre su tamaño (ancho y alto) y el número de columnas y filas. Es lo opuesto al Tile que solo conoce su propia posición.

type Props = {
  tiles: TileMeta[];
  tileCountPerRow: number;
};

const Board = ({ tiles, tileCountPerRow = 4 }: Props) => {
  const containerWidth = tileTotalWidth * tileCountPerRow;
  const boardWidth = containerWidth + boardMargin;

  const tileList = tiles.map(({ id, ...restProps }) => (
    
  ));

  return (
    
      
        {tileList}
        
      
    
  );
};

El componente Board utiliza BoardProvider para distribuir el ancho del contenedor de mosaicos y la cantidad de mosaicos por fila y columna a todos los mosaicos y el componente de cuadrícula.

const BoardContext = React.createContext({
  containerWidth: 0,
  tileCountPerRow: 4,
});

type Props = {
  containerWidth: number;
  tileCountPerRow: number;
  children: any;
};

const BoardProvider = ({
  children,
  containerWidth = 0,
  tileCountPerRow = 4,
}: Props) => {
  return (
    
      {children}
    
  );
};

BoardProvider usa la API React Context para propagar propiedades a cada niño. Si algún componente necesita usar cualquier valor disponible en el proveedor, puede recuperarlo llamando al hook useBoard

Voy a omitir este tema, ya que hablé más sobre él en mi video sobre Feature Toggles en React. Si deseas obtener más información sobre ellos, puedes verlo.

const useBoard = () => {
  const { containerWidth, tileCount } = useContext(BoardContext);

  return [containerWidth, tileCount] as [number, number];
};

Cómo construir el componente del juego

Ahora podemos especificar las reglas del juego y exponer la interfaz para jugar. Voy a comenzar con la navegación, ya que te ayudará a comprender por qué la lógica del juego se implementa de esa manera.

import { useThrottledCallback } from "use-debounce";

const Game = () => {
  const [tiles, moveLeft, moveRight, moveUp, moveDown] = useGame();

  const handleKeyDown = (e: KeyboardEvent) => {
  	// disables page scrolling with keyboard arrows
    e.preventDefault();
  
    switch (e.code) {
      case "ArrowLeft":
        moveLeft();
        break;
      case "ArrowRight":
        moveRight();
        break;
      case "ArrowUp":
        moveUp();
        break;
      case "ArrowDown":
        moveDown();
        break;
    }
  };

  // protects the reducer from being flooded with events.
  const throttledHandleKeyDown = useThrottledCallback(
    handleKeyDown,
    animationDuration,
    { leading: true, trailing: false }
  );

  useEffect(() => {
    window.addEventListener("keydown", throttledHandleKeyDown);

    return () => {
      window.removeEventListener("keydown", throttledHandleKeyDown);
    };
  }, [throttledHandleKeyDown]);

  return ;
};

Como puedes ver, la lógica del juego será manejada por el hook useGame que expone las siguientes propiedades y métodos:

tiles – una variedad de fichas disponibles en el tablero. Utiliza el tipo TileMeta descrito anteriormente.
moveLeft – una función que desliza todas las fichas hacia el lado izquierdo del tablero.
moveRight – una función que desliza todas las fichas hacia el lado derecho del tablero.
moveUp – una función que desliza todas las fichas a la parte superior del tablero.
moveDown – una función que desliza todas las fichas al fondo del tablero.

Usamos la devolución de llamada throttledHandleKeyDown para evitar que los jugadores inunden el juego con toneladas de movimientos al mismo tiempo. Básicamente, el jugador debe esperar hasta que se complete la animación antes de poder activar otro movimiento.

Este mecanismo se llama estrangulamiento (throttling). Decidí usar el hook useThrottledCallback del paquete use-debounce.

Cómo utilizar el hook useGame

Mencioné anteriormente que el componente Game también manejará las reglas del juego. Vamos a extraer la lógica del juego en un hook en lugar de escribirla directamente en el componente (ya que no queremos saturar el código).

El hook useGame se basa en el hook useReducer, que es un hook incorporado dentro de React. Comenzaré definiendo la forma del estado del reducer.

type TileMap = { 
  [id: number]: TileMeta;
}

type State = {
  tiles: TileMap;
  inMotion: boolean;
  hasChanged: boolean;
  byIds: number[];
};

El estado contiene los siguientes campos:

tiles – una tabla hash responsable de almacenar mosaicos. La tabla hash facilita la búsqueda de entradas por sus claves, por lo que es una combinación perfecta para nosotros, ya que queremos encontrar mosaicos por sus ids.
byIds – un arreglo que contiene todos los ids en el orden esperado (es decir, ascendente). Debemos mantener el orden correcto de los mosaicos, para que React no vuelva a renderizar todo el tablero cada vez que cambiemos el estado.
hasChange – realiza un seguimiento de los cambios de mosaico. Si nada ha cambiado, no se generará el nuevo mosaico.
inMotion – determina si las fichas todavía se mueven. Si es así, el nuevo mosaico no se generará hasta que se complete el movimiento.

Actions

useReducer requiere especificar las actions que son compatibles con este reducer.

type Action =
  | { type: "CREATE_TILE"; tile: TileMeta }
  | { type: "UPDATE_TILE"; tile: TileMeta }
  | { type: "MERGE_TILE"; source: TileMeta; destination: TileMeta }
  | { type: "START_MOVE" }
  | { type: "END_MOVE" };

¿De qué son responsables esas actions?

CREATE_TILE – crea un nuevo mosaico y lo agrega a la tabla hash de tiles (mosaicos). Cambia el indicador hasChange a false ya que esta acción siempre se activa cuando se agrega una nueva ficha al tablero.
UPDATE_TILE – actualiza un mosaico existente. No modifica la identificación, lo cual es importante para que las animaciones sigan funcionando. Lo usaremos para reposicionar el mosaico y cambiar su valor (durante las fusiones). Además, cambia el indicador hasChange a true.
MERGE_TILE – fusiona un mosaico de origen en un mosaico de destino. Después de esta operación, el mosaico de destino cambiará su valor (se agregará el valor del mosaico de origen). Y eliminará el mosaico de origen de la tabla de tiles y el arreglo byIds.
START_MOVE – le dice al reducer que debe esperar múltiples actions, por lo que debe esperar hasta que todas las animaciones estén completas antes de poder generar un nuevo mosaico.
END_MOVE – le dice al reducer que se completaron todas las acciones y que puede crear de forma segura un nuevo mosaico.

Si lo deseas, puedes escribir la lógica de este reducer por su cuenta o copiar la mía:

type TileMap = { 
  [id: number]: TileMeta;
}

type State = {
  tiles: TileMap;
  inMotion: boolean;
  hasChanged: boolean;
  byIds: number[];
};

type Action =
  | { type: "CREATE_TILE"; tile: TileMeta }
  | { type: "UPDATE_TILE"; tile: TileMeta }
  | { type: "MERGE_TILE"; source: TileMeta; destination: TileMeta }
  | { type: "START_MOVE" }
  | { type: "END_MOVE" };

const initialState: State = {
  tiles: {},
  byIds: [],
  hasChanged: false,
  inMotion: false,
};

const GameReducer = (state: State, action: Action) => {
  switch (action.type) {
    case "CREATE_TILE":
      return {
        ...state,
        tiles: {
          ...state.tiles,
          [action.tile.id]: action.tile,
        },
        byIds: [...state.byIds, action.tile.id],
        hasChanged: false,
      };
    case "UPDATE_TILE":
      return {
        ...state,
        tiles: {
          ...state.tiles,
          [action.tile.id]: action.tile,
        },
        hasChanged: true,
      };
    case "MERGE_TILE":
      const {
        [action.source.id]: source,
        [action.destination.id]: destination,
        ...restTiles
      } = state.tiles;
      return {
        ...state,
        tiles: {
          ...restTiles,
          [action.destination.id]: {
            id: action.destination.id,
            value: action.source.value + action.destination.value,
            position: action.destination.position,
          },
        },
        byIds: state.byIds.filter((id) => id !== action.source.id),
        hasChanged: true,
      };
    case "START_MOVE":
      return {
        ...state,
        inMotion: true,
      };
    case "END_MOVE":
      return {
        ...state,
        inMotion: false,
      };
    default:
      return state;
  }
};

Si no comprendes por qué definimos esas actions, no te preocupes, ahora vamos a implementar un hook que, con suerte, arrojará algo de luz al respecto.

Cómo implementar el Hook

Veamos la función responsable de los movimientos de un jugador. Nos centraremos en el movimiento a la izquierda solo ya que los demás son casi iguales.

  const moveLeftFactory = () => {
    const retrieveTileIdsByRow = (rowIndex: number) => {
      const tileMap = retrieveTileMap();

      const tileIdsInRow = [
        tileMap[tileIndex * tileCount + 0],
        tileMap[tileIndex * tileCount + 1],
        tileMap[tileIndex * tileCount + 2],
        tileMap[tileIndex * tileCount + 3],
      ];

      const nonEmptyTiles = tileIdsInRow.filter((id) => id !== 0);
      return nonEmptyTiles;
    };

    const calculateFirstFreeIndex = (
      tileIndex: number,
      tileInRowIndex: number,
      mergedCount: number,
      _: number
    ) => {
      return tileIndex * tileCount + tileInRowIndex - mergedCount;
    };

    return move.bind(this, retrieveTileIdsByRow, calculateFirstFreeIndex);
  };
  
  const moveLeft = moveLeftFactory();

Como puedes ver, decidí vincular dos callbacks a la función move. Esta técnica se llama inversión de control, por lo que el consumidor de la función podrá inyectar sus propios valores en la función ejecutada.

Si no sabes cómo funciona bind, debes aprender sobre él porque es una pregunta muy común en las entrevistas de trabajo.

El primer callback llamado retrieveTileIdsByRow es responsable de encontrar todos los mosaicos no vacíos disponibles en una fila (para movimientos horizontales – izquierda o derecha). Si el jugador hace los movimientos verticales (arriba o abajo), buscaremos todas las fichas en una columna.

El segunda callback llamado calculateFirstFreeIndex encuentra la posición más cercana al borde del tablero en función de los parámetros dados, como el índice de mosaico, el índice del mosaico en fila o columna, el número de mosaicos combinados y el índice máximo posible.

Ahora veremos la lógica de negocio de la función move. Expliqué el código de esta función en los comentarios. El algoritmo puede ser un poco complejo, y creo que será más fácil de entender si documente el código línea por línea:

  type RetrieveTileIdsByRowOrColumnCallback = (tileIndex: number) => number[];

  type CalculateTileIndex = (
    tileIndex: number,
    tileInRowIndex: number,
    mergedCount: number,
    maxIndexInRow: number
  ) => number;

  const move = (
    retrieveTileIdsByRowOrColumn: RetrieveTileIdsByRowOrColumnCallback,
    calculateFirstFreeIndex: CalculateTileIndex
  ) => {
    // no se pueden crear nuevos mosaicos durante el movimiento.
    dispatch({ type: "START_MOVE" });

    const maxIndex = tileCount - 1;

    // itera a través de cada fila o columna (depende del tipo de movimiento - vertical u horizontal).
    for (let tileIndex = 0; tileIndex < tileCount; tileIndex += 1) {
      // recupera mosaicos en la fila o columna.
      const availableTileIds = retrieveTileIdsByRowOrColumn(tileIndex);

      // previousTile se usa para determinar si el mosaico se puede fusionar con el mosaico actual.
      let previousTile: TileMeta | undefined;
      // mergeCount ayuda a llenar los huecos creados por las combinaciones de mosaicos: dos mosaicos se convierten en uno.
      let mergedTilesCount = 0;

      // interate a través de los mosaicos disponibles.
      availableTileIds.forEach((tileId, nonEmptyTileIndex) => {
        const currentTile = tiles[tileId];

        // si el mosaico anterior tiene el mismo valor que el actual, deben fusionarse.
        if (
          previousTile !== undefined &&
          previousTile.value === currentTile.value
        ) {
          const tile = {
            ...currentTile,
            position: previousTile.position,
            mergeWith: previousTile.id,
          } as TileMeta;

          // retrasa la fusión en 250ms, por lo que la animación deslizante se puede completar.
          throttledMergeTile(tile, previousTile);
          // El mosaico anterior debe borrarse, ya que un solo mosaico puede fusionarse solo una vez por movimiento.
          previousTile = undefined;
          // incrementar el contador combinado a la posición correcta para que las fichas consecutivas eliminen los huecos.
          mergedTilesCount += 1;

          return updateTile(tile);
        }

        // else - los mosaicos anteriores y actuales son diferentes - mueva el mosaico al primer espacio libre.
        const tile = {
          ...currentTile,
          position: indexToPosition(
            calculateFirstFreeIndex(
              tileIndex,
              nonEmptyTileIndex,
              mergedTilesCount,
              maxIndex
            )
          ),
        } as TileMeta;

        // el mosaico anterior se convierte en el mosaico actual para comprobar si el siguiente mosaico se puede fusionar con este.
        previousTile = tile;

        // solo si el mosaico ha cambiado de posición, se actualizará
        if (didTileMove(currentTile, tile)) {
          return updateTile(tile);
        }
      });
    }

    // espere hasta el final de todas las animaciones.
    setTimeout(() => dispatch({ type: "END_MOVE" }), animationDuration);
  };

El código completo de este hook tiene más de 400 líneas de código, así que en lugar de pegarlo aquí, decidí mantenerlo en GitHub, así que revisa el código completo allí.

Tarea

Mencioné anteriormente que faltan algunas características. Si deseas comprender el código en profundidad, puedes bifurcar mi repositorio e implementar las siguientes características:

Puntuación – puedes definir tu propio algoritmo.
Soporte de victorias y pérdidas
Para la generación de mosaicos nuevos, elije un valor de mosaico aleatorio – ya sea 2 o 4. El 4 no debe aparecer menos del 5% de las veces.

Si deseas que revise tu código, puedes invitarme a tu solicitud de pull request en GitHub – mi nombre de usuario es mateuszsokola. Tal vez grabe un video sobre cómo reviso tu código.

Resumen

Espero que hayas disfrutado de mi tutorial. Esta vez decidí centrarme en la esencia del tema en lugar de construir React y CSS básicos, así que me salté esas partes básicas. Creo que hace que este artículo sea más fácil de digerir.

¿Algún comentario o pregunta? ¡Grítame en twitter!

Si este artículo te resultó útil, compártalo para que más desarrolladores puedan aprender de él. De vez en cuando publico videos en mi canal de YouTube, y sería genial si te suscribes a mi canal, presionas el botón me gusta y dejas un comentario debajo de tu video favorito.

¡Manténganse al tanto!

5 lecciones clave de React que los tutoriales no te enseñan

Juan C. Guaña — Thu, 11 Nov 2021 12:00:00 +0000

Artículo original escrito por: Reed Barger
Artículo original: 5 Key React Lessons the Tutorials Don't Teach You
Traducido y adaptado por: Juan C. Guaña

Hay muchos conceptos y lecciones esenciales que los desarrolladores de React necesitan saber y que simplemente no se tratan en la mayoría de los tutoriales.

He seleccionado cuidadosamente los temas que creo que son algunos de los más importantes que debes conocer, pero pocos artículos se han dedicado a cubrirlos en detalle.

Echemos un vistazo a cinco lecciones clave de React que vale la pena conocer y que quizás no encuentres en otro lugar.

1. Cómo se actualiza realmente el estado de React

Como desarrollador de React, sabes que el estado se puede crear y actualizar con los hooks useState y useReducer.

Pero, ¿qué sucede exactamente cuando actualiza el estado de un componente con cualquiera de estos hooks? ¿El estado se actualiza inmediatamente o se hace en algún momento posterior?

Veamos el siguiente código, que es una aplicación de contador muy simple. Como era de esperar, puede hacer clic en el botón y nuestro contador aumenta en 1.

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(count + 1);
  }

  return (
    
      Count: {count} {/* 1 (as we expect) */}

      
    
  );
}

Pero, ¿qué pasa si intentamos agregar una línea adicional, que también actualiza nuestro recuento en uno? ¿Qué crees que sucederá?

Cuando haces clic en el botón, ¿nuestro contador mostrado aumentará en uno o dos?

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    
      Count: {count} {/* 1?! */}

      
    
  );
}

¡Si ejecutamos este código, vemos que se incrementa solo en uno! A pesar de intentar incrementar el contador en uno dos veces, con dos actualizaciones de estado separadas.

¿Por qué nuestro contador muestra 1, a pesar de incrementar claramente el estado en 1 dos veces?

La razón de esto es que React programa una actualización de estado que se realizará cuando actualizamos el estado por primera vez. Debido a que solo está programado y no se realiza de inmediato (es asíncrono y no síncrono), nuestra variable contador no se actualiza antes de intentar actualizarla por segunda vez.

En otras palabras, debido a que la actualización del estado está programada, no se realiza de inmediato, la segunda vez que llamamos a setCount, count sigue siendo solo 0, no 1.

La forma en que podemos solucionar esto para actualizar el estado de manera confiable, a pesar de que las actualizaciones de estado son asincrónicas, es usar la función interna que está disponible dentro de la función setter de useState.

Esto nos permite obtener el estado anterior y devolver el valor que queremos que tenga en el cuerpo de la función interna. Cuando usamos este patrón, vemos que se incrementa en dos como queríamos originalmente:

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(prevCount => prevCount + 1); // 1
    setCount(prevCount => prevCount + 1); // 2
  }

  return (
    
      Count: {count}
      
    
  );
}

2. Es mejor usar varios efectos en lugar de uno

Al realizar un efecto secundario, la mayoría de los desarrolladores de React usarán useEffect solo una vez e intentarán realizar múltiples efectos secundarios dentro de la misma función de efecto.

¿Cómo se ve eso? A continuación, puedes ver dónde obtenemos datos de publicaciones y comentarios en un hook useEffect para colocarlos en sus respectivas variables de estado:

import React from "react";

export default function App() {
  const [posts, setPosts] = React.useState([]);
  const [comments, setComments] = React.useState([]);

  React.useEffect(() => {
    // fetching post data
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));

    // fetching comments data
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json())
      .then((data) => setComments(data));
  }, []);

  return (
    
      
      
    
  );
}

En lugar de intentar agrupar todos sus efectos secundarios en un solo hook de efecto, del mismo modo que puedes usar el hook useState más de una vez, puede usar varias veces useEffect.

Hacerlo nos permite separar nuestras diferentes acciones en diferentes efectos para una mejor separación de preocupaciones.

Una mejor separación de preocupaciones es un beneficio importante que brindan los hooks de React en comparación con el uso de métodos de ciclo de vida dentro de los componentes de la clase.

En métodos como componentDidMount, por ejemplo, era necesario incluir cualquier acción que queramos realizar después de que se montara nuestro componente. No puede dividir sus efectos secundarios en varios métodos – cada método del ciclo de vida en las clases se puede usar una vez y solo una vez.

El principal beneficio de React hooks es que podemos dividir nuestro código en función de lo que está haciendo. No solo podemos separar en múltiples efectos las acciones que estamos realizando después de renderizar, sino que también podemos co-ubicar nuestro estado:

import React from "react";

export default function App() {
  const [posts, setPosts] = React.useState([]);
  React.useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  const [comments, setComments] = React.useState([]);
  React.useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json())
      .then((data) => setComments(data));
  }, []);

  return (
    
      
      
    
  );
}

Esto significa que podemos poner el hook useState con el hook useEffect con el que está relacionado. Esto ayuda a organizar nuestro código mucho mejor y a comprender mejor lo que está haciendo de un vistazo.

3. No optimizar las funciones que actualizan el estado (useState, useReducer)

Una tarea común cada vez que pasamos una función callback desde llamada de un componente padre a un componente hijo es evitar que se vuelva a crear, a menos que sus argumentos hayan cambiado.

Podemos realizar esta optimización con la ayuda del hook useCallback.

useCallback fue creado específicamente para funciones callback que se pasan a componentes hijos para asegurarse de que no se vuelvan a recrear innecesariamente, lo que genera un impacto en el rendimiento de nuestros componentes cada vez que se vuelve a renderizar.

Esto se debe a que cada vez que nuestro componente padre se vuelve a renderizar, también se volverán a renderizar todos los componentes hijos. Esto es lo que hace que nuestras funciones callback se vuelvan a crear en cada re-renderización.

Sin embargo, si estamos usando una función setter para actualizar el estado que hemos creado con los hooks useState o useReducer, no necesitamos envolver eso con useCallback.

En otras palabras, no es necesario hacer esto:

import React from "react";

export default function App() {
  const [text, setText] = React.useState("")

  // Don't wrap setText in useCallback (it won't change as is)
  const handleSetText = React.useCallback((event) => {
    setText(event.target.value);
  }, [])

  return (
    
      
      
    
  );
}

function Input({ text, handleSetText }) {
  return(
    
  )
}

La razón proviene directamente de la documentación de React:

React garantiza que la identidad de la función setState es estable y no cambiará en subsecuentes renderizados. Es por eso que es seguro omitirla de la lista de dependencias de useEffect o useCallback.

Por lo tanto, no solo no necesitamos optimizarlo innecesariamente con useCallback, sino que tampoco necesitamos incluirlo como una dependencia dentro de useEffect porque no cambiará.

Es importante tener en cuenta esto porque, en muchos casos, puede reducir el código que necesitamos usar. Y lo más importante, es un intento improductivo de optimizar el código, ya que puede incurrir en problemas de rendimiento propios.

4. El hook useRef puede preservar el estado en todas las renderizaciones

Como desarrolladores de React, a veces es muy útil poder hacer referencia a un elemento de React dado con la ayuda de un ref (referencia). Creamos refs en React con la ayuda del hook useRef.

Sin embargo, es importante tener en cuenta que useRef no solo es útil para hacer referencia a un determinado elemento DOM. La documentación de React lo dice en sí misma:

El objeto “ref” es un contenedor genérico cuya propiedad current es mutable y puede contener cualquier valor.

Existen ciertos beneficios para poder almacenar y actualizar valores con useRef. Nos permite almacenar un valor que no estará en la memoria y que no se borrará al volver a renderizar.

Si quisiéramos realizar un seguimiento de un valor en las representaciones con la ayuda de una variable simple, se reinicializaría cada vez que se procese el componente. Sin embargo, si usas una referencia, el valor almacenado en ella permanecerá constante en todas las representaciones del componente.

¿Cuál es un caso de uso para aprovechar useRef de esta manera?

Esto podría ser útil en el caso de que quisiéramos realizar un efecto secundario determinado solo en el renderizado inicial, por ejemplo:

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef({ hasRendered: false });

  React.useEffect(() => {
    if (!ref.current.hasRendered) {
      ref.current.hasRendered = true;
      console.log("perform action only once!");
    }
  }, []);

  return (
    
      
    
  );
}

Intente ejecutar este código usted mismo.

Como verá, no importa cuántas veces se haga clic en el botón, se actualice el estado y se vuelva a renderizar, la acción que queremos realizar (ver console.log) solo se realiza una vez.

5. Cómo evitar que la aplicación en React se bloquee

Una de las lecciones más importantes que los desarrolladores de React deben saber, especialmente si no han enviado una aplicación React a la web, es qué hacer con los errores no detectados.

En el siguiente ejemplo, intentamos mostrar un componente Header en nuestra aplicación, pero estamos realizando una acción que da como resultado un error. Es decir, intentar obtener una propiedad a partir de un valor nulo:

import React from "react";

export default function App() {
  return (
    <>
      
    
  );
}

function Header() {
  const user = null;

  return Hello {user.name}; // error!
}

Si enviamos este código a producción, veremos una pantalla en blanco exactamente como esta:

¿Por qué no vemos nada?

Nuevamente, podemos encontrar la respuesta para esto dentro de la documentación de React:

A partir de React 16, los errores que no fueron detectados por ningún límite de error resultarán en el desmontaje de todo el árbol de componentes de React.

Mientras está en desarrollo, verás un gran mensaje de error rojo con un seguimiento de la pila que le indica dónde se puede encontrar el error. Sin embargo, cuando tu aplicación esté activa, solo verás una pantalla en blanco.

Este no es el comportamiento deseado que quieres para tu aplicación.

Pero hay una manera de solucionarlo, o al menos mostrarles a tus usuarios algo que les diga que se produjo un error si la aplicación falla accidentalmente. Puedes envolver el árbol de componentes en lo que se llama un límite de error (error boundary).

Los límites de error son componentes que nos permiten detectar errores y mostrar a los usuarios un mensaje de respaldo que les dice que ocurrió algo incorrecto. Eso podría incluir instrucciones sobre cómo descartar el error (como volver a cargar la página).

Podemos usar un límite de error con la ayuda del paquete react-error-boundary. Podemos ajustarlo al componente que creemos que es propenso a errores. También se puede envolver alrededor de todo el árbol de componentes de la aplicación:

import React from "react";
import { ErrorBoundary } from "react-error-boundary";

export default function App() {
  return (
    
      
    
  );
}

function Header() {
  const user = null;

  return Hello {user.name};
}

function ErrorFallback({ error }) {
  return (
    
      Oops, there was an error:
      {error.message}
    
  );
}

También puedes mostrar el mensaje de error como desees y diseñarlo como lo haría con cualquier componente normal.

El resultado que obtenemos cuando ocurre un error es mucho mejor:

Contexto de ejecución de JavaScript y Hoisting explicados con ejemplos de código

Juan C. Guaña — Fri, 15 Oct 2021 12:00:00 +0000

Artículo original escrito por: Tapas Adhikary
Artículo original: JavaScript Execution Context and Hoisting Explained with Code Examples
Traducido y adaptado por: Juan C. Guaña

JavaScript es un lenguaje de programación fácil de aprender en comparación con muchos de sus homólogos. Sin embargo, algunos conceptos básicos necesitan un poco más de atención si quieres comprender, depurar y escribir un mejor código.

En este artículo, vamos a aprender acerca de dos conceptos,

Contexto de ejecución
Hoisting

Como principiante en JavaScript, comprender estos conceptos te ayudará a comprender las palabras clave this, scope y closure de manera mucho más cómoda. Así que disfruta y sigue leyendo.

Contexto de ejecución en JavaScript

En general, un archivo fuente de JavaScript tendrá varias líneas de código. Como desarrolladores, organizamos el código en variables, funciones, estructuras de datos como objetos, matrices, y más.

Un Ámbito Léxico determina cómo y dónde escribimos nuestro código físicamente. Eche un vistazo al siguiente código:

function doSomething() {
  var age= 7;
  // Some more code
 }

En el código anterior, la variable edad está léxicamente dentro de la función doSomething.

Tenga en cuenta que nuestro código no se ejecuta como está. Tiene que ser traducido por el compilador a un código de bytes comprensible por computadora. Por lo tanto, el compilador necesita mapear lo que está colocado léxicamente en un lugar significativo y válido.

Por lo general, habrá más de un Ámbito Léxico en su código. Sin embargo, no todos los ámbitos se ejecutan a la vez.

El ámbito que ayuda a que se ejecute el código se denomina Contexto de Ejecución. Es el código que se está ejecutando actualmente y todo lo que lo rodea que lo ayuda a ejecutarlo.

Puede haber muchos Ámbitos Léxicos disponibles, pero el Contexto de Ejecución administra el código que se está ejecutando actualmente.

Mira la imagen a continuación para comprender la diferencia entre un Ámbito Léxico y un Contexto de Ejecución:

Ámbito Léxico vs Contexto de Ejecución

Entonces, ¿qué sucede exactamente en el contexto de ejecución? El código se analiza línea por línea, genera código de bytes ejecutable, asigna memoria y se ejecuta.

Tomemos la misma función que hemos visto anteriormente. ¿Qué crees que puede pasar cuando se ejecuta la siguiente línea?

var age = 7;

Hay muchas cosas que suceden detrás de escena. Ese fragmento de código fuente pasa por las siguientes fases antes de que finalmente se ejecute:

Tokenización: en esta fase, la cadena de código fuente se divide en varios fragmentos significativos llamados Tokens. Por ejemplo, el código var age = 7; se tokeniza en var, age, =, 7 y,;.
Parsing: La siguiente fase es el análisis, donde una matriz de tokens se convierte en un árbol de elementos anidados comprendidos por la gramática del idioma. Este árbol se llama AST (árbol de sintaxis abstracta).
Generación de código: En esta fase, el AST creado en la fase de análisis se convierte en código de bytes ejecutable. Este código de bytes ejecutable luego se optimiza aún más mediante el compilador JIT (Just-In-Time).

La siguiente imagen animada muestra la transición del código fuente al código de bytes ejecutable.

Código fuente a código byte ejecutable

Todas estas cosas suceden en un Contexto de Ejecución. Entonces, el contexto de ejecución es el entorno donde se ejecuta una parte específica del código.

Hay dos tipos de contextos de ejecución:

Contexto de ejecución global o Global Execution Context (GEC)
Contexto de ejecución de funciones o Function Execution Context (FEC)

Y cada uno de los contextos de ejecución tiene dos fases:

Fase de creación
Fase de ejecución

Echemos un vistazo detallado a cada uno de ellos y comprendamos un poco mejor.

Contexto de ejecución global (GEC) en JavaScript

Siempre que ejecutamos código JavaScript, se crea un contexto de ejecución global (también conocido como contexto de ejecución base). El contexto de ejecución global tiene dos fases.

Fase de creación

En la fase de creación, se crean dos cosas únicas:

Un objeto global llamado window (para JavaScript del lado del cliente).
Una variable global llamada this.

Si hay alguna variable declarada en el código, se asigna un espacio en la memoria para la variable. La variable se inicializa con un valor único llamado undefined. Si hay una función en el código, se coloca directamente en la memoria. Aprenderemos más sobre esta parte en la sección Hoisting más adelante.

Fase de ejecución

La ejecución del código comienza en esta fase. Aquí tiene lugar la asignación de valor de las variables globales. Ten en cuenta que aquí no se invoca ninguna función, como sucede en el contexto de ejecución de funciones. Veremos eso en un rato.

Entendamos ambas fases con un par de ejemplos.

Ejemplo 1: Cargar un script vacío

Cree un archivo JavaScript vacío con el nombre index.js. Ahora cree un archivo HTML con el siguiente contenido:




    
    
    
    Document
    


    I'm loading an empty script

Ten en cuenta que estamos importando el archivo de script vacío en el archivo HTML usando la etiqueta

Juan C. Guaña - freeCodeCamp.org

Cómo recuperar datos en React: hoja de trucos + ejemplos

1. Cómo Recuperar Datos en React Usando la API Fetch

2. Cómo Recuperar Datos en React Usando Axios

3. Cómo recuperar datos en React Usando la Sintaxis async/await

4. Cómo Recuperar Datos en React Usando un Hook de React Personalizado (useFetch)

5. Cómo Recuperar Datos en React Usando la Librería React Query

¿Quiere conservar esta guía para consultarla en el futuro?

Conviértete en un Desarrollador Profesional de React

Cómo usar Axios con React: La guía definitiva (2021)

Tabla de contenido

¿Qué es Axios?

Por qué usar Axios en React

Cómo configurar Axios con React

Cómo hacer una solicitud GET

{post.title}

Cómo hacer una solicitud POST

{post.title}

Cómo hacer una solicitud PUT

{post.title}

Cómo hacer una solicitud de ELIMINACIÓN

{post.title}

Cómo manejar errores con Axios

{post.title}

Cómo crear una instancia de Axios

{post.title}

Cómo usar la sintaxis Async-Await con Axios

{post.title}

Cómo crear un hook useAxios personalizado

{data.title}

¿Qué sigue?

Proyecto ReactJS: Crea una Wiki de personajes de Rick y Morty

También puedes ver este tutorial en YouTube si lo deseas:

Características del proyecto

Barra de búsqueda

Paginación

Filtros

Enrutamiento

Enrutamiento dinámico

Tabla de contenido

Configuración

Estructura de carpeta

App.js

Characters

index.css

Cómo obtener datos de la API

App.js ?

Cómo hacer las tarjetas de personajes

Card.js

Cómo construir la barra de búsqueda

App.js

Characters

Search.module.scss

Search.js

Cómo configurar la paginación con React-paginate

App.js

Pagination.js

Cómo hacer el componente de filtros

App.js

Filter.js

FilterBTN.js

Status.js

Status

Hora de probar en Filter.js

Species.js

Species

Hora de probar en Filter.js

Gender.js

Gender

Hora de probar en Filter.js

Cómo configurar React Router

App.js

Navbar.js

App.css

Episodios

InputGroup.js

Episodes.js

Episode name :{" "} {name === "" ? "Unknown" : name}

Air Date: {air_date === "" ? "Unknown" : air_date}

Pick Episode

Cómo crear un hook `useAxios` personalizado