Yeniden kullanılabilir component'ler oluşturmak, verimliliği ve sürdürülebilirliği artırdığı için modern web geliştirmede kritik bir pratiktir. Bu yazıda React'te TailwindCSS ve TypeScript kullanarak yeniden kullanılabilir component'lerin nasıl geliştirileceğini inceleyeceğiz. Button, card, modal, form input ve alert olmak üzere birkaç temel component'in oluşturulmasını adım adım ele alacağız.
1. Button Component
Çok yönlü bir button component'i farklı style'lar, boyutlar ve state'lerle (örneğin disabled, loading) özelleştirilebilir.
Özellikler:
- Farklı variant'lar (primary, secondary, outline)
- Boyutlar (small, medium, large)
- Spinner içeren loading state'i
Örnek Kod:
2. Card Component
Bir card component; görsel, başlık, açıklama ve action'lar dâhil olmak üzere içeriği yapılandırılmış biçimde göstermek için kullanılabilir.
Özellikler:
- Görsel header
- Başlık ve açıklama
- Action button'ları
Örnek Kod:
3. Modal Component
Bir modal dialog component'i, farklı boyutları yöneterek ve header, body ile footer bölümleri sunarak içeriği pop-up pencerede göstermek için kullanılabilir.
Özellikler:
- Farklı boyutlar (small, medium, large)
- Header, body ve footer bölümleri
- Kapatma button'ı
4. Form Input Component
Bir form input component'i farklı input türlerini (text, email, password) yönetebilir; validation ve hata mesajlarını içerebilir.
Özellikler:
- Input türleri (text, email, password)
- Validation ve hata yönetimi
Örnek Kod:
5. Alert Component
Bir alert component'i farklı türlerde mesajları (success, error, warning, info) göstermek için kullanılabilir.
Özellikler:
- Alert türleri (success, error, warning, info)
- Kapatılabilir alert'ler
Örnek Kod:
Bu component'ler uygulamalarınızın yapı taşları olarak kullanılabilir; tutarlı bir tasarımı korumanıza ve kodun yeniden kullanılabilirliğini artırmanıza yardımcı olur. TailwindCSS az çabayla güzel ve responsive tasarımlar oluşturmanızı sağlarken TypeScript kodunuzun güçlü ve bakımı kolay olmasını güvence altına alır.