Öznitelikler ve className

JSX'te özniteliklerin nasıl yazıldığını ve class yerine className kullanıldığını öğrenirsin.

Öznitelikler ve className

JSX'te HTML öznitelikleri yazılır ama bazıları farklı ad alır. En yaygınları: class yerine className, for yerine htmlFor.

Öznitelik adları camelCase yazılır: tabIndex, readOnly, maxLength. Değerler çift tırnak içinde string veya süslü parantez içinde ifade olabilir: <img src="logo.png" /> veya <img src={logo} />.

Boolean öznitelikler için yalnızca disabled yazmak yerine disabled={true} biçimi tercih edilir. JSX bunu da kabul eder ama açık olmak iyidir.

camelCase öznitelikler

JSX'te öznitelikler camelCase yazılır; HTML'deki tireli adlar tek parça olur. maxlength yerine maxLength, tabindex yerine tabIndex kullanırsın.

Olay öznitelikleri de camelCase'tir: onclick değil onClick, onchange değil onChange. Bunlara bir fonksiyon verirsin, string değil.

Style özniteliği özel: bir nesne alır, anahtarlar camelCase olur. style={{ color: 'red' }} doğru, style="color:red" yanlıştır.

Uygulama className ile kart yaz

Aşağıdaki iskeleti tamamla. Card adında bir bileşen yaz; <div className="card"> içinde <p>Hosgeldin</p> döndürsün ve dışa aktarılsın.

Örnek çözümü göster

function Card() {
  return <div className="card"><p>Hosgeldin</p></div>;
}

export default Card;

Kendini test et

class yerine ne yazılır?
- classes
- cssClass
- className
- class
Cevabı göster

className — class yerine className yazılır çünkü class JavaScript'te ayrılmış kelime.

htmlFor kullanımı

<label ____="email">E-posta</label>

Cevabı göster

<label htmlFor="email">E-posta</label>

Öznitelikleri eşleştir

className

class
htmlFor

for
onClick

onclick
maxLength

maxlength

Sıradaki ders: Özet - JSX temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler