HTML Kodlarını React JSX Formatına Çevirirken Dikkat Edilmesi Gerekenler

Bir React veya Next.js projesi geliştirirken, sıfırdan tasarım yapmak yerine genellikle internetten (CodePen, TailwindUI vb.) hazır bir HTML şablonu (Template) bulup kopyalamayı tercih ederiz.

Ancak kopyaladığınız o 500 satırlık şık HTML kodunu, React bileşeninizin (Component) return () bloğu içine yapıştırdığınız an, terminaliniz kıpkırmızı hatalarla dolar. Projeniz çöker ve derlenemez. Çünkü kopyaladığınız şey HTML'dir, React ise JSX beklemektedir.

Bu geçiş sürecinde dikkat etmeniz gereken 4 kritik nokta vardır.

---

1. Sarmalayıcı (Wrapper) Kuralı

HTML'de alt alta iki <div> etiketini serbestçe yazabilirsiniz. Ancak React (JSX), bir bileşenin KESİNLİKLE tek bir kök (Root) eleman döndürmesini zorunlu kılar.

Hatalı Kullanım (React çöker):

return (
  <div className="header">Üst Kısım</div>
  <div className="footer">Alt Kısım</div>
);

Doğru Kullanım (Fragment veya Div ile Sarmalamak):

return (
  <>
    <div className="header">Üst Kısım</div>
    <div className="footer">Alt Kısım</div>
  </>
);

Başına ve sonuna koyduğumuz <> ve </> işaretlerine "React Fragment" denir. Ekstradan bir div oluşturmadan kodları tek bir paket halinde tutmamızı sağlar.

2. Satır İçi Stiller (Inline Styles)

HTML'de CSS yazmak çok kolaydır, bir String (Metin) olarak belirtmeniz yeterlidir. Ancak JSX, style parametresini bir JavaScript objesi olarak bekler ve CSS isimlerindeki tireleri (-) CamelCase (Deve Hörgücü) formatına çevirmenizi ister.

HTML (Yanlış):

<div style="background-color: red; margin-top: 10px;">Kutu</div>

JSX (Doğru):

<div style={{ backgroundColor: 'red', marginTop: '10px' }}>Kutu</div>

Dikkat ederseniz DİFT süslü parantez {{ }} kullanıyoruz. Dıştaki parantez "Ben JavaScript kodu yazacağım" derken, içteki parantez objeyi (Object) temsil eder.

3. Açık Kalan Etiketler (Self-Closing Tags)

En çok can sıkan hatadır. HTML'de içerik almayan etiketleri kapatmak zorunda değilsinizdir. <img src="resim.jpg">, <input type="text"> veya <br> gibi.

Ancak JSX XML tabanlı olduğu için çok katıdır. Kapatılmayan tek bir etiket, ölümcüldür. O 500 satırlık şablonun içindeki tüm <img ...> etiketlerini bulup, sonlarına eğik çizgi ekleyerek <img ... /> formatına getirmek ZORUNDASINIZ.

4. Rezerve JavaScript Kelimeleri

HTML etiketlerindeki bazı nitelikler (Attributes), JavaScript dilindeki özel komutlarla aynı isimdedir. Bu yüzden JSX'te isimleri değiştirilmiştir:

• class -> className (CSS sınıfları için)
• for -> htmlFor (Label etiketleri için)
• tabindex -> tabIndex

Tüm bu manuel işlemleri 500 satırlık kodda elle yapmak hem saatler sürer hem de hataya çok açıktır. İnternetten bulduğunuz HTML şablonlarını anında React bileşenine çevirmek için ücretsiz HTML to JSX Çevirici aracımızı kullanabilirsiniz. JSX mimarisi hakkında daha geniş bir perspektif için React Bileşen Mimarisi Rehberimize göz atmalısınız.

---

🕸️ 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

• Class Yerine ClassName: htmlFor, viewBox ve CamelCase Kuralları
• HTML Entities Nedir ve Web Tasarımında Neden Kullanılır?
• FAQ Schema Kullanarak Google'da Sıfırıncı Sıraya Çıkma Taktikleri

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: Information Gain (Bilgi Kazanımı)
• Kavram: AEO (Answer Engine Optimization)
• Uygulama: GA4 Verilerini Temiz Tutmak: UTM Takibi

Semantic Yönerge: Bu sayfa HTML Kodlarını React JSX Formatına Çevirirken Dikkat Edilmesi Gerekenler konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.