JSX kuralları: ifadeler, öznitelikler ve parçalar
{ } ile JSX ifadelerini kullanın, camelCase öznitelikleri (className, onClick) uygulayın ve parçalar aracılığıyla birden çok öge döndürün.
JSX kuralları: ifadeler, öznitelikler ve parçalar, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
JSX'in kattıkları
Amaç: JSX'in temellerinde uzmanlaşın: ifadeler için { } kullanın, camelCase öznitelikleri uygulayın ve kardeş öğeleri parçalar ile gruplayın.
İfadeler ve öznitelikler
İfadeler, { } içine yazılır ve değişkenler, fonksiyon çağrıları veya basit matematik işlemleri olabilir. Öznitelikler, className, htmlFor ve onClick gibi camelCase biçimini kullanır.
Gösterim: ifadeler ve öznitelikler
Dinamik değerleri { } ile oluşturun ve camelCase öznitelikleri olarak className/başlık/onClick kullanın.
<div id="root"></div>
Kardeş öğeler için parçalar
Birden çok kardeş öğeyi bir parça kullanarak döndürün: ya <>...</> ya da <React.Fragment>. Parçalar, fazladan sarmalayıcı div öğelerini önler.
Parçalar için demo
Kardeş öğeleri gruplamak için kısa <> parçalarını kullanın; bunlar fazladan DOM düğümleri oluşturmaz.
<div id="root"></div>
İpuçları ve tuzaklar
İpuçları:
- Yalnızca { } içindeki ifadeleri kullanın (deyimleri değil).
- className yerine sınıf kullanın.
- Gereksiz sarmalayıcı div öğeleri yerine parçaları tercih edin.
JSX ifade kuralı
Özet
Özet: Dinamik değerleri { } içine koyun, camelCase özniteliklerini kullanın ve işaretlemeyi temiz tutmak için kardeş öğeleri parçalarla gruplayın.
Sıkça Sorulan Sorular
“JSX kuralları: ifadeler, öznitelikler ve parçalar” dersi ücretsiz mi?
Evet — “JSX kuralları: ifadeler, öznitelikler ve parçalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“JSX kuralları: ifadeler, öznitelikler ve parçalar” dersinde ne öğreneceğim?
{ } ile JSX ifadelerini kullanın, camelCase öznitelikleri (className, onClick) uygulayın ve parçalar aracılığıyla birden çok öge döndürün. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.
“JSX kuralları: ifadeler, öznitelikler ve parçalar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- JSX kuralları: ifadeler, öznitelikler ve parçalar
- Listeler ve anahtarlar; koşullu oluşturma
- Biçimlendirme seçenekleri: CSS Modules, satır içi stiller ve sınıf yardımcıları