Bileşen yeniden kullanım

Bileşenleri yeniden kullanmayı öğrenirsin.

Bileşen yeniden kullanım

Bir bileşeni tanımladıktan sonra onu istediğin kadar çağırabilirsin. Her çağrıda farklı prop'lar vererek benzer ama farklı çıktılar üretirsin. Buna yeniden kullanım denir.

Örneğin <User name='Ayşe' /> ve <User name='Alex' /> aynı User bileşenini farklı isimlerle çağırır.

Bu sayede aynı kodu tekrar yazmazsın; tek bir tanım, birçok kullanım sağlar.

Yeniden kullanımın avantajı

Yeniden kullanım, yazılım geliştirmede temel bir ilkedir. Aynı mantığı tekrar yazmak yerine, bir kez tanımlayıp birçok yerde kullanırsın. Bu, kodun kısa, tutarlı ve bakımı kolay olmasını sağlar.

Bir hata bulunduğunda yalnızca tek bir yerde (bileşen tanımında) düzeltme yaparsın; tüm çağrılar otomatik olarak güncellenir.

Bu yüzden bileşen yaklaşımı, büyük uygulamaları yönetilebilir kılan temel araçtır.

Uygulama İki User çağrısı

App bileşeni, <View> içinde iki <User /> çağrısı yapsın: ilki name='Ayşe', ikincisi name='Alex' prop'u ile. User bileşenini de name prop'u ile tanımla.

Örnek çözümü göster

function User({ name }) {
  return (
    <Text>{name}</Text>
  );
}

function App() {
  return (
    <View>
      <User name='Ayşe' />
      <User name='Alex' />
    </View>
  );
}

Kendini test et

Yeniden kullanımı eşleştir

<User name='Ayşe' />

İlk çağrı
<User name='Alex' />

İkinci çağrı
aynı User

Tek tanım
farklı name

Farklı çıktı

İkinci çağrı

<View>
  <User name="Ayşe" />
  ____
</View>

Cevabı göster

<View>
  <User name="Ayşe" />
  <User name="Alex" />
</View>

Yeniden kullanım ne sağlar?
- Daha uzun kod
- Daha yavaş çalışma
- Daha fazla hata
- Aynı kodu tekrar yazmamak
Cevabı göster

Aynı kodu tekrar yazmamak — Yeniden kullanım tek tanım, çok kullanım sağlar.

Sıradaki ders: Özet - Bileşenler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler