Öznitelikler ve className
- React kursu
- Başlangıç
- Ders 7/84
- 4 dk
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.
Başlangıç kodu
// Card bileşenini buraya yazÖrnek çözüm
function Card() {
return <div className="card"><p>Hosgeldin</p></div>;
}
export default Card;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 class yerine ne yazılır?
- classes
- cssClass
- className Doğru cevap
- class
Açıklama: class yerine className yazılır çünkü class JavaScript'te ayrılmış kelime.
2 htmlFor kullanımı
<label ____="email">E-posta</label><label htmlFor="email">E-posta</label>Açıklama: for yerine htmlFor yazılır.
3 Öznitelikleri eşleştir
| Kavram | Anlamı |
|---|---|
className |
class |
htmlFor |
for |
onClick |
onclick |
maxLength |
maxlength |