Verwenden von Moment.js für React-Apps

1. Was ist Moment.js
2. So verwenden Sie Moment.js mit React
3. Moment.js Praxisbeispiel
4. react-moment-Paket
5. Andere praktikable Alternativen

Es ist schwer, sich eine moderne Webanwendung vorzustellen, die Datums- und Zeitangaben enthält. React-Anwendungen sind nicht die Ausnahme von der Regel.

Die Verwaltung von Datum und Uhrzeit ist das Herzstück beim Erstellen dynamischer Anwendungen in React. Aus diesem Grund enthält JavaScript ein Date-Objekt, das für einfache Operationen mit Datum und Uhrzeit nützlich ist.

Allerdings ist die Arbeit mit dem Date-Objekt leichter gesagt als getan. Die Datums-API reicht nicht aus, um die Daten zu formatieren, zu internationalisieren und im Allgemeinen zu manipulieren.

Aus diesem Grund hat die Community der JavaScript-Entwickler viele Datumsbibliotheken erstellt, um einige der fortgeschritteneren Operationen auszuführen. Dadurch können wir viel effizienter mit Daten arbeiten, ohne Zeit und Energie zu verschwenden.

Was ist Moment.js

Es ist eine der stabilsten Bibliotheken zum Formatieren von Datumsangaben in JavaScript. Die Moment-Bibliothek wird hauptsächlich zum Analysieren und Formatieren von Datenwerten verwendet, verfügt jedoch über viele Funktionen, die zum Erstellen moderner Apps nützlich sein können.

Moment ist zum Beispiel auch für die Datenvalidierung nützlich. Es funktioniert sowohl mit Node.js als auch mit normalem JavaScript.

Es kann sowohl für Frontend-Anwendungen als auch für die serverseitige Programmierung verwendet werden. Es ist auch mit vielen gängigen JavaScript-Bibliotheken kompatibel, einschließlich React und TypeScript.

Die Bibliothek stellt eine API bereit, die das native Date-Objekt in JavaScript umschließt. Auf diese Weise müssen wir nicht mit der ursprünglichen Date-API interagieren oder sie ändern.

Die Moment-Bibliothek ist leicht zu erlernen und unterstützt als Bonus viele Sprachen. So kann es unsere Internationalisierungsprobleme leicht lösen.

Zu diesem Zeitpunkt befindet sich die Bibliothek im Wartungsmodus. Es ist immer noch stabil und alle Methoden funktionieren so, wie sie sollen.

Die Entwickler entschieden sich jedoch, die Veröffentlichung neuer Versionen einzustellen. Wenn Sie Moment gewohnt sind und es für Ihre React-App verwenden möchten, können Sie dies tun.

Diejenigen, die sich Sorgen um die langfristige Zukunft ihrer App machen, sollten vielleicht andere JavaScript-Datumsbibliotheken in Betracht ziehen.

So verwenden Sie Moment.js mit React

Da Moment.js eine externe Bibliothek ist, müssen wir diese in unserem Projektordner installieren. Und wenn wir schon dabei sind, können wir auch das Paket react-moment installieren, auf das wir später noch zu sprechen kommen.

Wenn unsere App die Zeitzonenfunktionen benötigt, empfiehlt es sich, moment-timezone ebenfalls zu installieren:

npm install --save moment moment-timezone

Sobald wir mit der Installation der Pakete fertig sind, müssen wir sie importieren. Suchen Sie die Datei, in der wir sie verwenden möchten, und importieren Sie sie:

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

Wir schreiben Moment groß, weil es sich um eine React-Komponente handelt, die speziell für die Datumsmanipulation in dieser Bibliothek erstellt wurde.

Moment.js Praxisbeispiel

Sehen wir uns ein Beispiel für die Verwendung der Moment-Bibliothek in React an.

let momentObject = moment()

In diesem Beispiel geben wir ein einfaches Moment-Objekt zurück, das die Ausführungszeit des Codes darstellt. Die Moment-Bibliothek enthält viele andere Methoden, die viel interessanter sind.

Beispielsweise kann die Methode .add() das Objekt mutieren, indem sie eine bestimmte Zeit hinzufügt. Schauen wir uns ein Beispiel an:

moment().add(10, 'days')

Wie wir sehen können, gibt das erste Argument der Methode .add() die Menge an, und das zweite Argument ist notwendig, um den Zeitraum anzugeben. Wir können mehrere Methoden miteinander verketten, zum Beispiel:

moment().add(10, 'days').add(1, 'months')

Dieser Code fügt dem von der Funktion moment() zurückgegebenen Datum einen weiteren Monat hinzu.

react-moment-Paket

react-moment basiert auf dem moment-Paket, bietet aber die gleichen Features in einer Komponente. Schauen wir uns ein Beispiel an, in dem wir die Zeichenfolge als Datum formatieren müssen.

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

Alternativ können wir das Attribut date der Komponente Moment verwenden, um die Zeichenfolge zu übergeben. Das Datum muss nicht einmal ein String sein – es kann ein Array, ein Objekt oder die Instanz des Date-Objekts sein.

Die Komponente Moment bietet eine einfache Möglichkeit, die Kernfunktionen der Moment-Bibliothek in React-Apps zu verwenden. Die Komponente akzeptiert viele Requisiten, wie zum Beispiel: date. format, trimm und viele andere.

Detaillierte Informationen finden Sie in der offiziellen Dokumentation.

Andere praktikable Alternativen

Die Moment-Bibliothek ist nicht die einzige Bibliothek zum Arbeiten mit Datumsangaben in JavaScript. Pakete wie date-fns bieten eine tolle Alternative.

Es verfügt über eine hochinformative Dokumentation und so viele Funktionen wie die Moment-Bibliothek. Jede Funktion in dieser Bibliothek ist dokumentiert.

Ihre Namen sind benutzerfreundlich, um den Zweck der Funktion leicht verständlich zu machen.