# JSX (JavaScript XML)

Adres: https://softwaredictionary.org/tr/terimler/jsx
Kategori: Web Geliştirme
Son güncelleme: 2026-10-03
Okunuşu: cey es eks

Kısaca: JSX, kodun içine HTML benzeri işaretleme yazmayı sağlayan bir JavaScript sözdizimi uzantısıdır; çoğunlukla React ile arayüzün nasıl görüneceğini tarif eder.

## JSX nedir?

JSX, 2013'te React ile birlikte tanıtıldı. Öğeleri fonksiyon çağrılarıyla kurmak yerine bir JavaScript dosyasına doğrudan `<h1 className="title">Hello, {name}</h1>` yazarsınız. Süslü parantezler tekrar JavaScript'e geçer; böylece değişken, hesaplama ya da fonksiyon çağrısı gibi herhangi bir ifade işaretlemenin içinde yer alabilir.

Tarayıcılar JSX'i anlamaz. Babel, TypeScript, esbuild ya da SWC gibi bir derleyici her etiketi, bir öğe nesnesi oluşturan sıradan bir fonksiyon çağrısına çevirir: başta `React.createElement`, bugün ise genellikle React'in JSX çalışma zamanından bir fonksiyon. `.tsx` uzantısı, TypeScript dosyalarındaki aynı sözdizimidir ve her prop için tür kontrolü yapar.

JSX JavaScript olduğu için listeler ve koşullar sıradan kodla yazılır: bir listeyi render etmek için `items.map(...)`, bir şeyi koşullu göstermek için `&&` ya da üçlü operatör. Bazı adlar JavaScript özellikleri oldukları için HTML'den farklıdır: `class` yerine `className`, `for` yerine `htmlFor`, `onClick` gibi camelCase olay işleyicileri.

Sık yapılan bir yanlış, JSX'in JavaScript içindeki HTML olduğunu ya da yalnızca React ile çalıştığını düşünmektir. Nesne oluşturmaya yarayan bir sözdizimidir; bu yüzden ifadeler otomatik olarak escape edilir ve bu birçok XSS saldırısına karşı korur. Preact ve Solid gibi kütüphaneler de JSX'i kendi çalışma zamanlarıyla kullanır.

## Önemli noktalar

- JSX, JavaScript içinde HTML'e benzeyen işaretleme yazmayı sağlar.
- 2013'te React ile birlikte tanıtıldı.
- Bir derleyici her etiketi bir fonksiyon çağrısına çevirir; TSX TypeScript biçimidir.
- Süslü parantezler herhangi bir JavaScript ifadesini işaretlemeye yerleştirir.
- Nitelikler className ve onClick gibi JavaScript adlarını izler.

## Örnek: JSX ve neye derlendiği

```jsx
function ProductList({ products, onBuy }) {
  return (
    <ul className="products">
      {products.length === 0 && <li>No products yet</li>}
      {products.map((p) => (
        <li key={p.id}>
          {p.name}: {p.price.toFixed(2)} €
          <button onClick={() => onBuy(p.id)}>Buy</button>
        </li>
      ))}
    </ul>
  );
}

// <h1 className="title">Hi</h1>  compiles roughly to:
// jsx("h1", { className: "title", children: "Hi" })
```

## Sık sorulan sorular

**React kullanmak için JSX şart mı?**

Hayır. React'in öğe fonksiyonlarını doğrudan çağırabilirsiniz, ama JSX okunması çok daha kolaydır ve neredeyse her React projesi onu kullanır.

**JSX ile TSX arasındaki fark nedir?**

TSX, bir TypeScript dosyasındaki JSX'tir. Sözdizimi aynıdır; TypeScript ayrıca her bileşene geçirilen prop'ları da kontrol eder.

**JSX neden class yerine className kullanır?**

Çünkü JSX, class'ın ayrılmış bir kelime olduğu JavaScript'e derlenir; React de HTML nitelik adlarını değil, className ve htmlFor gibi DOM özellik adlarını izler.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt