Özet - Bileşenler
- React Native kursu
- Başlangıç
- Ders 18/116
- 5 dk
Props, children ve yeniden kullanımı birleştirerek bir kart bileşeni yazarsın.
Özet - Bileşenler
Bu grupta fonksiyonel bileşenleri, props'u, children prop'unu, birden çok prop almayı ve bileşen yeniden kullanımını öğrendin.
Artık bir bileşeni farklı proplarla çağırabilir, sarmalayıcı bileşenler yazabilir ve aynı bileşeni birçok yerde kullanabilirsin. Bunlar gerçek uygulamaların temel taşlarıdır.
Şimdi tüm bu kavramları tek bir uygulamada birleştirelim.
Uygulama Props ile bileşen
Bir Greeting bileşeni yaz; name prop'unu destructuring ile alsın ve <Text>Merhaba, {name}</Text> döndürsün. App içinde <Greeting name='Ayşe' /> çağrısı yapsın.
Başlangıç kodu
// Greeting bileşenini name ile yaz
// App içinde çağır
function App() {
return null;
}Örnek çözüm
function Greeting({ name }) {
return (
<Text>Merhaba, {name}</Text>
);
}
function App() {
return (
<Greeting name='Ayşe' />
);
}Uygulama İki prop ve yeniden kullanım
Bir User bileşeni yaz; name ve age proplarını destructuring ile alsın, <Text>{name} - {age}</Text> döndürsün. App içinde <View> içinde iki kez çağrı yapsın: <User name='Ayşe' age='25' /> ve <User name='Alex' age='30' />.
Başlangıç kodu
// User bileşenini name ve age ile yaz
// App içinde iki kez çağır
function App() {
return null;
}Örnek çözüm
function User({ name, age }) {
return (
<Text>{name} - {age}</Text>
);
}
function App() {
return (
<View>
<User name='Ayşe' age='25' />
<User name='Alex' age='30' />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 children prop ne işe yarar?
- Etiketler arası içeriği taşır Doğru cevap
- Bileşene isim verir
- Stil tanımlar
- Bileşeni gizler
Açıklama: children, açılış ve kapanış arasındaki içeriği verir.
2 Bileşen kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
function |
Tanım |
{ name } |
Destructuring |
children |
İçerik prop |
<User ... /> |
Çağrı |