Múltiples enfoques para formatear la fecha en React

Al crear aplicaciones React, los desarrolladores deben encontrar una manera de trabajar con fechas.

Esto implica formatear, analizar y manipular los valores de fecha. Es difícil pensar en una aplicación React que no involucre fechas de una forma u otra.

El problema con las fechas en la programación es que los valores no siempre tienen el formato o la clasificación que desea. A veces, los valores de fecha están disponibles como cadenas, matrices o incluso objetos.

Otras veces solo incluyen el año, mientras que otros valores de fecha incluyen todo, desde años hasta milisegundos. JavaScript incluye el objeto Date para resolver este problema, que proporciona algunos buenos métodos para administrar datos.

Sin embargo, sigue siendo insuficiente para necesidades más complejas, como la internacionalización y la suma/resta de valores de tiempo.

Los desarrolladores resolvieron este problema creando numerosas bibliotecas para trabajar con fechas en JavaScript. Incluso los desarrolladores web más experimentados optan por utilizar bibliotecas externas para interactuar directamente con la API Date.

Estos paquetes externos proporcionan una API más simple para formatear, analizar y manipular la fecha. Conservan la energía y el tiempo de los desarrolladores de JavaScript dedicados a administrar las fechas.

Las bibliotecas más populares son moment, date-fns y luxor, por nombrar algunas.

Objeto de fecha en JavaScript

El objeto Date en JavaScript no es completamente inútil. Proporciona algunos métodos útiles para operaciones simples, como .getDay(), que devuelve el día de la semana de un valor de fecha específico.

El objeto Date puede ser útil si conoce todas las advertencias y los detalles intrincados de cada método. En comparación con las bibliotecas externas, la mayor desventaja del objeto Date es que es mutable.

Esta característica puede causar inconsistencias en su sitio web. Por ejemplo, es fácil sobrescribir accidentalmente valores de fechas mutables y terminar mostrando la fecha incorrecta sin saberlo.

Estos son los métodos más útiles disponibles para los objetos Date:

• .toDateString(): convierte el valor de la fecha en una cadena verbal, que es mucho más legible. Por ejemplo, la fecha de hoy se formateará como la cadena 'Fr Dec 17, 2021'.
• .getDay(): devuelve el día de la semana. Si se llamara hoy, devolvería 'Friday'.

Lea la documentación oficial en MDN para obtener un conocimiento más profundo del objeto Date y todos sus métodos asociados.

Formateo en React usando la biblioteca date-fns

Las bibliotecas de fechas, como moment o date-fns, son las soluciones más simples para administrar fechas en React.

También está la biblioteca react-moment, y proporciona un componente React con todas las características de su biblioteca hermana. Estas bibliotecas son excelentes soluciones para manejar la fecha y la hora en las aplicaciones React.

Primero, debes instalar el paquete date-fns ingresando el siguiente comando en el shell:

npm install date-fns

Una vez instalado, puede importar la biblioteca.

Una de las mejores cosas del paquete date-fns es modular. No tiene que importar el paquete completo, solo las funciones que necesita.

Este es un enfoque extremadamente ligero y garantiza el alto rendimiento de su aplicación. Aquí hay un ejemplo de cómo formatear una fecha usando date-fns:

import "./styles.css";
import {format} from 'date-fns'
export default function App() {
  return (
    <div className="App">
      {format(new Date(), "'We are currently in' MMMM")}
    </div>
  );
}

Como puede ver en codesandbox, el resultado final dice: We are currently in December.

Esta es una simple demostración de la utilidad de la biblioteca date-fns y su poder de formateo. En este caso, usamos un enfoque modular y solo importamos la función format.

Luego, lo llamamos dentro de nuestro JSX, entre llaves, para que la llamada a la función se interprete como JavaScript normal. Las llaves también nos permiten obtener una instancia del objeto Date, que es el primer argumento de la función format().

En el segundo argumento, especificamos el texto que queremos generar y cómo queremos formatearlo. En este caso, elegimos el formato MMMM, que devuelve el nombre completo del mes.

Podríamos haber elegido MMM, y el resultado sería We are currently in Dec. Esta es solo una demostración simple de las capacidades de formateo de este paquete.

Para obtener una imagen más completa, consulte la documentación para su función format().

Las ventajas de usar date-fns para formatear en React

La biblioteca tiene una serie de ventajas sobre sus alternativas. Ya mencionamos su enfoque modular, que aumenta aún más su velocidad.

La biblioteca proporciona una capa de abstracción para trabajar con objetos de Date, por lo que es familiar y no reinventa la rueda. Es compatible con muchas zonas horarias e idiomas.

date-fns tiene una API sencilla. Lo más importante es que viene con documentación informativa, que explica los casos de uso en detalle.

Ya hemos demostrado que funciona muy bien con React. La biblioteca también funciona maravillosamente con TypeScript y Flow.