Proje: Mikro ön yüz ve tasarım sistemi

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.

Örnek çözümü göster

function Button({ variant, children }) {
  const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
  return <button className={className}>{children}</button>;
}
export default Button;

Kendini test et

Bu projenin ilk adımı nedir?
- Server sayfa yazmak
- Button bileşenini yazmak
- Concurrent arama eklemek
- Custom renderer kurmak
Cevabı göster

Button bileşenini yazmak — Önce tasarım sisteminin temel taşı Button yazılır.

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>;
}

Cevabı göster

function Button({ variant, children }) {
  const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
  return <button className={className}>{children}</button>;
}

Proje adımlarını eşleştir

Button

Tasarım sistemi çekirdeği
ThemeProvider

Tema sağlar
ProductPage

Server bileşenli sayfa
SearchPanel

Concurrent arama

Sıradaki ders: Tasarım sistemi çekirdeği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler