JSX: JavaScript uzantısı ve kullanım örnekleri

JSX Nedir?

JSX (JavaScript XML), ilk olarak 2013 yılında React’te tanıtılan bir JavaScript sözdizimi uzantısıdır. Geliştiricilerin, kullanıcı arayüzünün yapısını bildirimsel bir tarzda tanımlamasına, işaretleme ve mantığı tek bir dosyada birleştirmesine olanak tanır.

JSX’ten önce, geliştiriciler dize şablonları (Mustache, Handlebars) kullanıyor veya document.createElement aracılığıyla manuel olarak DOM öğeleri oluşturuyordu. Her iki yaklaşımın da dezavantajları vardı: dize şablonları tür denetimine tabi değildi ve manuel DOM oluşturma hantal ve hataya açıktı.

React farklı bir yol seçti — işaretlemeyi doğrudan koda gömmek. Bu karar toplulukta tartışmalara yol açtı, ancak zamanla standart haline geldi. Bugün JSX yalnızca React’te değil, aynı zamanda SolidJS, Preact, Qwik ve hatta Vue’de eklentiler aracılığıyla kullanılmaktadır.

JSX Temel Sözdizimi

JSX öğesi bir HTML etiketi gibi görünür ancak doğrudan JavaScript’e gömülüdür. Her öğe, üç bağımsız değişkenle React.createElement çağrısına dönüştürülür: öğe türü, props nesnesi ve alt öğeler. Tek bir kök öğe zorunlu bir kuraldır: bir JSX ifadesi bir ana öğe veya parça döndürmelidir.

import React from 'react';

// Temel JSX - tek kök öğe
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Gruplama İçin Parçalar

Ek DOM düğümü gerekmediğinde, React.Fragment veya kısa sözdizimi <></> kullanın. Parçalar gerçek bir DOM öğesi oluşturmaz, yalnızca alt düğümleri gruplandırır. Bu, özellikle fazladan bir sarmalayıcının HTML yapısını bozacağı tablolar ve listelerde kullanışlıdır.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

JSX’te İfadeler ve Değişkenler

Herhangi bir JavaScript ifadesi, küme parantezleri { } aracılığıyla JSX’e gömülür. İçinde değişkenler, işlev çağrıları, üçlü operatörler ve dizi yöntemleri kullanabilirsiniz. Koşullu işleme, üçlü operatör veya mantıksal VE aracılığıyla yapılır.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Temel bir sınırlama — küme parantezleri içinde yalnızca ifadeler kullanılabilir, deyimler kullanılamaz. if/else, for, switch kullanamazsınız — yalnızca üçlü operatör, mantıksal operatörler ve dizi yöntemleri. Ok işlevleri dahil olmak üzere işlev çağrılarına izin verilir.

JSX ve HTML Arasındaki Farklar

JSX görsel olarak HTML’e benzer ancak temel farklılıkları vardır. Nitellikler camelCase ile yazılır — class yerine className, onclick yerine onClick, tabindex yerine tabIndex. Bunun nedeni JSX’in JavaScript’e dönüştürülmesi ve özellik adlarında tire kullanılamamasıdır.

Bir diğer önemli fark — kendi kendine kapanan etiketler. HTML’de bazı etiketler (br, hr, input) kapatılmadan bırakılabilir. JSX’te tüm kendi kendine kapanan etiketlerde kapanış eğik çizgisi bulunmalıdır: <br />, <input />. SVG nitelik adları da camelCase’e dönüştürülür: strokeWidth, fillOpacity.

JSX JavaScript’e Nasıl Dönüştürülür

Tarayıcılar JSX’i doğrudan anlamaz. Çalıştırmadan önce JSX kodu bir dönüştürücüden — Babel, TypeScript veya esbuild — geçer. Her JSX öğesi bir createElement veya jsx/runtime çağrısına dönüştürülür.

Babel ile Dönüşüm

// Orijinal JSX
const element = <h1 className="title">Hello</h1>;

// Dönüştürmeden sonra
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17 ile React’i içe aktarmayı gerektirmeyen yeni bir JSX dönüşümü ortaya çıktı. jsx-runtime’ın otomatik içe aktarımı, import React from ‘react’ olmadan bileşen yazmayı sağlar. Babel ve TypeScript, {"runtime": "automatic"} yapılandırması aracılığıyla bu dönüşümü destekler.

React Dışında JSX: Solid, Preact, Vue

JSX React ile ilişkilendirilse de diğer çerçeveler de onu kullanır. SolidJS, Sanal DOM olmadan gerçek DOM düğümlerine derleme ile JSX kullanır. Preact, tam JSX desteği sunan React’e hafif bir alternatiftir. Vue, @vue/babel-plugin-jsx aracılığıyla JSX’i destekler, ancak ana şablonu template’dir.

Temel bir fark ifade anlambilimidir. React’te JSX ifadeleri her işlemede yürütülür. SolidJS’de JSX bir kez derlenir ve güncellemeler sinyaller aracılığıyla izlenir. Bu performansı etkiler: SolidJS Sanal DOM ve uzlaşma gerektirmez, bu da JSX işlemesini hızlandırır.

TypeScript’te JSX dil düzeyinde desteklenir. .tsx uzantılı dosyalar otomatik olarak JSX sözdizimini işler. Props yazımı, TypeScript + JSX’in ana avantajlarından biridir: IDE beklenen nitelikleri, geri çağırma türlerini ve props zorunluluğunu önerir.

JSX ile En İyi Uygulamalar

Okuması ve bakımı kolay JSX kodu yazın. Karmaşık ifadeleri ayrı değişkenlere veya işlevlere çıkarın — bu okunabilirliği artırır ve mantığı işaretlemeden ayrı olarak test etmeyi sağlar. Gereksiz div sarmalayıcılar yerine parçalar kullanın.

Girinti kuralı — iç içe öğeler için girintiyi koruyun. Her iç içe geçme düzeyi bir girinti düzeyidir. Kapanış etiketi, açılış etiketiyle aynı düzeyde olmalıdır. Uzun nitelikler için satır sonları kullanın.

Her işlemede oluşturuluyorlarsa props’ta satır içi ok işlevlerinden kaçının. Bu gibi durumlarda, geri çağırmayı useCallback ile sarın veya işlevi bileşenin dışına taşıyın. Karmaşık bileşenleri daha küçük olanlara bölün — her bileşen arayüzün bir mantıksal birimini işlemelidir.