Proje: Mikro ön yüz ve tasarım sistemi
- React kursu
- Uzman seviye
- Ders 25/32
- 4 dk
Mikro ön yüz ve tasarım sistemi projesinin amacını ve adımlarını gözden geçirirsin.
Proje: Mikro ön yüz ve tasarım sistemi
Bu projede bir tasarım sistemi çekirdeği, server bileşenli sayfa ve concurrent özellikleri birleştiren bir mikro ön yüz kuracaksın.
İlk adımda tasarım sisteminin temel taşı olan Button bileşenini yazarsın. variant özelliği ile görünüm değiştirilir. Sonraki derslerde bu buton bir tema sağlayıcı ve server sayfası ile birleştirilecek.
Her dersin başlangıç kodu önceki çözümü içerir; böylece proje adım adım büyür.
variant özelliği
Button bileşeni bir variant özelliği alır. variant === 'primary' ise btn-primary sınıfı, değilse btn-secondary sınıfı uygulanır.
Bu desen, tasarım sisteminde tutarlı görünüm sağlar. Yeni varyantlar eklemek için yalnızca koşul genişletilir.
Buton içeriği children ile taşınır; bu sayede esnek kullanım mümkün olur.
Uygulama Button bileşenini yaz
Button yaz. variant ve children özellikleri alsın. variant === 'primary' ? 'btn-primary' : 'btn-secondary' ile className hesapla. <button className={className}>{children}</button> döndür. Dışa aktar.
Başlangıç kodu
// Button.jsx
// Button bileşenini buraya yazÖrnek çözüm
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projenin ilk adımı nedir?
- Server sayfa yazmak
- Button bileşenini yazmak Doğru cevap
- Concurrent arama eklemek
- Custom renderer kurmak
Açıklama: Önce tasarım sisteminin temel taşı Button yazılır.
2 Boşluğu doldur: variant ile sınıf seç
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : '____';
return <button className={className}>{children}</button>;
}function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}Açıklama: Birincil değilse btn-secondary sınıfı verilir.
3 Proje adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
Button |
Tasarım sistemi çekirdeği |
ThemeProvider |
Tema sağlar |
ProductPage |
Server bileşenli sayfa |
SearchPanel |
Concurrent arama |