Izgradnja složenog korisničkog sučelja u Reactu, poput nadzorne ploče, može biti zastrašujuća ako to radite ispočetka. Srećom, ne morate to učiniti.

Jedna od najboljih biblioteka komponenti koju možete koristiti je Tremor koja vam omogućuje stvaranje modernih, responzivnih nadzornih ploča u Reactu uz malo truda. Saznajte kako koristiti Tremor za izradu nadzornih ploča u Reactu.

Što je tremor?

Tremor je moderna knjižnica UI komponenti otvorenog koda niske razine za izradu nadzornih ploča u Reactu. Tremor se nadograđuje na Tailwind CSS, React i Recharts (još jedna biblioteka za crtanje temeljena na komponentama za React). Povrh toga, koristi ikone iz Heroicona.

Može se pohvaliti s preko 20 komponenti sa svim bitnim elementima za izgradnju fantastičnog analitičkog sučelja poput grafikona, kartica i elemenata za unos. Biblioteka uključuje male, modularne komponente kao što su bedževi, gumbi, padajući izbornici i kartice, koje možete kombinirati za stvaranje potpunih nadzornih ploča.

Ono po čemu se Tremor ističe je to što je vrlo samouvjeren, pa sve dok se slažete s odlukama knjižnice, možete u trenu pokrenuti kontrolnu ploču profesionalnog izgleda.

Tremor podržava prilagodbu, naravno, i olakšava to putem Reactovog sustava rekvizita.

Kako započeti s tremorom

Počni od stvaranje nove React aplikacije koristiti kreiraj-reagiraj-aplikaciju paket (ili Vite ako vam je to draže).

Morat ćete već imati instalirane Node.js i npm na vašem sustavu. To možete potvrditi pokretanjem čvor --verzija i onda npm --verzija na naredbenom retku. Ako bilo koja od naredbi nedostaje, možete ih instalirati jednostavnim postupkom; pogledajte ovaj vodič za instaliranje Node.js i npm na Windows, na primjer.

Postavljanje vašeg React projekta s Tremorom

1. Otvorite svoj terminal i dođite do željenog direktorija pomoću CD naredba.
2. Trčanje npx create-react-app tremor-tutorial. Ova naredba će stvoriti novu React aplikaciju pod nazivom tremor-tutorial na vašem sustavu u trenutnom direktoriju.
3. Prebacite se na direktorij aplikacija pokretanjem cd tremor-tutorial.
4. Instalirajte Tremor u svoj React projekt pomoću sljedeće naredbe:

   npm instalirajte @tremor/react

5. Nakon što instalirate Tremor, uvezite paket u svoj App.js (ili glavni.jsx ako ste koristili Vite) dodavanjem sljedećeg retka na dnu uvoza:

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

Iako Tremor koristi Tailwind CSS, ne morate ga instalirati u svoju aplikaciju React da biste koristili biblioteku. To je zato što Tremor već ima interno postavljen Tailwind. Međutim, ako želite, pogledajte naš vodič na instaliranje Tailwind CSS-a u React.

Zatim instalirajte Heroicons u svoj projekt pomoću sljedeće naredbe:

npm i [email protected] @tremor/react

Uklonimo sada nepotreban kod u našem src/App.js datoteka. Evo našeg početnog koda App.js:

uvoz"./App.css";
uvoz"@tremor/react/dist/esm/tremor.css";
izvozzadanofunkcijaaplikacija() {
povratak (


Naša sjajna nadzorna ploča React</h1> 
 </div>
 );
}

Zatim stvorite namjenski komponente podmapu u vašem src mapa. U tome komponente mapu, stvorite novu Nadzorna ploča.js datoteku i dodajte sljedeći kod:

funkcijaNadzorna ploča() {
povratak<div>Nadzorna pločadiv>;
}
izvozzadano Nadzorna ploča;

Uvezite komponentu nadzorne ploče App.js dodavanjem sljedeće izjave nakon ostalih uvoza:

uvoz Nadzorna ploča iz"./components/Dashboard";

Na kraju, prikažite komponentu u svojoj aplikaciji React dodavanjem ispod h1 element.

Stvaranje nadzorne ploče s Tremorom

Kako biste izradili potpunu nadzornu ploču pomoću Tremora, uz najmanje muke, odaberite jedan od dostupnih blokova. Blokovi su unaprijed izgrađeni rasporedi sastavljeni od različitih malih modularnih komponenti.

Dobro polazište je Tremorovi blokovi odjeljak koji prikazuje različite vrste unaprijed izgrađenih blok komponenti koje možete koristiti. Ljuske izgleda, na primjer, omogućuju vam da spojite različite komponente kako biste stvorili nadzornu ploču.

Najprije dodajte sljedeći kod u svoj Nadzorna ploča.js datoteka:

uvoz {
 Kartica,
 Titula,
 Tekst,
 ColGrid,
 AreaChart,
 Traka za napredak,
 Metrički,
 Savijati,
} iz"@tremor/reagiraj";
funkcijaNadzorna ploča() {
povratak (


 {/* Glavni odjeljak */}
 "mt-6">
 
"h-96" /> 
 </Kartica>
 {/* KPI odjeljak */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Rezervirano mjesto za postavljanje visine */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
izvoz zadana nadzorna ploča;
Blok ljuske sadrži različite komponente koje uvozite na vrhu datoteke. Ako ovo pregledate u svom pregledniku, vidjet ćete samo dva prazna bloka.
Možete popuniti svoje blokove unaprijed izgrađenim komponentama Tremora, poput grafikona, kartice ili tablice. Možete povući podatke iz API-ja (REST ili GraphQL) ili ih pohraniti u nizu objekata unutar svoje komponente.
Da biste dodali komponentu u svoj blok ljuske, zamijenite 
 sa sljedećim:
 
 
Nakon da, dodajte sljedeći niz prije izjave return (ovo su podaci koje će prikazati glavni odjeljak nadzorne ploče):
 
 // Podaci za prikaz u the glavni odjeljak
const podaci = [
 {
 Mjesec: "21. siječnja",
 Prodaja: 2890,
 Dobit: 2400,
 },
 {
 Mjesec: "veljača 21",
 Prodaja: 1890,
 Dobit: 1398,
 },
 // ...
 {
 Mjesec: "22. siječnja",
 Prodaja: 3890,
 Dobit: 2980,
 },
];
const valueFormatter = (broj) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Zatim dodajte sljedeći kod svojoj datoteci nakon valueFormatter:
 
 // Podaci za prikaz u KPI-ju odjeljak
konst kategorije = [
 {
 naslov: "Prodaja",
 metrika: "$12,699",
 percentageValue: 15,9,
 target: "$ 80,000",
 },
 {
 naslov: "Dobit",
 metrički: "45,564$" span>,
 percentageValue: 36,5,
 target: "$125,000",
 },
 {
 title: "Kupci",
 metric: "1,072",
 percentageValue:  53.6,
 cilj: "2000",
 },
 {
 naslov: "Godišnji pregled prodaje",
 metrika: "$201,072",
postotna vrijednost: 28,7,
 cilj: "$700,000",
 },
];
Za Niz kategorija objekata, morate mapirati svaki objekt da biste prikazali podatke u zasebnim komponentama Kartice. Prvo izbrišite komponentu kartice u odjeljku KPI, a zatim je zamijenite ovim kodom:
 
 {categories.map((item) => raspon> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Tekst>
 {item.target}</Text>
 </Flex>
  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
I to je to. S Tremorom ste izradili svoju prvu nadzornu ploču. Pregledajte svoju nadzornu ploču pokretanjem npm start. Trebao bi biti sličan gornjoj snimci zaslona.
 Prilagodba komponenti Tremor
Tremor omogućuje prilagodbu pomoću rekvizita. Morat ćete pregledati dokumentaciju komponente koju želite prilagoditi i provjeriti sva uključena svojstva s njihovim zadanim vrijednostima.
Na primjer, ako imate , možete sakriti x-os prosljeđivanjem prop showXAxis={false} ili promijeniti visinu koristeći visina={h-40}. Za vrijednosti deklariranja rekvizita koje se nalaze u Tailwind CSS-u, poput veličine, razmaka, boja i ostalog, morate koristiti klase pomoćnih programa Tailwind.
 Izgradite složene nadzorne ploče React s lakoćom
Zahvaljujući bibliotekama komponenti kao što je Tremor, ne morate graditi svaki jedan dio vašeg korisničkog sučelja od nule. Korištenje biblioteke kao što je Tremor može vam uštedjeti i vrijeme i glavobolju stvaranja složenih korisničkih sučelja koja reagiraju.