JSX

JavaScript XML

Okunuşu: cey es eks

Güncellendi 3 Ekim 20262 dk okuma

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ğijsx

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.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin