Özet - Props
- React kursu
- Başlangıç
- Ders 21/84
- 5 dk
Props kullanarak yeniden kullanılabilir bir buton bileşeni yazarsın.
Özet - Props
Bu grupta props'un ne olduğunu, nasıl okunduğunu, children prop'unu ve varsayılan değerleri öğrendin. Şimdi bunları birleştirme zamanı.
Akış: bileşene props nesnesi veya destructuring ile değer gönderirsin, children ile içerik aktarırsın, eksik proplar için varsayılan verirsin. Böylece esnek ve yeniden kullanılabilir bileşenler yazarsın.
Bir sonraki adımda props kullanarak yeniden kullanılabilir bir buton bileşeni yazacaksın.
Uygulama Yeniden kullanılabilir buton
Aşağıdaki iskeleti tamamla. Button adında bir bileşen yaz; ({ '{ label = "Gönder" }' }) parametresi alsın ve <button className="btn">{label}</button> döndürsün. Dışa aktarmayı unutma.
Başlangıç kodu
// Button bileşenini buraya yazÖrnek çözüm
function Button({ label = "Gönder" }) {
return <button className="btn">{label}</button>;
}
export default Button;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Destructuring ne işe yarar?
- Çizim yapar
- State saklar
- DOM günceller
- Props'u kısa okur Doğru cevap
Açıklama: Destructuring props'u kısa okur.
2 Props kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
props |
Veri akışı |
destructuring |
Kısa okuma |
children |
İçerik |
default |
Yedek değer |