Vytváření složitého uživatelského rozhraní v Reactu, jako je řídicí panel, může být skličující, pokud to děláte od začátku. Naštěstí to nemusíte dělat.

Jedna z nejlepších knihoven komponent, kterou můžete použít, je Tremor, která vám umožňuje vytvářet moderní, responzivní dashboardy v Reactu s malým úsilím. Zjistěte, jak používat Tremor k vytváření dashboardů v Reactu.

Co je třes?

Tremor je moderní, open source, nízkoúrovňová knihovna komponent uživatelského rozhraní pro vytváření dashboardů v Reactu. Tremor staví na Tailwind CSS, React a Recharts (další komponentová grafická knihovna pro React). Navíc používá ikony z Heroicons.

Může se pochlubit více než 20 komponentami se všemi náležitostmi pro vytvoření fantastického analytického rozhraní, jako jsou grafy, karty a vstupní prvky. Knihovna obsahuje malé modulární komponenty, jako jsou odznaky, tlačítka, rozevírací seznamy a karty, které můžete kombinovat a vytvářet plnohodnotné řídicí panely.

Tremor vyniká tím, že je vysoce zaujatý, takže pokud jste v pořádku s rozhodnutími knihovny, můžete rychle spustit profesionálně vypadající palubní desku.

Tremor samozřejmě podporuje přizpůsobení a usnadňuje to pomocí systému rekvizit React.

Jak začít s třesem

Začněte tím vytvoření nové aplikace React za použití create-react-app balíček (nebo Vite, pokud to preferujete).

V systému již musíte mít nainstalované soubory Node.js a npm. Můžete to potvrdit spuštěním uzel --verze a pak npm --verze na příkazovém řádku. Pokud některý z příkazů chybí, můžete je nainstalovat pomocí jednoduchého procesu; viz tento návod instalace Node.js a npm na Windows, například.

Nastavení vašeho projektu React s třesem

1. Otevřete terminál a přejděte do preferovaného adresáře pomocí CD příkaz.
2. Běh npx create-react-app tremor-tutorial. Tento příkaz vytvoří novou aplikaci React s názvem třes-tutoriál ve vašem systému v aktuálním adresáři.
3. Spuštěním se přepněte do adresáře aplikace cd tremor-tutorial.
4. Nainstalujte Tremor do svého projektu React pomocí následujícího příkazu:

   npm install @tremor/react

5. Jakmile nainstalujete Tremor, importujte balíček do svého App.js (nebo main.jsx pokud jste použili Vite) přidáním následujícího řádku na konec importů:

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

Přestože Tremor používá Tailwind CSS, nemusíte jej instalovat do aplikace React, abyste mohli knihovnu používat. Je to proto, že Tremor už má Tailwind interně nastavený. Pokud však chcete, podívejte se na náš tutoriál instalace Tailwind CSS v Reactu.

Dále nainstalujte Heroicons do svého projektu pomocí následujícího příkazu:

npm i [email protected] @tremor/react

Nyní odstraníme nepotřebný kód v našem src/App.js soubor. Zde je náš startovací kód App.js:

import"./App.css";
import"@tremor/react/dist/esm/tremor.css";
vývoznívýchozífunkceAplikace() {
vrátit se (


Náš Awesome React Dashboard</h1> 
 </div>
 );
}

Dále vytvořte vyhrazenou komponenty podsložku ve vašem src složku. V tomto komponenty složku, vytvořte novou Dashboard.js soubor a přidejte následující kód:

funkcePřístrojová deska() {
vrátit se<div>Přístrojová deskadiv>;
}
vývoznívýchozí Přístrojová deska;

Importujte komponentu Dashboard do App.js přidáním následujícího prohlášení za ostatní importy:

import Přístrojová deska z"./components/Dashboard";

Nakonec zobrazte komponentu ve vaší aplikaci React přidáním pod h1 živel.

Vytvoření řídicího panelu s třesem

Chcete-li vytvořit kompletní dashboard pomocí Tremor, s minimem starostí, vyberte jeden z dostupných bloků. Bloky jsou předem sestavená rozložení složená z různých malých modulárních komponent.

Dobrým výchozím bodem je Třesové bloky sekce, která představuje různé typy předem sestavených blokových komponent, které můžete použít. Skořápky rozvržení vám například umožňují poskládat různé komponenty a vytvořit řídicí panel.

Nejprve do svého přidejte následující kód Dashboard.js soubor:

import {
 Kartu,
 Titul,
 Text,
 ColGrid,
 AreaChart,
 Ukazatel průběhu,
 Metrický,
 Flex,
} z"@tremor/react";
funkcePřístrojová deska() {
vrátit se (


 {/* Hlavní sekce */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* sekce KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Zástupný symbol pro nastavení výšky */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportovat výchozí Hlavní panel;
Blok shellu obsahuje různé komponenty, které importujete v horní části souboru. Pokud si to zobrazíte v prohlížeči, uvidíte pouze dva prázdné bloky.
Své bloky můžete naplnit předem sestavenými komponentami Tremor, jako je graf, karta nebo tabulka. Data můžete čerpat z API (REST nebo GraphQL) nebo je ukládat do pole objektů přímo uvnitř vaší komponenty.
Chcete-li přidat komponentu do svého shellového bloku, nahraďte 
 řádek s následujícím:
 
 
Po že před příkaz return přidejte následující pole (toto jsou data, která se zobrazí v hlavní části řídicího panelu):
 
 // Data k zobrazení v a hlavní sekce
konst data = [
 {
 Měsíc: "21. ledna",
 Prodej: 2890,
 Zisk: 2400,
 },
 {
 Měsíc: "únor 21",
 Prodej: 1890,
 Zisk: 1398,
 },
 // ...
 {
 Měsíc: "22. ledna",
 Prodej: 3890,
 Zisk: 2980,
 },
];
konst valueFormatter = (číslo) =>< /span>
$ ${Intl.NumberFormat("nás").formát (number).toString()};
Dále přidejte do souboru za valueFormatter následující kód:
 
 // Data k zobrazení v KPI sekce
konst kategorie = [
 {
 title: "Prodej",
 metrika: "$ 12,699",
 procentuální hodnota: 15,9,
 cíl: "$ 80 000",
 },
 {
 title: "Profit",
 metrika: "$ 45,564" span>,
 procentuální hodnota: 36,5,
 cíl: "125 000 $",
 },
 {
 title: "Zákazníci",
 metrika: "1 072",
 procentuální hodnota:  53,6,
 cíl: "2 000",
 },
 {
 název: „Přehled ročního prodeje“,
 metrika: „201 072 $“,
 procentuální hodnota: 28,7,
 cíl: "700 000 $",
 },
];
Pro kategorie pole objektů, musíte mapovat přes každý objekt, aby se data zobrazila v samostatných komponentách Karty. Nejprve odstraňte komponentu Karta v sekci KPI a poté ji nahraďte tímto kódem:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  procentoValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
A je to. Vytvořili jste svůj první řídicí panel s Tremorem. Zobrazte svůj řídicí panel spuštěním npm start. Mělo by to být podobné jako na výše uvedeném snímku obrazovky.
 Přizpůsobení komponent Tremor
Tremor umožňuje přizpůsobení pomocí rekvizit. Budete si muset prohlédnout dokumentaci komponenty, kterou chcete přizpůsobit, a zkontrolovat všechny vlastnosti zahrnuté v jejich výchozích hodnotách.
Například: pokud máte , můžete skrýt osu x předáním prop showXAxis={false} nebo změnit výšku pomocí výška={h-40}. U rekvizit deklarujících hodnoty nalezené v CSS Tailwind, jako je velikost, mezery, barvy a ostatní, musíte použít třídy nástrojů Tailwind.
 Snadné vytváření komplexních řídicích panelů React
Díky knihovnám komponent, jako je Tremor, nemusíte vytvářet všechny jediná část vašeho uživatelského rozhraní od začátku. Používání knihovny, jako je Tremor, vám může ušetřit čas i bolest hlavy při vytváření složitých responzivních uživatelských rozhraní.