Construirea unei interfețe de utilizator complexă în React, cum ar fi un tablou de bord, poate fi descurajantă dacă o faci de la zero. Din fericire, nu trebuie să faci asta.

Una dintre cele mai bune biblioteci de componente pe care le puteți utiliza este Tremor, care vă permite să creați tablouri de bord moderne și receptive în React, cu puțin efort. Aflați cum să utilizați Tremor pentru a crea tablouri de bord în React.

Ce este Tremor?

Tremor este o bibliotecă de componente de interfață de utilizare modernă, open-source, la nivel scăzut, pentru construirea de tablouri de bord în React. Tremor se bazează pe Tailwind CSS, React și Recharts (o altă bibliotecă de diagrame bazată pe componente pentru React). În plus, folosește icoane din Heroicons.

Se mândrește cu peste 20 de componente cu toate elementele esențiale pentru construirea unei interfețe analitice fantastice, cum ar fi diagrame, carduri și elemente de intrare. Biblioteca include componente mici, modulare, cum ar fi insigne, butoane, meniuri derulante și file, pe care le puteți combina pentru a crea tablouri de bord complete.

Ceea ce îl face pe Tremor să iasă în evidență este faptul că are o mare opinie, așa că atâta timp cât sunteți de acord cu deciziile bibliotecii, puteți activa un tablou de bord cu aspect profesional într-o briză.

Tremor acceptă personalizarea, desigur, și ușurează acest lucru prin sistemul de recuzită React.

Cum să începeți cu Tremor

Începe prin crearea unei noi aplicații React folosind create-react-app pachet (sau Vite dacă asta preferați).

Va trebui să aveți deja instalate Node.js și npm pe sistemul dvs. Puteți confirma acest lucru rulând node --versiune și apoi npm --versiune pe o linie de comandă. Dacă oricare dintre comenzi lipsește, le puteți instala folosind un proces simplu; vezi acest ghid pentru instalarea Node.js și npm pe Windows, de exemplu.

Configurați-vă proiectul React cu Tremor

1. Deschideți terminalul și navigați la directorul preferat folosind CD comanda.
2. Alerga npx create-react-app tremor-tutorial. Această comandă va crea o nouă aplicație React numită tremor-tutorial pe sistemul dvs. în directorul curent.
3. Comutați la directorul aplicației rulând cd tremor-tutorial.
4. Instalați Tremor în proiectul dvs. React folosind următoarea comandă:

   npm install @tremor/react

5. După ce ați instalat Tremor, importați pachetul în dvs App.js (sau main.jsx dacă ați folosit Vite) adăugând următorul rând în partea de jos a importurilor dvs.:

   import„@tremor/react/dist/esm/tremor.css”;

Deși Tremor folosește Tailwind CSS, nu trebuie să îl instalați în aplicația React pentru a utiliza biblioteca. Acest lucru se datorează faptului că Tremor are deja Tailwind configurat intern. Cu toate acestea, dacă doriți, consultați tutorialul nostru instalând Tailwind CSS în React.

Apoi, instalați Heroicons în proiectul dvs. utilizând următoarea comandă:

npm i [email protected] @tremor/react

Acum, să eliminăm codul care nu este necesar din programul nostru src/App.js fişier. Iată codul nostru de pornire App.js:

import„./App.css”;
import„@tremor/react/dist/esm/tremor.css”;
exportMod implicitfuncţieApp() {
întoarcere (


Tabloul nostru de bord minunat React</h1> 
 </div>
 );
}

Apoi, creați o pagină dedicată componente subdosarul din dvs src pliant. In aceea componente folder, creați un nou Dashboard.js fișier și adăugați următorul cod:

funcţieBord() {
întoarcere<div>Borddiv>;
}
exportMod implicit Bord;

Importați componenta Dashboard în App.js prin adăugarea următoarei declarații după alte importuri:

import Bord din„./components/Dashboard”;

În cele din urmă, afișați componenta în aplicația dvs. React prin adăugare sub h1 element.

Crearea unui tablou de bord cu Tremor

Pentru a crea un tablou de bord complet folosind Tremor, cu un minim de agitație, selectați unul dintre blocurile disponibile. Blocurile sunt configurații prefabricate formate din diferite componente modulare mici.

Un bun punct de plecare este Blocuri de tremor secțiune care prezintă diferite tipuri de componente bloc prefabricate pe care le puteți utiliza. Structurile de aspect, de exemplu, vă permit să reuniți diferite componente pentru a crea un tablou de bord.

Mai întâi, adăugați următorul cod la dvs Dashboard.js fişier:

import {
 Card,
 Titlu,
 Text,
 ColGrid,
 AreaChart,
 Bara de progres,
 Metric,
 Contracta,
} din„@tremur/reacție”;
funcţieBord() {
întoarcere (


 {/* Secțiunea principală */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* Secțiunea KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Substituent pentru a seta înălțimea */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
export implicit Tabloul de bord;
Blocul shell conține diferite componente care importați în partea de sus a fișierului. Dacă previzualizați acest lucru în browser, veți vedea doar două blocuri goale.
Puteți să vă completați blocurile cu componentele predefinite ale lui Tremor, cum ar fi o diagramă, un card sau un tabel. Puteți extrage date dintr-un API (REST sau GraphQL) sau le puteți stoca într-o serie de obiecte chiar în interiorul componentei dvs.
Pentru a adăuga o componentă la blocul dvs. shell, înlocuiți 
 rând cu următoarele:
 
 
După Adăugați următoarea matrice înainte de instrucțiunea return (acestea sunt datele pe care le va afișa secțiunea principală a tabloului de bord):
 
 // Date de afișat în cel secțiunea principală
const date = [
 {
 Luna: „21 ianuarie”,
 Vânzări: 2890,
 Profit: 2400,
 },
 {
 Luna: "feb 21",
 Vânzări: 1890,
 Profit: 1398,
 },
 // ...
 {
 Luna: „22 ian”,
 Vânzări: 3890,
 Profit: 2980,
 },
];
const valueFormatter = (număr) =>< /span>
$ ${Intl.NumberFormat(„noi”).format (number).toString()};
În continuare, adăugați următorul cod în fișier după valueFormatter:
 
 // Date de afișat în KPI secțiune
const categorii = [
 {
 title: „Vânzări”,
 metric: „12.699 USD”,
 percentageValue: 15,9,
 țintă: „$ 80.000”,
 },
 {
 titlu: „Profit”,
 valoare: „45.564 USD” span>,
 percentageValue: 36,5,
 țintă: „125.000 USD”,
 },
 {
 title: „Clienți”,
 valoare: „1.072”,
 percentageValue:  53,6,
 țintă: „2.000”,
 },
 {
 titlu: „Prezentare generală asupra vânzărilor anuale”,
 valoare: „201.072 USD”,
 percentageValue: 28,7,
 țintă: „700.000 USD”,
 },
];
Pentru categorii de obiecte, trebuie să mapați prin fiecare obiect pentru a afișa datele în componente separate de Card. Mai întâi, ștergeți componenta Card din secțiunea KPI și apoi înlocuiți-o cu acest cod:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 „mt-4”>
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentageValue={ item.percentageValue}
 marginTop=„mt-2”
 />
 </Card>
))}
Și asta este tot. Ați creat primul tablou de bord cu Tremor. Vizualizați tabloul de bord rulând npm start. Ar trebui să fie similar cu captura de ecran de mai sus.
 Personalizarea componentelor Tremor
Tremor permite personalizarea folosind elemente de recuzită. Va trebui să examinați documentația componentei pe care doriți să o personalizați și să verificați toate proprietățile incluse cu valorile lor implicite.
De exemplu, dacă aveți un , puteți ascunde axa x trecând prop-ul showXAxis={false} sau modificați înălțimea folosind înălțime={h-40}. Pentru elementele de recuzită care declară valori găsite în CSS Tailwind, cum ar fi dimensiunea, spațierea, culorile și restul, trebuie să utilizați clasele utilitare Tailwind.
 Creați cu ușurință tablouri de bord complexe React
Datorită bibliotecilor de componente precum Tremor, nu trebuie să construiți fiecare o singură parte a interfeței dvs. de utilizare de la zero. Utilizarea unei biblioteci precum Tremor vă poate economisi atât timp, cât și durerea de cap de a crea interfețe de utilizare complexe receptive.