Cómo crear un temporizador de cuenta regresiva con React Hooks

Introducción

En este tutorial, creará un temporizador de cuenta regresiva utilizando ganchos de React para actualizar el estado y administrar los efectos secundarios en un componente de React.

Con los ganchos de React, puedes crear un código más limpio, una lógica reutilizable entre componentes y actualizar el estado sin clases.

Los temporizadores de cuenta regresiva son un componente común de la interfaz de usuario. Pueden comunicar a los usuarios cuánto tiempo han estado haciendo algo o cuánto falta para que ocurra algún evento. El evento al que se realizará la cuenta regresiva en este tutorial es el Hacktoberfest de DigitalOcean .

Al final de este tutorial, tendrás un temporizador de cuenta regresiva funcional y reutilizable usando React useState()y useEffect()hooks.

Prerrequisitos

Antes de comenzar esta guía, necesitará lo siguiente:

• Necesitará un entorno de desarrollo que ejecute Node.js. Para instalarlo en macOS o Ubuntu 18.04, siga los pasos que se indican en Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o en la sección Instalación mediante un PPA de Cómo instalar Node.js en Ubuntu 18.04 .
• En este tutorial, crearás aplicaciones con Create React App . Puedes encontrar instrucciones para instalar una aplicación con Create React App en Cómo configurar un proyecto de React con Create React App
• También necesitarás conocimientos básicos de JavaScript, que puedes encontrar en Cómo codificar en JavaScript , junto con conocimientos básicos de HTML y CSS. Un recurso útil para HTML y CSS es Mozilla Developer Network .

Este tutorial fue verificado con Node.js v16.13.1, npmv8.2.0 y reactv17.0.2.

Paso 1: creación de un proyecto vacío

En este paso, crearás un nuevo proyecto con Create React App . Luego, eliminarás el proyecto de muestra y los archivos relacionados que se instalan cuando inicias el proyecto.

Para comenzar, crea un nuevo proyecto. En tu terminal, ejecuta el siguiente script para instalar un nuevo proyecto usando create-react-app:

npx create-react-app react-hooks-timer

Una vez finalizado el proyecto, cambie al directorio:

cd react-hooks-timer

En una nueva pestaña o ventana de la terminal, inicia el proyecto con el script de inicio Create React App . El navegador se actualizará automáticamente cuando se produzcan cambios, así que deja este script ejecutándose mientras trabajas:

npm start

Obtendrá un servidor local en ejecución. Si el proyecto no se abrió en una ventana del navegador, puede abrirlo con http://localhost:3000/. Si lo está ejecutando desde un servidor remoto, la dirección será .http://your_server_ip:3000

Su navegador se cargará con una aplicación React generada por Create React App:

Construirás un nuevo conjunto de componentes personalizados, por lo que tendrás que comenzar borrando parte del código repetitivo para poder tener un proyecto vacío.

Para comenzar, abre src/App.jsun editor de texto. Este es el componente raíz que se inyecta en la página. Todos los componentes comenzarán desde aquí. Puedes encontrar más información sobre App.jsCómo configurar un proyecto de React con Create React App .

Abrir src/App.jscon el siguiente comando:

nano src/App.js

Verás un archivo como este:

temporizador react-hooks/src/App.js

import React from 'react';import logo from './logo.svg';import './App.css';function App() {  return (    div className="App"      header className="App-header"        img src={logo} className="App-logo" alt="logo" /        p          Edit codesrc/App.js/code and save to reload.        /p        a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"                  Learn React        /a      /header    /div  );}export default App;

Luego, reemplaza todo lo que se encuentra en la returndeclaración para devolver un conjunto de divetiquetas. Esto te dará una página válida que no devuelve nada. El código final se verá así:

temporizador react-hooks/src/App.js

import React from 'react';import logo from './logo.svg';import './App.css';function App() {  return (    div    /div  )}export default App;

A continuación, elimine el logotipo. Borre la línea import logo from './logo.svg';.

Guardar y salir del editor de texto.

Por último, elimine el logotipo, ya que no lo utilizará en esta aplicación. Es una buena práctica eliminar los archivos que no utilice a medida que trabaja para evitar confusiones.

En la ventana de terminal escriba el siguiente comando:

rm src/logo.svg

Ahora que el proyecto está configurado, puedes crear tu primer componente.

Paso 2: Calcular cuánto tiempo queda

En este paso, creará una función que calcule el tiempo restante entre la fecha actual y el primer día del Hacktoberfest.

Primero, configure una función llamada calculateTimeLeft:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {};// ...

A continuación, dentro de la función, utilizará el Dateobjeto JavaScript para encontrar el actual year.

Crea una variable llamada yearque se establece en el datemétodo de JavaScript Date.getFullYear().

Agregue el siguiente código dentro de la calculateTimeLeftfunción:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {  let year = new Date().getFullYear();}// ...

Nota: Puede utilizar el Dateobjeto JavaScript para trabajar con fechas y horas.

El Date.getFullYear()método capturará el año actual.

Ahora puedes usar esta variable para calcular la diferencia entre la fecha actual y el primer día del Hacktoberfest.

Dentro de la calculateTimeLeftfunción, agrega una nueva variable llamada difference. Establécela igual a un nuevo Dateobjeto con el siguiente código:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {  let year = new Date().getFullYear();  const difference = +new Date(`10/01/${year}`) - +new Date();}// ...

El +antes del nuevo Dateobjeto es una forma abreviada de indicarle a JavaScript que convierta el objeto en un entero, lo que le brinda la marca de tiempo Unix del objeto representada como microsegundos desde la época.

Nota: Para este tutorial, asegúrese de que la fecha que está contando regresivamente esté configurada en el futuro o encontrará un error.

Para que el código sea reutilizable, se utiliza una plantilla literal de JavaScript y se agrega la yearvariable junto con el mes y el día del Hacktoberfest. El Hacktoberfest comienza el 1 de octubre de cada año. Cuando se utiliza la yearvariable en lugar de un año codificado, siempre se tendrá el año actual.

Ahora que ha calculado la cantidad total de milisegundos hasta que expire el temporizador de cuenta regresiva, debe convertir la cantidad de milisegundos a algo más amigable y legible para los humanos.

Paso 3: dar formato a días, horas, minutos y segundos

En este paso, creará un objeto vacío llamado timeLeft, utilizará una ifdeclaración para verificar si queda tiempo y calculará la cantidad total de horas, minutos y segundos mediante el uso de matemáticas y el %operador módulo ( ). Finalmente, devolverá el timeLeft.

Primero, crea el objeto vacío llamado timeLeftque luego se completará con días, horas, minutos y segundos en la ifdeclaración.

Agregue el siguiente código dentro de la calculateTimeLeftfunción:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {  let year = new Date().getFullYear();  let difference = +new Date(`10/01/${year}`) - +new Date();  let timeLeft = {};}// ...

Ahora cree una ifdeclaración que compare la differencevariable para ver si es mayor que 0.

Añade este código dentro de la calculateTimeLeftfunción:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {  let year = new Date().getFullYear();  let difference = +new Date(`10/01/${year}`) - +new Date();  let timeLeft = {};  if (difference  0) {    timeLeft = {      days: Math.floor(difference / (1000 * 60 * 60 * 24)),      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),      minutes: Math.floor((difference / 1000 / 60) % 60),      seconds: Math.floor((difference / 1000) % 60)    };  }}// ...

En este código, redondeas los números del día, las horas, los minutos y los segundos hacia abajo y eliminas el resto para obtener un valor entero. Luego, puedes comparar differencepara ver si es mayor que 0.

Por último, debes regresar timeLeftpara poder usar el valor en otra parte del componente.

Añade este código dentro de la calculateTimeLeftfunción:

temporizador react-hooks/src/App.js

// ...const calculateTimeLeft = () = {  let year = new Date().getFullYear();  let difference = +new Date(`10/01/${year}`) - +new Date();  let timeLeft = {};  if (difference  0) {    timeLeft = {      days: Math.floor(difference / (1000 * 60 * 60 * 24)),      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),      minutes: Math.floor((difference / 1000 / 60) % 60),      seconds: Math.floor((difference / 1000) % 60)    };  }  return timeLeft;}// ...

Ahora que has creado una función que calcula el tiempo restante hasta el Hacktoberfest, puedes agregar el estado de la aplicación que controlará y actualizará tu temporizador.

Paso 4: Actualizar el estado de su aplicación con useStateyuseEffect

Con React Hooks, puedes agregar capacidades de gestión de estado a componentes funcionales existentes sin convertirlos en una clase.

En este paso, importará los ganchos useStatey useEffectde React para administrar el estado en este componente.

En la parte superior del App.jsarchivo, agregue useStatey useEffecten su declaración de importación:

temporizador react-hooks/src/App.js

import React, { useEffect, useState } from "react";// ...

Este código le dice a React que desea utilizar estos ganchos específicos y su funcionalidad que está disponible en React.

Para que funcione el temporizador de cuenta regresiva, deberá conectar el método de tiempo restante que codificamos previamente para actualizar el estado:

Añade este código después de la calculateTimeLeftfunción:

temporizador react-hooks/src/App.js

// ...const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());// ...

Esta sintaxis de JavaScript se llama desestructuración de matrices .

El useStatemétodo acepta un parámetro para establecer el estado inicial y devuelve una matriz que contiene el estado actual y una función para establecer el estado.

timeLeftLlevará nuestro objeto de tiempo restante de intervalos y nos proporcionará un método para establecer el estado. Al cargar el componente, el timeLeftvalor se establece en el valor de tiempo restante actual.

A continuación, utilizará el useEffectgancho para abordar los efectos secundarios del componente.

Nota: Un efecto secundario es cualquier cosa que afecte algo fuera del alcance de la función que se está ejecutando.

En esta solución, utilizará un setTimeoutmétodo dentro del useEffectgancho. setTimeouty los setIntervalmétodos similares son patrones comunes de React cuando se usan dentro del useEffectgancho.

La mayoría de los comportamientos asincrónicos, como el setTimeoutmétodo en React, se definen con una combinación de los ganchos useEffecty useState.

Nota: Puedes leer más sobre cuándo y cómo usar métodos como setTimeouty setIntervalen esta sección de la documentación de React .

Añade este código después de la useState()función:

temporizador react-hooks/src/App.js

// ...const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());useEffect(() = {  const timer = setTimeout(() = {    setTimeLeft(calculateTimeLeft());  }, 1000);});// ...

Esto useEffectes lo que actualiza la cantidad de tiempo restante. De forma predeterminada, React volverá a invocar el efecto después de cada renderización.

timeLeftCada vez que se actualiza la variable en el estado, useEffectse activa. Cada vez que se activa, establecemos un temporizador de 1 segundo (o 1000 ms), que actualizará el tiempo restante una vez transcurrido ese tiempo.

El ciclo continuará cada segundo después de eso.

Para ayudar a eliminar la posibilidad de acumular tiempos de espera y causar un error, agregue el clearTimeoutmétodo dentro del useEffectgancho también.

Agregue un clearTimeoutmétodo y pase la variable temporizador como parámetro:

temporizador react-hooks/src/App.js

// ...useEffect(() = {  const timer = setTimeout(() = {    setTimeLeft(calculateTimeLeft());  }, 1000);  return () = clearTimeout(timer);});// ...

La returnfunción se ejecuta cada vez que useEffectse ejecuta el componente, timerexcepto la primera ejecución del componente, y borrará el tiempo de espera si se desmonta el componente.

Ahora que su estado está establecido en el calculateTimeLeft()objeto y se está actualizando dentro de su gancho de efecto, se puede usar para construir su componente de visualización.

Paso 5 — UsoObject.keys

En este paso, iterarás Object.keyssobre el timeLeftobjeto y crearás un componente de visualización. Usarás el componente de visualización para mostrar el tiempo que falta para que comience el Hacktoberfest.

Primero, crea una nueva variable bajo el useEffectgancho llamada timerComponents:

temporizador react-hooks/src/App.js

// ...const timerComponents = [];// ...

Después de iterar sobre las claves en timeLeft, usará esta variable para enviar un nuevo componente JSX con el tiempo restante.

A continuación, utilice Object.keyspara iterar sobre el timeLeftobjeto que devolvió de su calculateTimeLeftfunción.

Añade este código en la timerComponentsvariable:

temporizador react-hooks/src/App.js

// ...const timerComponents = [];Object.keys(timeLeft).forEach((interval) = {  if (!timeLeft[interval]) {    return;  }  timerComponents.push(    span      {timeLeft[interval]} {interval}{" "}    /span  );});// ...

Aquí el código recorre las propiedades del timeLeftobjeto. Si el intervalo del temporizador tiene un valor mayor que cero, agrega un elemento a la timerComponentsmatriz.

Nota: El extra {" "}en el código se utiliza para que los intervalos que muestran el tiempo restante no se crucen entre sí cuando se muestran en la pantalla.

Le permite {}usar JavaScript dentro de su JSX y ""agregar el espacio.

Ahora está listo para agregar el nuevo JSX en la returndeclaración de componentes de la aplicación para mostrar el tiempo restante hasta Hacktoberfest.

Paso 6: Visualización del tiempo restante

En este paso, agregará componentes JSX a la returndeclaración del componente de la aplicación. Utilizará un operador ternario para verificar si queda tiempo o si es hora de Hacktoberfest.

Para utilizar la timerComponentsmatriz, debe verificar su longitud y devolverla o informar al usuario que el temporizador ya ha transcurrido.

Añade este código dentro de la returndeclaración:

temporizador react-hooks/src/App.js

// ...return (  div    {timerComponents.length ? timerComponents : spanTime's up!/span}  /div);// ...

En los componentes JSX de React, se utiliza un operador ternario en lugar de una ifdeclaración de JavaScript. Esto se debe a que solo se permiten expresiones dentro de JSX.

La timerComponents.lengthlínea de código verifica si hay algo dentro de la timerComponentsmatriz y lo representa si lo hay, de lo contrario, lo representa Time's up!.

A continuación, agregará dos componentes JSX más a la returndeclaración para que el usuario sepa qué está contando regresivamente:

temporizador react-hooks/src/App.js

// ...return (  div    h1Hacktoberfest 2020 Countdown/h1    h2With React Hooks!/h2    {timerComponents.length ? timerComponents : spanTime's up!/span}  /div);// ...

Para utilizar el año actual en lugar de codificarlo 2020, puede crear una nueva variable de estado y establecer el estado inicial en new Date().getFullYear();.

Después de la primera useState()variable, agregue este código:

temporizador react-hooks/src/App.js

// ...const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());const [year] = useState(new Date().getFullYear());// ...

Este método tomará el año actual tal como lo utilizó en la calculateTimeLeftfunción.

Luego puedes eliminar el código duro 2020de tu archivo h1y reemplazarlo con year:

temporizador react-hooks/src/App.js

// ...return (  div    h1Hacktoberfest {year} Countdown/h1    h2With React Hooks!/h2    {timerComponents.length ? timerComponents : spanTime's up!/span}  /div);// ...

Esto mostrará la variable de estado, que ahora siempre tendrá el año actual. El proyecto completado se verá así:

Consulte este repositorio de GitHub para ver el código completo.

Conclusión

En este tutorial, creó un componente de interfaz de usuario de cuenta regresiva utilizando los ganchos useStatey useEffectpara administrar y actualizar el estado de su aplicación.

Desde aquí, puedes continuar tu aprendizaje con el estilo de los componentes de React para crear una interfaz de usuario de cuenta regresiva más atractiva.

También puedes seguir la serie completa Cómo codificar en React.js en DigitalOcean para aprender aún más sobre el desarrollo con React.