Twórz niesamowite pulpity nawigacyjne w React za pomocą Tremor
Tworzenie złożonego interfejsu użytkownika w React, takiego jak pulpit nawigacyjny, może być zniechęcające, jeśli robisz to od zera. Na szczęście nie musisz tego robić.
Jedną z najlepszych bibliotek komponentów, z których możesz skorzystać, jest Tremor, która pozwala tworzyć nowoczesne, responsywne dashboardy w React przy niewielkim wysiłku. Dowiedz się, jak wykorzystać Tremor do tworzenia dashboardów w React.
Co to jest drżenie?
Tremor to nowoczesna, niskopoziomowa biblioteka komponentów interfejsu użytkownika o otwartym kodzie źródłowym do tworzenia pulpitów nawigacyjnych w React. Tremor opiera się na Tailwind CSS, React i Recharts (kolejna biblioteka wykresów oparta na komponentach dla React). Ponadto wykorzystuje ikony z Heroicons.
Zawiera ponad 20 komponentów ze wszystkimi elementami niezbędnymi do zbudowania fantastycznego interfejsu analitycznego, takiego jak wykresy, karty i elementy wejściowe. Biblioteka zawiera małe, modułowe komponenty, takie jak plakietki, przyciski, listy rozwijane i zakładki, które można łączyć w celu tworzenia pełnowartościowych pulpitów nawigacyjnych.
Tym, co wyróżnia Tremor, jest to, że jest bardzo opiniotwórczy, więc dopóki zgadzasz się z decyzjami biblioteki, możesz błyskawicznie uruchomić profesjonalnie wyglądający pulpit nawigacyjny.
Tremor obsługuje oczywiście dostosowywanie i ułatwia to dzięki systemowi rekwizytów React.
Jak zacząć z drżeniem
Zacznij od utworzenia nowej aplikacji React przy użyciu pakietu create-react-app (lub Vite, jeśli wolisz).
Musisz mieć już zainstalowane Node.js i npm w swoim systemie. Możesz to potwierdzić, uruchamiając node –version , a następnie npm –version w wierszu poleceń. Jeśli brakuje któregoś z poleceń, możesz je zainstalować za pomocą prostego procesu; zapoznaj się na przykład z tym przewodnikiem dotyczącym instalowania Node.js i npm w systemie Windows.
Konfigurowanie projektu React z Tremor
- Otwórz terminal i przejdź do preferowanego katalogu za pomocą polecenia cd .
- Uruchom npx create-react-app tremor-tutorial . To polecenie utworzy nową aplikację React o nazwie tremor-tutorial w twoim systemie w bieżącym katalogu.
- Przejdź do katalogu aplikacji, uruchamiając cd tremor-tutorial .
- Zainstaluj Tremor w swoim projekcie React za pomocą następującego polecenia:
npm install @tremor/react - Po zainstalowaniu Tremor zaimportuj pakiet do pliku App.js (lub main.jsx , jeśli korzystasz z Vite), dodając następujący wiersz na dole importowanych plików:
import "@tremor/react/dist/esm/tremor.css";
Chociaż Tremor używa CSS Tailwind, nie musisz instalować go w swojej aplikacji React, aby korzystać z biblioteki. Wynika to z faktu, że Tremor ma już skonfigurowany wewnętrznie Tailwind. Jeśli jednak chcesz, zapoznaj się z naszym samouczkiem dotyczącym instalacji CSS Tailwind w React.
Następnie zainstaluj Heroicons w swoim projekcie za pomocą następującego polecenia:
npm i heroicons@1.0.6 @tremor/react
Teraz usuńmy niepotrzebny kod z naszego pliku src/App.js . Oto nasz kod startowy w App.js :
import "./App.css";
import "@tremor/react/dist/esm/tremor.css";
export default function App() {
return (
<div>
<h1>Our Awesome React Dashboard</h1>
</div>
);
}
Następnie utwórz dedykowany podfolder komponentów w folderze src . W tym folderze komponentów utwórz nowy plik Dashboard.js i dodaj następujący kod:
function Dashboard() {
return <div>Dashboard</div>;
}
export default Dashboard;
Zaimportuj komponent Dashboard w pliku App.js , dodając następującą instrukcję po innych importach:
import Dashboard from "./components/Dashboard";
Na koniec wyświetl komponent w swojej aplikacji React, dodając <Dashboard /> poniżej elementu h1 .
Tworzenie pulpitu nawigacyjnego z drżeniem
Aby stworzyć kompletny pulpit nawigacyjny za pomocą Tremor, przy minimalnym zamieszaniu, wybierz jeden z dostępnych bloków. Bloki to gotowe układy składające się z różnych małych elementów modułowych.
Dobrym punktem wyjścia jest sekcja bloków Tremor, która prezentuje różne typy gotowych komponentów blokowych, których możesz użyć. Powłoki układu pozwalają na przykład łączyć ze sobą różne komponenty w celu utworzenia pulpitu nawigacyjnego.
Najpierw dodaj następujący kod do pliku Dashboard.js :
import {
Card,
Title,
Text,
ColGrid,
AreaChart,
ProgressBar,
Metric,
Flex,
} from "@tremor/react";
function Dashboard() {
return (
<main>
<Title>Sales Dashboard</Title>
<Text>This is a sample dashboard built with Tremor.</Text>
{/* Main section */}
<Card marginTop="mt-6">
<div className="h-96" />
</Card>
{/* KPI section */}
<ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6">
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
</ColGrid>
</main>
);
}
export default Dashboard;
Blok powłoki zawiera różne komponenty, które importujesz na początku pliku. Jeśli wyświetlisz podgląd w przeglądarce, zobaczysz tylko dwa puste bloki.
Możesz wypełnić swoje bloki gotowymi komponentami Tremor, takimi jak wykres, karta lub tabela. Możesz pobierać dane z interfejsu API (REST lub GraphQL) lub przechowywać je w tablicy obiektów bezpośrednio w swoim komponencie.
Aby dodać komponent do bloku powłoki, zastąp wiersz <div className=”h-96″/> następującym:
<Title>Performance</Title>
<Text>Comparison between Sales and Profit</Text>
<AreaChart
marginTop="mt-4"
data={data}
categories={["Sales", "Profit"]}
dataKey="Month"
colors={["indigo", "fuchsia"]}
valueFormatter={valueFormatter}
height="h-80"
/>
Następnie dodaj następującą tablicę przed instrukcją return (są to dane, które będą wyświetlane w głównej sekcji dashboardu):
// Data to display in the main section
const data = [
{
Month: "Jan 21",
Sales: 2890,
Profit: 2400,
},
{
Month: "Feb 21",
Sales: 1890,
Profit: 1398,
},
//. ..
{
Month: "Jan 22",
Sales: 3890,
Profit: 2980,
},
];
const valueFormatter = (number) =>
$ ${Intl.NumberFormat("us").format(number).toString()};
Następnie dodaj następujący kod do pliku po valueFormatter :
// Data to display in KPI section
const categories = [
{
title: "Sales",
metric: "$ 12,699",
percentageValue: 15.9,
target: "$ 80,000",
},
{
title: "Profit",
metric: "$ 45,564",
percentageValue: 36.5,
target: "$ 125,000",
},
{
title: "Customers",
metric: "1,072",
percentageValue: 53.6,
target: "2,000",
},
{
title: "Yearly Sales Overview",
metric: "$ 201,072",
percentageValue: 28.7,
target: "$ 700,000",
},
];
W przypadku tablicy kategorii obiektów należy zmapować każdy obiekt, aby wyświetlić dane w osobnych komponentach karty . Najpierw usuń komponent Karta w sekcji KPI, a następnie zastąp go tym kodem:
{categories.map((item) => (
<Card key={item.title}>
<Text>{item.title}</Text>
<Metric>{item.metric}</Metric>
<Flex marginTop="mt-4">
<Text
truncate={true}
>{`${item.percentageValue}% (${item.metric})`}</Text>
<Text>{item.target}</Text>
</Flex>
<ProgressBar
percentageValue={item.percentageValue}
marginTop="mt-2"
/>
</Card>
))}
I to wszystko. Stworzyłeś swój pierwszy pulpit nawigacyjny za pomocą Tremor. Wyświetl pulpit nawigacyjny, uruchamiając npm start . Powinien wyglądać podobnie do powyższego zrzutu ekranu.
Dostosowywanie komponentów Tremor
Tremor umożliwia dostosowanie za pomocą rekwizytów. Musisz przejrzeć dokumentację komponentu, który chcesz dostosować, i sprawdzić wszystkie właściwości zawarte w ich wartościach domyślnych.
Na przykład, jeśli masz <LineChart />, możesz ukryć oś X, przekazując właściwość showXAxis={false} lub zmienić wysokość, używając height={h-40} . W przypadku rekwizytów deklarujących wartości znalezione w CSS Tailwind, takie jak rozmiar, odstępy, kolory i inne, musisz użyć klas narzędzi Tailwind.
Z łatwością twórz złożone panele kontrolne reakcji
Dzięki bibliotekom komponentów, takim jak Tremor, nie musisz tworzyć każdej części interfejsu użytkownika od podstaw. Korzystanie z biblioteki takiej jak Tremor może zaoszczędzić czas i ból głowy związany z tworzeniem złożonych, responsywnych interfejsów użytkownika.
Dodaj komentarz