Cuenta regresiva para navidad en React
Muchas veces es necesario tener una cuenta regresiva en nuestra aplicación, ya sea para estrenar un producto, causar expectativa, y ¿por que no?, para saber cuanto falta para que llegue la Navidad.
Muchas veces es necesario tener una cuenta regresiva en nuestra aplicación, ya sea para estrenar un producto, causar expectativa, y ¿por que no?, para saber cuanto falta para que llegue la Navidad.
En este pequeño artículo te voy a mostrar como podrías hacerlo en React puro, sin ninguna dependencia.
Lo que vas a construir
¡Manos a la obra!
Primero crearemos nuestro entorno de trabajo. Para efectos de este artículo utilizaré yarn para crear el proyecto, pero si lo deseas puedes usar npx o npm.
El comando en yarn para crear el proyecto con create-react-app es el siguiente:
yarn create react-app christmas-countdown
El nombre que elegí para es “christmas-countdown”, pero puedes cambiarlo por que quieras.
Una vez se hayan creado todas las carpetas e instalado las dependencias necesarios vamos a abrir el archivo App.js que se encuentra dentro de la carpeta src.
Una de las primeras cosas que vamos a querer saber es si ya es navidad o no, para esto podemos tener una función como la siguiente:
La constante now contiene la fecha actual. Por lo tanto, en la linea 3, estamos fijandonos si el mes actual es diciembre, y el numero de día es 25.
Recuerda que los meses, en JavaScript, comienzan en 0. Por eso diciembre esta representado por el 11.
Otra funcionalidad que necesitaremos es la de conocer la siguiente fecha de navidad:
Para hacer trabajar la cuenta regresiva vamos a hacer uso de distintos hooks:
- useCallback
- useEffect
- useRef
- useState
Además utilizaremos la función setInterval que nos provee JavaScript.
Finalmente nos resta mostrar el contenido:
Puedes notar que para mostrar el tiempo restante estamos utilizando una función llamada padNumber. Lo que hace esta función es convertir el numero que recibe como parametro a un String, agregándole un 0 al principio en caso de que fuera menor que 10 (ten en cuenta que esta función solo recibirá números positivos en el contexto de esta aplicación).
Es decir que el 9 se mostraría como “09”, el 8 como “08”, y así sucesivamente.
Código Final
Combinando todo nuestro código deberia de quedar de la siguiente forma:
Agregando esilos
Para que tu aplicación se vea mejor te dejo mi archivo App.css aquí.
Conclusión
A lo largo de este artículo vimos como podemos crear una cuenta regresiva en React sin utilizar ninguna dependencia en especial.
Ten en cuenta que podrias modularizar mejor el código, tal vez añadiendo un archivo utils.js donde vayas dejando funciones como getNextChristmasDate. Otra cosa en la que podrias pensar es en separarar mejor la lógica de la función updateTimeLeft del componente a través de algún custom hook.
