JSX Nedir? React'te JSX Kullanımının Derinlemesine İncelenmesi

JSX Nedir? React'te JSX Kullanımının Derinlemesine İncelenmesi

JSX (JavaScript XML), React ekosisteminin en ayırt edici özelliklerinden biridir. İlk bakışta HTML gibi görünse de aslında JavaScript'in bir uzantısıdır. Bu yazıda JSX'in ne olduğunu, nasıl çalıştığını, kurallarını ve ileri seviye kullanım tekniklerini derinlemesine inceleyeceğiz.

JSX'in Temeli: Neden Var?

Geleneksel web geliştirmede HTML, CSS ve JavaScript ayrı dosyalarda tutulur. React ise farklı bir felsefe benimser: teknolojilere göre değil, sorumluluklara göre ayırma. Bir butonun görünümü, davranışı ve mantığı aynı bileşende bir arada bulunur.

JSX, React.createElement() fonksiyonunun sözdizimsel şekeridir (syntactic sugar). Kod okunabilirliğini artırır ancak teknik olarak zorunlu değildir. JSX olmadan da React yazabilirsiniz, fakat kimse bunu tercih etmez.

// JSX kullanarak
const header = (
  <header className="main-header">
    <nav>
      <a href="/">Ana Sayfa</a>
      <a href="/hakkimda">Hakkımda</a>
    </nav>
  </header>
);

// JSX kullanmadan (React.createElement ile)
const header = React.createElement(
  'header',
  { className: 'main-header' },
  React.createElement(
    'nav',
    null,
    React.createElement('a', { href: '/' }, 'Ana Sayfa'),
    React.createElement('a', { href: '/hakkimda' }, 'Hakkımda')
  )
);

Gördüğünüz gibi, JSX olmadan basit bir header bile okunması zor bir hale gelir. JSX, bu karmaşıklığı ortadan kaldırır.

JSX Kuralları

1. Tek Kök Eleman Kuralı

Her JSX ifadesi tek bir kök eleman döndürmelidir. Birden fazla eleman döndürmek istiyorsanız bir sarmalayıcı kullanmalısınız:

// HATALI - birden fazla kök eleman
function Header() {
  return (
    <h1>Başlık</h1>
    <p>Alt başlık</p>
  );
}

// DOĞRU - Fragment kullanarak
function Header() {
  return (
    <>
      <h1>Başlık</h1>
      <p>Alt başlık</p>
    </>
  );
}

// DOĞRU - div sarmalayıcı ile
function Header() {
  return (
    <div>
      <h1>Başlık</h1>
      <p>Alt başlık</p>
    </div>
  );
}

2. HTML ve JSX Arasındaki Farklar

JSX, HTML'e benzese de bazı önemli farklar içerir:

HTML	JSX	Açıklama
class	className	class JavaScript'te ayrılmış kelimedir
for	htmlFor	for JavaScript'te ayrılmış kelimedir
style="color: red"	style={{ color: 'red' }}	Style objesi olarak verilir
onclick	onClick	camelCase kullanılır
tabindex	tabIndex	camelCase kullanılır
<br>	<br />	Self-closing taglar kapatılmalıdır

3. JavaScript İfadelerini Kullanma

JSX içinde süslü parantezler {} kullanarak JavaScript ifadelerini çalıştırabilirsiniz:

function UserDashboard({ user }) {
  const loginDate = new Date(user.lastLogin);
  const isNewUser = user.postsCount === 0;

  return (
    <div className="dashboard">
      {/* Değişken kullanımı */}
      <h2>Hoş geldin, {user.name}!</h2>

      {/* Ternary operatör */}
      <span className={isNewUser ? 'badge-new' : 'badge-active'}>
        {isNewUser ? 'Yeni Üye' : 'Aktif Üye'}
      </span>

      {/* Fonksiyon çağrısı */}
      <p>Son giriş: {loginDate.toLocaleDateString('tr-TR')}</p>

      {/* Template literal */}
      <p>{`Toplam ${user.postsCount} yazı paylaştınız`}</p>

      {/* Mantıksal AND operatörü ile koşullu render */}
      {user.isAdmin && (
        <a href="/admin">Yönetici Paneli</a>
      )}

      {/* Matematiksel ifade */}
      <p>Üyelik süresi: {Math.floor((Date.now() - user.createdAt) / 86400000)} gün</p>
    </div>
  );
}

JSX'te Style Kullanımı

JSX'te inline style kullanırken CSS özellik adları camelCase formatına dönüştürülür ve değerler bir JavaScript objesi olarak verilir:

function StyledCard({ title, color, isHighlighted }) {
  // Style objesini değişken olarak tanımlama
  const cardStyle = {
    backgroundColor: isHighlighted ? '#fff3cd' : '#ffffff',
    border: `2px solid ${color}`,
    borderRadius: '8px',
    padding: '20px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    // Sayısal değerler otomatik px alır (bazı istisnalar hariç)
    marginBottom: 16,
    // Birim belirtmek isterseniz string kullanın
    maxWidth: '400px'
  };

  return (
    <div style={cardStyle}>
      <h3 style={{ color, fontSize: '1.25rem' }}>{title}</h3>
      <p>Bu bir stil örneğidir.</p>
    </div>
  );
}

JSX'te Koşullu Render Teknikleri

JSX içinde koşullu olarak içerik göstermenin birden fazla yolu vardır:

function Notification({ type, message, count }) {
  // 1. Erken return
  if (!message) return null;

  // 2. Değişkene atama
  let icon;
  if (type === 'success') icon = '✓';
  else if (type === 'error') icon = '✗';
  else icon = 'ℹ';

  return (
    <div className={`notification notification-${type}`}>
      {/* 3. Ternary operatör */}
      <span>{icon} {message}</span>

      {/* 4. Mantıksal AND - count 0 olduğunda dikkat! */}
      {count > 0 && <span className="badge">{count}</span>}

      {/* 5. Nullish coalescing */}
      <p>Durum: {type ?? 'bilinmiyor'}</p>
    </div>
  );
}

JSX'te Spread Operatörü

Props aktarırken spread operatörü oldukça kullanışlıdır:

function Button({ children, variant = 'primary', ...restProps }) {
  return (
    <button
      className={`btn btn-${variant}`}
      {...restProps}
    >
      {children}
    </button>
  );
}

// Kullanım
function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Tıklandı')} disabled={false}>
        Kaydet
      </Button>
      <Button variant="danger" type="button" aria-label="Sil">
        Sil
      </Button>
    </div>
  );
}

JSX Dönüşümü: Babel ve Yeni JSX Transform

React 17 öncesinde her JSX dosyasında import React from 'react' gerekiyordu. React 17 ile gelen yeni JSX transform sayesinde bu artık gerekli değildir:

// React 17 öncesi - React import zorunlu
import React from 'react';

function App() {
  return <h1>Merhaba</h1>;
}

// React 17+ - React import gerekmez (JSX için)
function App() {
  return <h1>Merhaba</h1>;
}

// Yeni transform'un derlediği kod:
import { jsx as _jsx } from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Merhaba' });
}

Sonuç

JSX, React geliştirmenin temel taşıdır. HTML benzeri sözdizimiyle JavaScript'in gücünü birleştirir ve bileşen yapısını okunabilir hale getirir. JSX kurallarını, HTML ile farklılıklarını ve koşullu render tekniklerini iyi anlamak, React ile verimli çalışmanın ilk adımıdır. Babel'in JSX'i nasıl dönüştürdüğünü bilmek de hata ayıklama sırasında size avantaj sağlayacaktır.

Kaynaklar

• React Docs - Writing Markup with JSX
• React Docs - JavaScript in JSX with Curly Braces
• React Blog - Introducing the New JSX Transform
• MDN - Spread Syntax