React'te pano gibi karmaşık bir kullanıcı arabirimi oluşturmak, sıfırdan yapıyorsanız gözünüzü korkutabilir. Neyse ki, bunu yapmak zorunda değilsin.

Kullanabileceğiniz en iyi bileşen kitaplıklarından biri, React'te çok az çabayla modern, yanıt veren panolar oluşturmanıza olanak tanıyan Tremor'dur. React'te panolar oluşturmak için Tremor'u nasıl kullanacağınızı öğrenin.

Tremor Nedir?

Tremor, React'te panolar oluşturmak için modern, açık kaynaklı, düşük seviyeli bir UI bileşen kitaplığıdır. Tremor, Tailwind CSS, React ve Recharts (React için başka bir bileşen tabanlı grafik kitaplığı) üzerine kuruludur. Bunun da ötesinde, Heroicons'tan simgeler kullanır.

Grafikler, kartlar ve giriş öğeleri gibi harika bir analitik arayüz oluşturmak için gerekli tüm özelliklere sahip 20'den fazla bileşene sahiptir. Kitaplık, tam teşekküllü panolar oluşturmak için birleştirebileceğiniz rozetler, düğmeler, açılır menüler ve sekmeler gibi küçük, modüler bileşenler içerir.

Tremor'u öne çıkaran şey, son derece inatçı olmasıdır, bu nedenle kütüphanenin kararları konusunda bir fikriniz olmadığı sürece, profesyonel görünümlü bir kontrol panelini bir esintide çalıştırabilirsiniz.

Tremor özelleştirmeyi destekler ve React'in donanım sistemi aracılığıyla bunu yapmayı kolaylaştırır.

Tremor'a Nasıl Başlanır?

La başlamak yeni bir React uygulaması oluşturma kullanmak oluştur-tepki-uygulaması paket (veya tercihiniz buysa Vite).

Sisteminizde zaten Node.js ve npm yüklü olması gerekir. Bunu çalıştırarak onaylayabilirsiniz. düğüm --versiyon ve daha sonra npm --versiyon bir komut satırında. Komutlardan herhangi biri eksikse, bunları basit bir işlem kullanarak yükleyebilirsiniz; için bu kılavuza bakın Node.js ve npm'yi Windows'a yükleme, Örneğin.

React Projenizi Tremor İle Kurmak

1. Terminalinizi açın ve kullanarak tercih ettiğiniz dizine gidin. CD emretmek.
2. Koşmak npx create-react-app titreme eğitimi. Bu komut, adında yeni bir React uygulaması yaratacaktır. titreme eğitimi sisteminizde geçerli dizinde.
3. Çalıştırarak uygulama dizinine geçin cd titreme eğitimi.
4. Aşağıdaki komutu kullanarak Tremor'u React projenize kurun:

   npm yükleme @tremor/tepki

5. Tremor'u kurduktan sonra, paketi bilgisayarınıza aktarın. Uygulama.js (veya ana.jsx Vite kullandıysanız) içe aktarmalarınızın altına aşağıdaki satırı ekleyerek:

   içe aktarmak"@tremor/react/dist/esm/tremor.css";

Tremor, Tailwind CSS kullansa da kitaplığı kullanmak için React uygulamanıza yüklemeniz gerekmez. Bunun nedeni, Tremor'un zaten Tailwind'in dahili olarak ayarlanmış olmasıdır. Ancak, isterseniz, şu konudaki eğiticimize göz atın: Tailwind CSS'yi React'te Kurmak.

Ardından, aşağıdaki komutu kullanarak Heroicons'u projenize kurun:

npm i [email protected] @tremor/react

Şimdi dosyamızdaki gereksiz kodları kaldıralım. kaynak/Uygulama.js dosya. İşte başlangıç ​​kodumuz Uygulama.js:

içe aktarmak"./Uygulama.css";
içe aktarmak"@tremor/react/dist/esm/tremor.css";
ihracatvarsayılanişlevUygulama() {
geri dönmek (


Müthiş React Dashboard'umuz</h1> 
 </div>
 );
}

Ardından, özel bir bileşenler içindeki alt klasör kaynak dosya. Şöyle bileşenler klasör, yeni bir tane oluştur Dashboard.js dosyasını açın ve aşağıdaki kodu ekleyin:

işlevGösterge Paneli() {
geri dönmek<div>Gösterge Panelidiv>;
}
ihracatvarsayılan Gösterge Paneli;

Dashboard bileşenini içeri aktarın Uygulama.js diğer içe aktarmalardan sonra aşağıdaki ifadeyi ekleyerek:

içe aktarmak Gösterge Paneli itibaren"./bileşenler/Dashboard";

Son olarak, bileşeni ekleyerek React uygulamanızda görüntüleyin. altında h1 eleman.

Tremor ile Gösterge Tablosu Oluşturma

Minimum zahmetle Tremor'u kullanarak eksiksiz bir pano oluşturmak için mevcut bloklardan birini seçin. Bloklar, farklı küçük modüler bileşenlerden oluşan önceden oluşturulmuş düzenlerdir.

İyi bir başlangıç ​​noktası titreme blokları Kullanabileceğiniz farklı önceden oluşturulmuş blok bileşenlerini gösteren bölüm. Örneğin, düzen kabukları, bir pano oluşturmak için farklı bileşenleri bir araya getirmenize olanak tanır.

Öncelikle aşağıdaki kodu dosyanıza ekleyin. Dashboard.js dosya:

içe aktarmak {
 kart,
 Başlık,
 Metin,
 ColGrid,
 alan grafiği,
 İlerleme çubuğu,
 Metrik,
 Esnek,
} itibaren"@tremor/tepki";
işlevGösterge Paneli() {
geri dönmek (


 {/* Ana bölüm */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI bölümü */}
 2} boşlukX="gap-x-6" boşlukY="gap-y -6" marginTop="mt-6">
 
 {/* Yüksekliği ayarlamak için yer tutucu */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
dışa aktarma varsayılan Kontrol Paneli;
Kabuk bloğu, farklı bileşenler içerir. dosyanın en üstünde içe aktarırsınız. Bunu tarayıcınızda önizlerseniz, yalnızca iki boş blok görürsünüz.
Bloklarınızı Tremor'un grafik, kart veya tablo gibi önceden oluşturulmuş bileşenleriyle doldurabilirsiniz. Bir API'den (REST veya GraphQL) veri alabilir veya doğrudan bileşeninizin içindeki bir dizi nesnede saklayabilirsiniz.
Kabuk bloğunuza bir bileşen eklemek için 
 satırına şunu yazın:
 
 
Sonra bu durumda, return ifadenizden önce aşağıdaki diziyi ekleyin (bu, kontrol panelinin ana bölümünde görüntülenecek verilerdir):
 
 // Görüntülenecek veriler the ana bölüm
sabit data = [
 {
 Ay: "21 Ocak",
 Satış: 2890,
 Kar: 2400,
 },
 {
 Ay: "Şub 21",
 Satış: 1890,
 Kâr: 1398,
 },
 // ...
 {
 Ay: "22 Ocak",
 Satış: 3890,
 Kâr: 2980,
 },
];
const valueFormatter = (number) =>< /span>
$ ${Uluslararası.NumberFormat("us").format (number).toString()};
Ardından, valueFormatter'dan sonra aşağıdaki kodu dosyanıza ekleyin:
 
 // KPI'da görüntülenecek veriler bölüm
sabit kategoriler = [
 {
 başlık: "Satış",
 metrik: "12.699$",
 yüzdeDeğeri: 15,9,
 hedef: "$ 80.000",
 },
 {
 başlık: "Kar",
 metrik: "45.564$" yayılma>,
 yüzdeDeğeri: 36,5,
 hedef: "125.000 ABD Doları",
 },
 {
 başlık: "Müşteriler",
 metrik: "1.072",
 yüzdeDeğeri:  53.6,
 hedef: "2.000",
 },
 {
 başlık: "Yıllık Satışlara Genel Bakış",
 metrik: "201.072 ABD doları",
 yüzdeDeğeri: 28,7,
 hedef: "700.000$",
 },
];
 kategoriler nesne dizisi, verileri ayrı Kart bileşenlerinde görüntülemek için her bir nesneyi eşlemeniz gerekir. Önce, KPI bölümündeki Kart bileşenini silin ve ardından şu kodla değiştirin:
 
 {categories.map((item) => açıklık> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue} % (${item.metric} )`}</Metin>
 {item.target}</Text>
 </Flex>
  yüzdeValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
İşte bu kadar. Tremor ile ilk kontrol panelinizi oluşturdunuz. npm start'ı çalıştırarak kontrol panelinizi görüntüleyin. Yukarıdaki ekran görüntüsüne benzer olmalıdır.
 Tremor Bileşenlerini Özelleştirme
Tremor, aksesuarlar kullanılarak özelleştirmeye izin verir. Özelleştirmek istediğiniz bileşenin belgelerini incelemeniz ve içerdiği tüm özellikleri varsayılan değerleri ile kontrol etmeniz gerekir.
Örneğin, bir 'a sahipseniz, x eksenini showXAxis={false} prop'unu geçerek gizleyebilirsiniz veya yüksekliği şunu kullanarak değiştirebilirsiniz: yükseklik={h-40}. Boyutlandırma, boşluk bırakma, renkler ve diğerleri gibi Tailwind CSS'de bulunan değerleri bildiren donanımlar için Tailwind yardımcı program sınıflarını kullanmalısınız.
Kolaylıkla Karmaşık React Panoları Oluşturun
Tremor gibi bileşen kitaplıkları sayesinde, her kullanıcı arayüzünüzün tek bir bölümünü sıfırdan. Tremor gibi bir kitaplık kullanmak, size hem zamandan hem de karmaşık yanıt veren kullanıcı arayüzleri oluşturma zahmetinden kurtarabilir.