Costruire un'interfaccia utente complessa in React, come una dashboard, può essere scoraggiante se lo fai da zero. Per fortuna, non devi farlo.

Una delle migliori librerie di componenti che puoi utilizzare è Tremor che ti consente di creare dashboard moderni e reattivi in ​​​​React con poco sforzo. Scopri come utilizzare Tremor per creare dashboard in React.

Cos'è il tremore?

Tremor è una libreria di componenti dell'interfaccia utente moderna, open source e di basso livello per la creazione di dashboard in React. Tremor si basa su Tailwind CSS, React e Recharts (un'altra libreria di grafici basata su componenti per React). Inoltre, utilizza le icone di Heroicons.

Vanta oltre 20 componenti con tutti gli elementi essenziali per creare una fantastica interfaccia analitica come grafici, schede ed elementi di input. La libreria include piccoli componenti modulari come badge, pulsanti, menu a discesa e schede, che puoi combinare per creare dashboard completi.

Ciò che distingue Tremor è che è molto supponente, quindi fintanto che sei d'accordo con le decisioni della biblioteca, puoi attivare una dashboard dall'aspetto professionale in un attimo.

Tremor supporta la personalizzazione, ovviamente, e lo rende facile tramite il sistema di oggetti di scena di React.

Come iniziare con il tremore

A partire da creazione di una nuova app React usando il creare-reagire-app pacchetto (o Vite se è quello che preferisci).

Dovrai avere già Node.js e npm installati sul tuo sistema. Puoi confermarlo correndo nodo --versione poi npm --versione su una riga di comando. Se manca uno dei comandi, puoi installarli utilizzando un semplice processo; vedere questa guida a installare Node.js e npm su Windows, Per esempio.

Impostare il tuo progetto React con Tremor

1. Apri il tuo terminale e vai alla tua directory preferita usando il file CD comando.
2. Correre npx create-react-app tremor-tutorial. Questo comando creerà una nuova applicazione React chiamata tremore-tutorial sul tuo sistema nella directory corrente.
3. Passa alla directory dell'app eseguendo cd tremor-tutorial.
4. Installa Tremor nel tuo progetto React usando il seguente comando:

   npm install @tremor/react

5. Una volta installato Tremor, importa il pacchetto nel tuo file App.js (O main.jsx se hai utilizzato Vite) aggiungendo la seguente riga in fondo alle tue importazioni:

   importare"@tremor/reagire/dist/esm/tremor.css";

Sebbene Tremor utilizzi Tailwind CSS, non è necessario installarlo nella tua app React per utilizzare la libreria. Questo perché Tremor ha già impostato Tailwind internamente. Tuttavia, se lo desideri, dai un'occhiata al nostro tutorial su installare Tailwind CSS in React.

Quindi, installa Heroicons nel tuo progetto usando il seguente comando:

npm i [email protected] @tremor/react

Ora, rimuoviamo il codice non necessario nel nostro src/App.js file. Ecco il nostro codice iniziale App.js:

importare"./App.css";
importare"@tremor/reagire/dist/esm/tremor.css";
esportarepredefinitofunzioneApp() {
ritorno (


La nostra fantastica dashboard React</h1> 
 </div>
 );
}

Quindi, crea un file dedicato componenti sottocartella nel tuo src cartella. In ciò componenti cartella, creane una nuova Dashboard.js file e aggiungere il seguente codice:

funzionePannello di controllo() {
ritorno<div>Pannello di controllodiv>;
}
esportarepredefinito Pannello di controllo;

Importa il componente Dashboard in App.js aggiungendo la seguente dichiarazione dopo altre importazioni:

importare Pannello di controllo da"./componenti/Dashboard";

Infine, visualizza il componente nella tua app React aggiungendo sotto il h1 elemento.

Creazione di una dashboard con Tremor

Per creare una dashboard completa utilizzando Tremor, con il minimo sforzo, seleziona uno dei blocchi disponibili. I blocchi sono layout predefiniti costituiti da diversi piccoli componenti modulari.

Un buon punto di partenza è I blocchi del tremore sezione che mostra diversi tipi di componenti di blocchi predefiniti che è possibile utilizzare. Le shell di layout, ad esempio, consentono di mettere insieme diversi componenti per creare un dashboard.

Innanzitutto, aggiungi il seguente codice al tuo Dashboard.js file:

importare {
 Carta,
 Titolo,
 Testo,
 ColGrid,
 Grafico ad area,
 Barra di avanzamento,
 Metrico,
 Flettere,
} da"@tremore/reagire";
funzionePannello di controllo() {
ritorno (


 {/* Sezione principale */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* sezione KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Segnaposto per impostare l'altezza */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
esporta predefinito Dashboard;
Il blocco shell contiene diversi componenti che si importa nella parte superiore del file. Se lo visualizzi in anteprima nel tuo browser, vedrai solo due blocchi vuoti.
Puoi popolare i tuoi blocchi con i componenti predefiniti di Tremor, come un grafico, una scheda o una tabella. Puoi estrarre i dati da un'API (REST o GraphQL) o archiviarli in un array di oggetti direttamente all'interno del tuo componente.
Per aggiungere un componente al tuo blocco shell, sostituisci 
 riga con quanto segue:
 
 
Dopo che, aggiungi il seguente array prima dell'istruzione return (questi sono i dati che verranno visualizzati nella sezione principale della dashboard):
 
 // Dati da visualizzare in IL sezione principale
const data = [
 {
 Mese: "Jan 21",
 Vendite: 2890,
 Profitto: 2400,
 },
 {
 Mese: "Feb 21",
 Vendite: 1890,
 Profitto: 1398,
 },
 // ...
 {
 Mese: "Jan 22",
 Vendite: 3890,
 Guadagno: 2980,
 },
];
const valueFormatter = (number) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Successivamente, aggiungi il seguente codice al tuo file dopo valueFormatter:
 
 // Dati da visualizzare in KPI sezione
const categorie = [
 {
 title: "Sales",
 metrica: "$ 12,699",
 percentValue: 15.9,
 target: "$ 80.000",
 },
 {
 titolo: "Profitto",
 metrica: "$ 45.564" span>,
 percentValue: 36.5,
 target: "$ 125.000",
 },
 {
 title: "Customers",
 metric: "1,072",
 percentValue:  53.6,
 target: "2,000",
 },
 {
 title: "Panoramica annuale delle vendite",
 metrica: "$ 201.072",
 percentValue: 28,7,
 target: "$ 700,000",
 },
];
Per il categories matrice di oggetti, devi mappare ogni oggetto per visualizzare i dati in componenti Card separati. Innanzitutto, elimina il componente Card nella sezione KPI e poi sostituiscilo con questo codice:
 
 {categories.map((item) => span> (
 
 {item.title}</Testo>
 {item.metric}</Metrica> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
E questo è tutto. Hai creato la tua prima dashboard con Tremor. Visualizza la dashboard eseguendo npm start. Dovrebbe essere simile allo screenshot sopra.
 Personalizzazione dei componenti di Tremor
Tremor consente la personalizzazione utilizzando oggetti di scena. Dovrai rivedere la documentazione del componente che desideri personalizzare e controllare tutte le proprietà incluse con i loro valori predefiniti.
Ad esempio, se hai un , puoi nascondere l'asse x passando il puntello showXAxis={false} o cambiare l'altezza usando altezza={h-40}. Per oggetti di scena che dichiarano valori trovati in Tailwind CSS, come dimensioni, spaziatura, colori e il resto, devi utilizzare le classi di utilità Tailwind.
 Crea dashboard React complesse con facilità
Grazie a librerie di componenti come Tremor, non è necessario creare ogni singola parte della tua interfaccia utente da zero. L'utilizzo di una libreria come Tremor può farti risparmiare sia il tempo che il mal di testa della creazione di interfacce utente reattive complesse.