İsimlendirme kuralları

Bileşen adlarının büyük harfle başladığını ve neden önemli olduğunu öğrenirsin.

İsimlendirme yöntemleri

React'te bileşen adları PascalCase yazılır: UserCard, ShoppingCart, LoginForm. Bu, HTML etiketlerinden ayırmak içindir.

HTML etiketleri küçük harfle başlar: div, span, button. Bileşen adı küçük harfle başlarsa React onu HTML etiketi sanar ve çalışmaz.

Bileşen adı aynı zamanda ne yaptığını anlatmalı: UserList net, Comp1 belirsiz. İyi adlar kodun bakımını kolaylaştırır.

Ad anlamlılığı

Bileşen adı ne yaptığını anlatmalı. Header net bir üst bilgi bileşeni; Thing ise hiçbir şey söylemez. Ekipler genelde ne + ne için yöntemini izler: UserAvatar, CartItem, SearchInput.

Dosya adı da bileşen adıyla aynı olmalı: UserAvatar.jsx dosyasında UserAvatar bileşeni bulunur. Bu, aramayı kolaylaştırır.

İsimlendirme tutarlı olunca ekip içindeki iletişim de hızlanır: bir isim duyduğunda herkes aynı şeyi düşünür.

Uygulama UserAvatar bileşeni

Aşağıdaki iskeleti tamamla. UserAvatar adında bir bileşen yaz; <figure> içinde <img alt="Avatar" /> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function UserAvatar() {
  return <figure><img alt="Avatar" /></figure>;
}

export default UserAvatar;

Kendini test et

Hangisi geçerli bir bileşen adıdır?
- userCard
- user_card
- UserCard
- user-card
Cevabı göster

UserCard — UserCard PascalCase olduğu için bileşen adıdır.

PascalCase örneği

Doğru bileşen adı: ____ (PascalCase).

Cevabı göster

Doğru bileşen adı: ProductCard (PascalCase).

Adlandırma önerilerini eşleştir

UserCard

Anlamlı ad
userCard

Yanlış
UserCard.jsx

Dosya adı
User-Card

Geçersiz

Sıradaki ders: Özet - Bileşenler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler