Librería date-fns para React

Autor: | Última modificación: 27 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!