¿Conoces la librería date-fns para React? El mundo de la programación crece cada día más. Por ello, cada año se crean decenas de herramientas para satisfacer distintas necesidades del programador. Una de estas herramientas son las librerías, un conjunto de archivos que nos facilitan la ejecución de distintas acciones. Existen librerías para estilos, para elementos, para componentes, etc. En este post, te enseñaremos qué es la librería date-fns para React, muy útil cuando queremos insertar datos de fechas en nuestros proyectos.
¿Qué es la librería date-fns para React?
La librería date-fns para React es una herramienta que nos permite manipular las fechas de JavaScript, tanto en el navegador como en Node.js. Como toda librería, date-fns nos proporciona una serie de archivos con distintos componentes para las acciones que necesitemos. Como puedes leer en el npm de la librería date-fns para React, este paquete es modular, inmutable, puro y utiliza fechas nativas que soportan tanto Flow como TypeScript.
Ten en cuenta que date-fns cumple funciones muy similares al paquete «Moment» de JavaScript, pero es mucho más liviana, porque no tiene la misma cantidad de código y opciones. Por ello, es ideal cuando solo queremos importar una función, pues será menos pesada dentro de nuestro código. Si quieres conocer más sobre Moment, te invitamos a su página oficial momentjs.com.
La librería date-fns para React nos permite hacer import bastante selectivos. Te ponemos un ejemplo. Supongamos que tenemos un proyecto en el que queremos usar la función formatDistanceToNow de esta librería. Entonces, bastará con instalar date-fns y luego insertar la siguiente línea de código en el archivo donde la necesites:
import formatDistanceToNow from ‘date-fns/formatDistanceToNow’;
La función formatDistanceToNow nos permite mostrar en pantalla cuánto ha pasado desde que ha sucedido un evento en particular. En este sentido, puede ser muy útil en redes sociales para formatear el tiempo que hace desde que un usuario ha creado un contenido determinado. Para ello, podemos insertar la etiqueta semántica de HTML <time>. Dentro de ella, podemos pasar una función con la fecha en la que el usuario ha creado el contenido. En las siguientes líneas, hemos pasado este dato con el campo updatedAt:
< time dateTime = {updatedAt}>
{formatDistanceToNow (new Date (updatedAt))}
</time>
¿Qué sigue?
Ahora que sabes algo más sobre qué es la librería date-fns para React y una de sus funciones más usadas, ¡te invitamos a seguir aprendiendo sobre las herramientas de la programación web! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas y lenguajes como React, Babel, JavaScript, HTML, CSS y webPack. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ya y cambia tu vida!
