Das Erstellen einer komplexen Benutzeroberfläche in React, wie z. B. eines Dashboards, kann entmutigend sein, wenn Sie es von Grund auf neu erstellen. Zum Glück müssen Sie das nicht tun.

Eine der besten Komponentenbibliotheken, die Sie verwenden können, ist Tremor, mit der Sie mit wenig Aufwand moderne, reaktionsschnelle Dashboards in React erstellen können. Finden Sie heraus, wie Sie mit Tremor Dashboards in React erstellen.

Was ist Tremor?

Tremor ist eine moderne Open-Source-UI-Komponentenbibliothek auf niedriger Ebene zum Erstellen von Dashboards in React. Tremor baut auf Tailwind CSS, React und Recharts (einer weiteren komponentenbasierten Diagrammbibliothek für React) auf. Darüber hinaus verwendet es Symbole von Heroicons.

Es verfügt über mehr als 20 Komponenten mit allen wesentlichen Elementen zum Erstellen einer fantastischen analytischen Benutzeroberfläche wie Diagramme, Karten und Eingabeelemente. Die Bibliothek enthält kleine, modulare Komponenten wie Badges, Schaltflächen, Dropdowns und Registerkarten, die Sie kombinieren können, um vollwertige Dashboards zu erstellen.

Was Tremor auszeichnet, ist, dass es sehr eigensinnig ist. Solange Sie also mit den Entscheidungen der Bibliothek einverstanden sind, können Sie im Handumdrehen ein professionell aussehendes Dashboard starten.

Tremor unterstützt natürlich die Anpassung und macht es einfach, dies über das Props-System von React zu tun.

So fangen Sie mit Tremor an

Beginnen Sie mit Erstellen einer neuen React-App Verwendung der Erstellen-Reagieren-App Paket (oder Vite, wenn Sie das bevorzugen).

Node.js und npm müssen bereits auf Ihrem System installiert sein. Sie können dies durch Ausführen bestätigen Knoten - Version und dann npm --version auf einer Befehlszeile. Wenn einer der Befehle fehlt, können Sie ihn mit einem einfachen Prozess installieren; siehe diese Anleitung Installieren von Node.js und npm unter Windows, Zum Beispiel.

Einrichten Ihres React-Projekts mit Tremor

1. Öffnen Sie Ihr Terminal und navigieren Sie mit zu Ihrem bevorzugten Verzeichnis CD Befehl.
2. Laufen npx create-react-app zittern-tutorial. Dieser Befehl erstellt eine neue React-Anwendung mit dem Namen Zittern-Tutorial auf Ihrem System im aktuellen Verzeichnis.
3. Wechseln Sie in das App-Verzeichnis, indem Sie ausführen cd tremor-tutorial.
4. Installieren Sie Tremor in Ihrem React-Projekt mit dem folgenden Befehl:

   npm installiere @tremor/react

5. Sobald Sie Tremor installiert haben, importieren Sie das Paket in Ihre App.js (oder main.jsx wenn Sie Vite verwendet haben), indem Sie die folgende Zeile am Ende Ihrer Importe hinzufügen:

   importieren"@tremor/react/dist/esm/tremor.css";

Obwohl Tremor Tailwind CSS verwendet, müssen Sie es nicht in Ihrer React-App installieren, um die Bibliothek zu verwenden. Dies liegt daran, dass Tremor Tailwind bereits intern eingerichtet hat. Wenn Sie jedoch möchten, sehen Sie sich unser Tutorial an Installation von Tailwind CSS in React.

Als nächstes installieren Sie Heroicons in Ihrem Projekt mit dem folgenden Befehl:

npm i [email protected] @tremor/react

Lassen Sie uns nun unnötigen Code in unserem entfernen src/App.js Datei. Hier ist unser Startercode drin App.js:

importieren"./App.css";
importieren"@tremor/react/dist/esm/tremor.css";
ExportStandardFunktionApp() {
zurückkehren (


Unser fantastisches Reaktions-Dashboard</h1> 
 </div>
 );
}

Erstellen Sie als Nächstes eine dedizierte Komponenten Unterordner in Ihrem Quelle Ordner. Darin Komponenten Ordner, erstelle einen neuen Dashboard.js Datei und fügen Sie den folgenden Code hinzu:

FunktionArmaturenbrett() {
zurückkehren<div>Armaturenbrettdiv>;
}
ExportStandard Armaturenbrett;

Importieren Sie die Dashboard-Komponente in App.js indem Sie nach anderen Importen die folgende Anweisung hinzufügen:

importieren Armaturenbrett aus"./komponenten/Dashboard";

Zeigen Sie schließlich die Komponente in Ihrer React-App an, indem Sie sie hinzufügen unter dem h1 Element.

Erstellen eines Dashboards mit Tremor

Um mit Tremor ein komplettes Dashboard mit minimalem Aufwand zu erstellen, wählen Sie einen der verfügbaren Blöcke aus. Blöcke sind vorgefertigte Layouts, die aus verschiedenen kleinen modularen Komponenten bestehen.

Ein guter Ausgangspunkt ist Tremor-Blockaden Abschnitt, der verschiedene Arten von vorgefertigten Blockkomponenten zeigt, die Sie verwenden können. Mit Layout-Shells können Sie beispielsweise verschiedene Komponenten zusammensetzen, um ein Dashboard zu erstellen.

Fügen Sie zunächst den folgenden Code zu Ihrer hinzu Dashboard.js Datei:

importieren {
 Karte,
 Titel,
 Text,
 ColGrid,
 Gebietskarte,
 Fortschrittsanzeige,
 Metrisch,
 Biegen,
} aus"@zittern/reagieren";
FunktionArmaturenbrett() {
zurückkehren (


 {/* Hauptabschnitt */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI-Abschnitt */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Platzhalter zum Festlegen der Höhe */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
Export Standard Dashboard;
Der Shell-Block enthält verschiedene Komponenten, die Sie importieren am Anfang der Datei. Wenn Sie dies in Ihrem Browser in der Vorschau anzeigen, sehen Sie nur zwei leere Blöcke.
Sie können Ihre Blöcke mit den vorgefertigten Komponenten von Tremor wie einem Diagramm, einer Karte oder einer Tabelle füllen. Sie können Daten aus einer API (REST oder GraphQL) abrufen oder in einem Array von Objekten direkt in Ihrer Komponente speichern.
Um Ihrem Shell-Block eine Komponente hinzuzufügen, ersetzen Sie die 
 Zeile mit dem Folgenden:
 
 
Nach Fügen Sie dazu das folgende Array vor Ihrer return-Anweisung hinzu (dies sind die Daten, die im Hauptabschnitt des Dashboards angezeigt werden):
 
 // Data to display in Die main section
const data = [
 {
 Month: "Jan 21",
 Sales: 2890,
 Gewinn: 2400,
 },
 {
 Monat: "Feb 21",
 Umsatz: 1890,
 Gewinn: 1398,
 },
 // ...
 {
 Monat: "22. Januar",
 Umsatz: 3890,
 Gewinn: 2980,
 },
];
const valueFormatter = (number) =>< /span>
$ ${Intl.NumberFormat("us").Format (number).toString()};
Als nächstes fügen Sie Ihrer Datei nach valueFormatter den folgenden Code hinzu:
 
 // In KPI anzuzeigende Daten section
const categorys = [
 {
 title: "Sales",
 metric: "$ 12.699",
 ProzentWert: 15,9,
 Ziel: "$ 80.000",
 },
 {
 Titel: "Gewinn",
 Messwert: "$ 45.564" span>,
 Prozentwert: 36,5,
 Ziel: "$ 125.000",
 },
 {
 Titel: "Kunden",
 Messwert: "1.072",
 Prozentwert:  53.6,
 Ziel: "2.000",
 },
 {
 Titel: "Jahresumsatzübersicht",
 Messwert: "$ 201.072",
 Prozentwert: 28,7,
 Ziel: "$ 700.000",
 },
];
Für die categories-Array von Objekten, müssen Sie jedes Objekt mappen, um die Daten in separaten Card-Komponenten anzuzeigen. Löschen Sie zuerst die Card-Komponente im KPI-Abschnitt und ersetzen Sie sie dann durch diesen Code:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metrik> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Und das war's. Sie haben Ihr erstes Dashboard mit Tremor erstellt. Zeigen Sie Ihr Dashboard an, indem Sie npm start ausführen. Es sollte dem obigen Screenshot ähneln.
 Anpassen von Tremor-Komponenten
Tremor ermöglicht die Anpassung mithilfe von Requisiten. Sie müssen die Dokumentation der Komponente lesen, die Sie anpassen möchten, und alle Eigenschaften überprüfen, die mit ihren Standardwerten enthalten sind.
Zum Beispiel: Wenn Sie ein  haben, können Sie die x-Achse ausblenden, indem Sie die Requisite showXAxis={false} übergeben oder die Höhe mit ändern Höhe={h-40}. Für Requisiten, die in Tailwind CSS gefundene Werte wie Größe, Abstände, Farben und den Rest deklarieren, müssen Sie Tailwind-Hilfsklassen verwenden.
 Einfaches Erstellen komplexer React-Dashboards
Dank Komponentenbibliotheken wie Tremor müssen Sie nicht alle erstellen einzelnen Teil Ihrer Benutzeroberfläche von Grund auf neu. Die Verwendung einer Bibliothek wie Tremor kann Ihnen sowohl die Zeit als auch die Kopfschmerzen beim Erstellen komplexer reaktionsschneller Benutzeroberflächen ersparen.