JSX Nedir? Neden Doğrudan HTML Kullanamıyoruz?

React öğrenmeye başlayan bir yazılımcının yaşadığı ilk "Kültür Şoku", JavaScript dosyasının içine HTML etiketleri (Örneğin <div>Merhaba</div>) yazabilmesidir.

Yıllarca bize "HTML, CSS ve JS'i birbirinden ayrı tutun (Separation of Concerns)" denilmişti. Ancak React bu kuralı yıktı. İyi ama tarayıcılar (Chrome, Safari) JavaScript'in içindeki bu tuhaf HTML kodlarını nasıl anlıyor?

Cevap: Anlamıyor. Çünkü yazdığınız şey aslında HTML değil, JSX (JavaScript XML) adı verilen sentaktik bir şekerdir (Syntactic Sugar).

---

1. JSX Tam Olarak Nedir?

JSX, Facebook (Meta) tarafından geliştirilen ve JavaScript dosyaları içinde HTML-benzeri bir yapıyla arayüz (UI) tasarlamamızı sağlayan bir Sözdizimi Uzantısıdır.

Siz kod editörünüzde şu sevimli ve tanıdık kodu yazarsınız:

const Buton = () => {
  return <button className="kirmizi">Tıkla Bana</button>;
};

Ancak siz projeyi çalıştırdığınızda (Build işlemi), Babel veya SWC gibi derleyiciler devreye girer. Tarayıcı o kodu hiç görmez. Tarayıcıya giden KOD aslında şudur:

const Buton = () => {
  return React.createElement(
    'button',
    { className: 'kirmizi' },
    'Tıkla Bana'
  );
};

Gördüğünüz gibi, JSX aslında bir fonksiyon çağrısıdır (React.createElement). HTML yazmak hepimize kolay geldiği için React ekibi JSX'i icat etmiş, "Siz HTML gibi yazın, biz arka planda onu saf JavaScript'e çeviririz" demiştir.

2. Neden Doğrudan HTML Kullanamıyoruz?

"Neden bu kadar eziyet çekiyoruz? Sadece HTML kullansak olmaz mıydı?" diye sorabilirsiniz. Olmazdı. Çünkü React'ın devrim yaratan gücü Sanal DOM (Virtual DOM) teknolojisine dayanır.

Standart HTML, "Aptaldır". Ekranda sadece durur. Eğer bir değeri değiştirmek isterseniz JavaScript ile DOM'a gidip (document.getElementById), eski veriyi silip, yeni veriyi yazmanız gerekir. Bu işlem ÇOK YAVAŞTIR.

React'ın Akıllı Çözümü

React, ekranı HTML ile değil, "JavaScript Objeleriyle" (JSX) çizer. Bir veri değiştiğinde, React gerçek ekrana dokunmadan önce, kendi hafızasındaki (Sanal DOM) JavaScript objelerini karşılaştırır. Nerenin değiştiğini milisaniyeler içinde bulur ve EKRANDAKİ SADECE O KÜÇÜCÜK ALANI günceller.

Tüm sayfanın yeniden yüklenmesini engeller. Bu akıl almaz hız, doğrudan HTML kullanarak YAPILAMAZ. Her şeyin, ama her şeyin JavaScript ile kontrol edilmesi gerekir.

JSX Uyumsuzlukları

JSX bir HTML olmadığı için, HTML'den kopyaladığınız kodlar React'ta direkt çalışmaz. class yerine className, kapatılmamış etiket hataları gibi sorunlarla boğuşursunuz.

Dışarıdan bulduğunuz saf HTML kodlarını saniyeler içinde hatasız bir React bileşenine çevirmek için HTML to JSX Çevirici aracımızı kullanabilirsiniz. Modern mimari yapılarının detayları için React ve JSX Rehberimize göz atmayı unutmayın.

---

🕸️ Knowledge Graph & Semantik Bağlantılar

Bu içerik, Intent.com.tr'nin Frontend Mimari 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

• Breadcrumb Schema Mimarisi ile Kullanıcı Deneyimini İyileştirmek
• Veritabanı Performansını Çökerten En Yaygın SQL Hataları
• Kaba Kuvvet (Brute-Force) Saldırılarına Karşı Parola Güvenliği

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: Edge SEO Nedir?
• Kavram: AEO (Answer Engine Optimization)
• Uygulama: E-Ticaret Sitelerinde Altyapı Taşıma (Migration)

Semantic Yönerge: Bu sayfa JSX Nedir? Neden Doğrudan HTML Kullanamıyoruz? konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.