JSX nedir?

JSX'in HTML benzeri sözdizimiyle arayüz tanımlamayı sağladığını öğrenirsin.

JSX nedir?

JSX, JavaScript dosyalarının içine HTML benzeri sözdizimi yazmaya olanak tanıyan bir React eklentisidir. return <h1>Merhaba</h1>; yazdığında aslında arka planda React.createElement(...) çağrısı üretilir.

JSX sayesinde arayüzü tasarlayan kodu doğrudan bileşenin yanına koyarsın; böylece görsel ve mantık bir arada durur. JSX bir şablon dili değildir; tamamen JavaScript'in bir parçasıdır.

JSX'in en büyük avantajı, bildirimsel olmasıdır: ekranda ne görmek istediğini söylersin, React gerisini halleder.

JSX neden kullanışlı?

JSX olmadan bir arayüzü React.createElement ile elle yazmak uzun ve okunması zor olur. JSX, HTML'e benzer şekliyle aynı yapıyı kısa ve anlaşılır yazmanı sağlar.

JSX'te süslü parantez { } içine herhangi bir JavaScript ifadesi yerleştirebilirsin. Böylece veriyi görselle bağlamak tek satırda halledilir.

JSX derlenmiş JavaScript'tir; tarayıcı onu doğrudan anlamaz. Bu yüzden Vite veya Babel gibi bir araç kodu dönüştürür.

Uygulama İlk JSX bileşeni

Aşağıdaki iskeleti tamamla. Title adında bir fonksiyon yaz; <h1>Hosgeldin</h1> döndürsün ve dışa aktarılsın.

Örnek çözümü göster

function Title() {
  return <h1>Hosgeldin</h1>;
}

export default Title;

Kendini test et

JSX'in derlendiği çağrı
- React.createElement
- React.makeNode
- React.build
- document.createElement
Cevabı göster

React.createElement — JSX, arka planda React.createElement çağrılarına derlenir.

JSX'i derleyen araç

JSX'i tarayıcının anlayacağı koda ____ veya Babel çevirir.

Cevabı göster

JSX'i tarayıcının anlayacağı koda Vite veya Babel çevirir.

Kavramları eşleştir

JSX

HTML benzeri sözdizimi
{ }

İfade yuvası
React.createElement

Derlenen çağrı
Babel

Dönüştürücü

Sıradaki ders: İfadeler ve süslü parantez

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler