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
Zacząć od tworzenie nowej aplikacji React używając twórz-reaguj-aplikację package (lub Vite, jeśli wolisz).
Musisz mieć już zainstalowane Node.js i npm w swoim systemie. Możesz to potwierdzić, biegając węzeł --wersja i wtedy npm --wersja w wierszu poleceń. Jeśli brakuje któregoś z poleceń, możesz je zainstalować za pomocą prostego procesu; zobacz ten przewodnik do instalowanie Node.js i npm w systemie Windows, Na przykład.
Konfigurowanie projektu React z Tremor
- Otwórz terminal i przejdź do preferowanego katalogu za pomocą płyta CD Komenda.
- Uruchomić npx samouczek dotyczący tworzenia aplikacji reagującej na drżenie. To polecenie utworzy nową aplikację React o nazwie drżenie samouczek w systemie w bieżącym katalogu.
- Przejdź do katalogu aplikacji, uruchamiając samouczek drżenia cd.
- Zainstaluj Tremor w swoim projekcie React za pomocą następującego polecenia:
npm zainstaluj @drżenie/reaguj - Po zainstalowaniu Tremor zaimportuj pakiet do swojego Aplikacja.js (Lub main.jsx jeśli korzystałeś z Vite), dodając następujący wiersz na dole swojego importu:
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 instalowanie CSS Tailwind w React.
Następnie zainstaluj Heroicons w swoim projekcie za pomocą następującego polecenia:
npm i [email protected] @tremor/reactTeraz usuńmy niepotrzebny kod z naszego src/App.js plik. Oto nasz kod startowy Aplikacja.js:
import"./Aplikacja.css";
import"@tremor/react/dist/esm/tremor.css";
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
Nasz wspaniały pulpit nawigacyjny React</h1>
</div>
);
}
Następnie utwórz dedykowany składniki podfolder w twoim źródło teczka. W tym składniki folder, utwórz nowy Dashboard.js plik i dodaj następujący kod:
funkcjonowaćPanel() {
powrót<dz>Paneldz>;
}
eksportdomyślny Panel;
Zaimportuj komponent Dashboard do Aplikacja.js poprzez dodanie następującego oświadczenia po innym imporcie:
import Panel z„./komponenty/Pulpit nawigacyjny”;
Na koniec wyświetl komponent w swojej aplikacji React, dodając poniżej h1 element.
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 Bloki drżenia sekcja, 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 swojego Dashboard.js plik:
import {
Karta,
Tytuł,
Tekst,
ColGrid,
Wykres powierzchniowy,
Pasek postępu,
Metryczny,
Przewód,
} z„@drżenie/reakcja”;funkcjonowaćPanel() {
powrót (
Sales Dashboard<<span>/Title></span><br> <text>To jest przykładowy dashboard zbudowany <span>z</span> Tremor.<<span>/Text></span></text>
{/* Sekcja główna */}
"mt-6">
"h-96" />
</Card> {/* Sekcja KPI */}
2} gapX="przerwa-x-6" gapY="przerwa-y -6" marginesTop="mt-6">
{/* Symbol zastępczy do ustawienia wysokości */}
"h-28" />
</Card>
</ColGrid>
</main>
);
}eksportuj domyślnie Pulpit nawigacyjny;
Blok powłoki zawiera różne komponenty, które importujesz na górze 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 komponencie.
Aby dodać komponent do bloku powłoki, zastąp z następującym wierszem:
Wydajność<<span>/Title></span><p><text>Porównanie pomiędzy sprzedażą a Zysk<<span>/Text></span></text></p>
<p><areachart></areachart> marginTop=<span>"mt-4"</span><br> data={data}<br> kategorie={[<span>"Sprzedaż"</span>, <span>"Zysk"</span>]}<br> dataKey=<span>"Miesiąc"</span><br> colors={[<span>"indygo"</span>, <span>"fuksja"</span>]}<br> valueFormatter={ valueFormatter}<br> height=<span>"h-80"</span><br>/></p>
Po dodaj następującą tablicę przed instrukcją return (to są dane, które będą wyświetlane w głównej sekcji pulpitu nawigacyjnego):
// Dane do wyświetlenia w the sekcja główna
stała dane = [
{
miesiąc: "21 stycznia",
sprzedaż: 2890,
Zysk: 2400,
},
{
Miesiąc: "Luty 21",
Sprzedaż: 1890,
Zysk: 1398,
},
// ...
{
Miesiąc: „22 stycznia”,
Sprzedaż: 3890,
Zysk: 2980,
},
];stała valueFormatter = (liczba) =>< /span>
$ ${Intl.NumberFormat("nas").format (number).toString()};
Następnie dodaj następujący kod do pliku po valueFormatter:
// Dane do wyświetlenia w KPI sekcja
stała kategorie = [
{
tytuł: "Sprzedaż",
metryka: „12 699 USD”,
wartość procentowa: 15,9,
wartość docelowa: „$ 80 000",
},
{
tytuł: "Zysk",
metryka: "45 564 $" span>,
procentWartość: 36,5,
cel: "125 000 $",
},
{
tytuł: "Klienci",
metryka: "1072",
percentValue: 53,6,
cel: "2000",
},
{
tytuł: „Przegląd rocznej sprzedaży”,
dane: „201 072 USD”,
procentowa wartość: 28,7,
cel: "700 000 $",
},
];
Dla kategorie tablicę obiektów, musisz zmapować każdy obiekt, aby wyświetlić dane w osobnych komponentach Karta. Najpierw usuń komponent Karta w sekcji KPI, a następnie zastąp go tym kodem:
{categories.map((item) => rozpiętość> (
{item.title}</Text>
{item.metric}</Metric>
"mt-4"
>{`${item.percentageValue}% (${item.metric} )`</Tekst> {item.target}</Text>
</Flex>
marginTop="mt-2"
/>
</Karta>
))}
I to wszystko. Stworzyłeś swój pierwszy pulpit nawigacyjny za pomocą Tremor. Zobacz swój panel, uruchamiając npm start. Powinien wyglądać podobnie do powyższego zrzutu ekranu.
Dostosowywanie komponentów Tremor
Tremor umożliwia dostosowywanie 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
Twórz złożone kokpity React z łatwością
Dzięki bibliotekom komponentów, takim jak Tremor, nie musisz budować każdego jedną część 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.