Approches multiples du formatage de la date dans React

Lors de la création d’applications React, les développeurs doivent trouver un moyen de travailler avec des dates.

Cela implique le formatage, l’analyse et la manipulation des valeurs de date. Il est difficile de penser à une application React qui n’implique pas de dates d’une manière ou d’une autre.

Le problème avec les dates en programmation est que les valeurs ne sont pas toujours formatées ou classées comme vous le souhaitez. Parfois, les valeurs de date sont disponibles sous forme de chaînes, de tableaux ou même d’objets.

D’autres fois, ils n’incluent que l’année, tandis que d’autres valeurs de date incluent tout, des années aux millisecondes. JavaScript inclut l’objet Date pour résoudre ce problème, qui fournit quelques bonnes méthodes de gestion des données.

Cependant, il est encore insuffisant pour des besoins plus complexes, comme l’internationalisation et l’addition/soustraction de valeurs temporelles.

Les développeurs ont résolu ce problème en créant de nombreuses bibliothèques pour travailler avec des dates en JavaScript. Même les développeurs Web les plus expérimentés choisissent d’utiliser des bibliothèques externes pour interagir directement avec l’API Date.

Ces packages externes fournissent une API plus simple pour le formatage, l’analyse et la manipulation de la date. Ils économisent l’énergie et le temps des développeurs JavaScript consacrés à la gestion des dates.

Les bibliothèques les plus populaires sont moment, date-fns et luxor, pour n’en nommer que quelques-unes.

Objet de date en JavaScript

L’objet Date en JavaScript n’est pas complètement inutile. Il fournit quelques méthodes utiles pour des opérations simples, telles que .getDay(), qui renvoie le jour de la semaine d’une valeur de date spécifique.

L’objet Date peut être utile si vous connaissez toutes les mises en garde et les détails complexes de chaque méthode. Par rapport aux bibliothèques externes, le plus gros inconvénient de l’objet Date est qu’il est modifiable.

Cette fonctionnalité peut entraîner des incohérences sur votre site Web. Par exemple, il est facile d’écraser accidentellement des valeurs de date modifiables et de finir par afficher la mauvaise date sans le savoir.

Voici les méthodes les plus utiles disponibles pour les objets Date :

• .toDateString() : convertit la valeur de la date en une chaîne verbale, ce qui est beaucoup plus lisible. Par exemple, la date d’aujourd’hui sera formatée comme la chaîne 'Fr Dec 17, 2021'.
• .getDay() : retourne le jour dans une semaine. S’il était appelé aujourd’hui, il renverrait 'Friday'.

Lisez la documentation sur MDN officielle pour approfondir vos connaissances sur l’objet Date et toutes ses méthodes associées.

Mise en forme dans React à l’aide de la bibliothèque date-fns

Les bibliothèques de dates, telles que moment ou date-fns, sont les solutions les plus simples pour gérer les dates dans React.

Il existe également la bibliothèque react-moment, et elle fournit un composant React avec toutes les fonctionnalités de sa bibliothèque sœur. Ces bibliothèques sont d’excellentes solutions pour gérer la date et l’heure dans les applications React.

Tout d’abord, vous devez installer le package date-fns en saisissant la commande suivante dans le shell :

npm install date-fns

Une fois installé, vous pouvez importer la bibliothèque.

L’un des avantages du package date-fns est sa modularité. Vous n’avez pas besoin d’importer le package entier, juste les fonctions dont vous avez besoin.

Il s’agit d’une approche extrêmement légère qui garantit les hautes performances de votre application. Voici un exemple de formatage d’une date à l’aide de 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>
  );
}

Comme vous pouvez le voir sur codesandbox, la sortie finale se lit comme suit : We are currently in December.

Il s’agit d’une simple démonstration de l’utilité de la librairie date-fns et de sa puissance de formatage. Dans ce cas, nous utilisons une approche modulaire et n’importons que la fonction format.

Ensuite, nous l’appelons à l’intérieur de notre JSX, entre accolades, afin que l’appel à la fonction soit interprété comme du JavaScript normal. Les accolades nous permettent également d’obtenir une instance de l’objet Date, qui est le premier argument de la fonction format().

Dans le deuxième argument, nous spécifions le texte que nous voulons afficher et comment nous voulons le formater. Dans ce cas, nous avons choisi le format MMMM, qui renvoie le nom complet du mois.

Nous aurions pu choisir MMM, et le résultat serait We are currently in Dec. Ceci n’est qu’une simple démonstration des capacités de formatage de ce paquet.

Pour obtenir une image plus complète, consultez la documentation pour leur fonction format().

Les avantages de l’utilisation de date-fns pour le formatage dans React

La bibliothèque présente un certain nombre d’avantages par rapport à ses alternatives. Nous avons déjà mentionné son approche modulaire, qui augmente encore sa rapidité.

La bibliothèque fournit une couche d’abstraction pour travailler avec des objets Date, elle est donc familière et ne réinvente pas la roue. Il prend en charge de nombreux fuseaux horaires et langues.

date-fns a une API simple. Plus important encore, il est accompagné d’une documentation informative, qui explique en détail les cas d’utilisation.

Nous avons déjà démontré que cela fonctionne très bien avec React. La bibliothèque fonctionne également à merveille avec TypeScript et Flow.