SİBERSALDİRİ.COM · KONU ODAKLI DERS
Bu derste kazanacaklarınız
- Props ile Bileşen arasındaki ilişkiyi açıklamak.
- “Bileşende düğmeyi gizlemek yetki sağlar mı?” sorusuna gerekçeli yanıt vermek.
- Örneği değiştirip beklenen ve gözlenen davranışı karşılaştırmak.
Çalışma mantığı ve güven sınırı
Liste anahtarları öğelerin kimliğini korumaya yardım eder; sırası değişen listede indeks her zaman doğru anahtar değildir. Props'u doğrudan değiştirmeyin. Kullanıcı metni normal JSX yerleştirmesiyle gösterilirken HTML enjeksiyonu için ayrı ve riskli API gerekir. İstemci bileşeni sunucu yetkisini uygulayamaz; arayüzdeki rol görünümü yalnızca deneyim katmanıdır.
Açıklamalı örnek
Aşağıdaki parça kavramı görünür kılar. Komut veya kod içeren örnekleri üretim sisteminde değil, size ait ayrı deneme ortamında değerlendirin. Mimari şema ve politika örnekleri çalıştırılabilir program değildir.
function LessonTitle({title}) {
return <h2>{title}</h2>;
}
// Kullanıcı verisi metin olarak yerleştirilir.Beklenen sonuç ve yorumu
Başlık bileşeni aldığı metni gösterir; ek bir HTML yorumlama gerektirmez.
Karşılaştırmalı durumlar
| Durum | Beklenen yaklaşım | Neden? |
|---|---|---|
| Normal kullanıcı metni | JSX metin gösterimi | HTML yürütme istenmez |
| Liste sırası değişiyor | Kalıcı kimlikli key | Öğe ilişkisi korunur |
| Props değiştiriliyor | Veri akışını düzelt | Sahiplik sözleşmesi bozulur |
Uygulama görevi
Aynı bileşeni üç farklı başlıkla kullanın. Verinin tek yönde ilerlemesinin hata aramayı nasıl kolaylaştırdığını yazın.
- İşlemden önce beklenen sonucu ve kabul koşulunu yazın.
- Tek bir değişkeni değiştirin; gözlemi ve kullandığınız ortamı kaydedin.
- Sonucu yukarıdaki karşılaştırma tablosuyla değerlendirin. Uymayan durumda hangi varsayımın yanlış olabileceğini açıklayın.
Sık yapılan hata ve düzeltme yönü
Güvenilmeyen metni dangerouslySetInnerHTML içine doğrudan vermeyin.
Kendinizi sınayın
Bileşende düğmeyi gizlemek yetki sağlar mı?
Açıklamalı yanıt: Hayır. Sunucu ilgili işlemi ve nesneyi bağımsız denetlemelidir.
İlgili derslerle ilerleyin
- React Hooks: Durum, saf hesap ve dış etkiler
- Redux Toolkit: Ortak durumun kapsamını seçme
- Next.js: Sunucu ve istemci sorumluluklarını ayırma
- SOLID: Değişim maliyetini azaltan sorular
Teknik başvuru
Bu dersin anlatımı ve örnekleri akademi için yeniden hazırlanmıştır. Aşağıdaki bağlantı, kullanılan teknoloji veya güvenlik yaklaşımının ayrıntılarını doğrulamak için teknik başvurudur.
