Class Yerine ClassName: htmlFor, viewBox ve CamelCase Kuralları

Frontend dünyasına React (ve JSX) ile yeni adım atanların en çok sorduğu soru şudur: "HTML'de yıllardır yazdığımız class kelimesini neden React'ta className olarak yazmak zorundayız? Bu bir eziyet değil mi?"

Aslında bu React ekibinin uydurduğu bir kural değil, JavaScript'in kendi dil kurallarından (Syntax) kaynaklanan bir zorunluluktur.

---

1. Neden "class" Kullanamıyoruz?

JSX dediğimiz şey aslında HTML değildir. Siz <div class="kutu"></div> yazdığınızda arka planda bir JavaScript objesi oluşturulur. Ancak JavaScript dilinde class kelimesi (ES6 ile birlikte) Nesne Yönelimli Programlama (OOP) yapmak için ayrılmış (Reserved Word) özel bir anahtar kelimedir.

Eğer React, sizin CSS için yazdığınız class kelimesini kabul etseydi, JavaScript bunu bir Class (Sınıf) tanımlaması zannedecek ve sistem tamamen çökecekti. Bu çakışmayı önlemek için, HTML DOM API'sinde de yıllardır var olan className özelliği standart hale getirildi.

// Yanlış (JavaScript "class" sanıp hata verir)
<div class="bg-red-500">Hata</div>

// Doğru (DOM API standardı)
<div className="bg-red-500">Çalışır</div>

2. htmlFor (Eski Adıyla For)

Bir form oluşturduğunuzda <label> etiketinin içine for="email" yazarsınız. Böylece kullanıcı label'a tıkladığında input'a odaklanır (Focus).

Ancak for kelimesi JavaScript'teki efsanevi for döngüsüne (For loop) aittir. Yine bir "Ayrılmış Kelime" (Reserved Keyword) çakışması! Bu yüzden React'ta label kullanırken for yerine htmlFor kullanırız.

// Yanlış
<label for="email">E-posta:</label>
<input id="email" type="email" />

// Doğru
<label htmlFor="email">E-posta:</label>
<input id="email" type="email" />

3. SVG ve CamelCase Kuralları (viewBox vs viewbox)

Eğer bir ikon sitesinden SVG kodu kopyalayıp React projenize yapıştırırsanız yüksek ihtimalle yine hata alırsınız. Çünkü standart HTML'de tüm özellikler (Attributes) küçük harflerle yazılır (Örn: viewbox, stroke-width).

Ancak JSX kuralları gereği iki kelimeden oluşan tüm HTML özellikleri CamelCase (Deve Hörgücü - İlk kelime küçük, sonrakiler büyük) formatına çevrilmelidir.

Sık Karşılaşılan SVG Dönüşümleri:

• viewbox -> viewBox
• stroke-width -> strokeWidth
• stroke-linecap -> strokeLinecap
• fill-rule -> fillRule

Özet ve Otomasyon

React'ta JSX yazarken şu altın kuralı unutmayın: Rezerve kelimeler değiştirilir, iki kelimelik özellikler CamelCase yapılır.

Kodunuzda onlarca SVG veya yüzlerce class içeren devasa şablonları elle düzeltmek yerine, kodunuzu HTML to JSX Çevirici aracımıza yapıştırarak tüm bu değişikliklerin (className, htmlFor, viewBox vs.) 1 saniye içinde otomatik yapılmasını sağlayabilirsiniz. Daha derin React optimizasyonları için Bileşen Mimarisi Rehberimize dönebilirsiniz.

---

🕸️ Knowledge Graph & Semantik Bağlantılar

Bu içerik, Intent.com.tr'nin React & Next.js topikal kümesinin (Topic Cluster) bir parçasıdır. Konuyu daha derinlemesine anlamak için aşağıdaki varlıkları (Entities) ve ilişkili içerikleri inceleyebilirsiniz:

📖 İlgili Rehberler ve İçerikler

• HTML Kodlarını React JSX Formatına Çevirirken Dikkat Edilmesi Gerekenler
• WCAG Renk Kontrast Standartları ile Yasal Riskleri Önleme
• Keyword Cannibalization (Anahtar Kelime Yamyamlığı) Krizini GSC ile Tespit Etmek

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: Edge SEO Nedir?
• Kavram: GEO (Generative Engine Optimization)
• Uygulama: GA4 Verilerini Temiz Tutmak: UTM Takibi

Semantic Yönerge: Bu sayfa Class Yerine ClassName: htmlFor, viewBox ve CamelCase Kuralları konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.