JSX Nedir?

Böyle bir değişken tanımladığımızı düşünün:

const element = <h1>Merhaba Dünya!</h1>;

Bu string ya da HTML değildir.

Buna JSX denir, JavaScript için bir syntax uzantısıdır.

JSX, React elementleri üretir. Bir sonraki bölümde bunları DOM’a render etmeyi keşfedeceğiz.

DOM’a render etmek, yazdığınız React kodunun derlenip HTML’e yerleştirilme işlemine denir. Bir sonraki sayfada detaylıca anlatılacaktır.

Başlamanız için gerekli olan JSX’in temel bilgilerine aşağıdan erişebilirsiniz.

Neden JSX?

React, olayların nasıl işlendiğini, durumun zaman içinde nasıl değiştiğini kontrol eder ve bunları arayüze aktarır.

React yazmak için JSX’i kullanmak zorunda değilsiniz. Fakat yazım şekli HTML’i andırdığı için kolayca alışacak ve hızlıca kod yazabileceksiniz. Ayrıca React’in daha kullanışlı hata ve uyarı mesajları göstermesine izin verir.

O halde JSX yazmaya başlayalım!

Javascript ifadelerini JSX'e Yerleştirmek

Herhangi bir JavaScript ifadesini JSX’de süslü parantez içine sarmalayarak yerleştirebilirsiniz.

Örneğin; { 2 + 2 }, { user.firstName } ve { formatName(user) } gibi sayısal işlem, obje, değişken, fonksiyon vb kullanabilirsiniz.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Ömer',
  lastName: 'Gülçiçek'
};

const element = (
  <h1>
    Merhaba, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen’de Deneyin

Fonksiyonları JSX'e Yerleştirmek

Derleme sonrasında, JSX ifadeleri JavaScript fonksiyonları haline gelir.

Yani, if deyimleri ve döngüler içinde JSX’i kullanabilir ayrıca bir fonksiyondan JSX return edebiliriz.

function getGreeting(user) {
  if (user) {
    return <h1>Merhaba {formatName(user)}!</h1>;
  }
  return <h1>Merhaba yabancı.</h1>;
}

JSX ile Attribute Belirlemek

String ifadeleri attribute olarak belirtmek için tırnak işaretleri kullanabilirsiniz:

const element = <div tabIndex="0"></div>;

Bir attribute’e JavaScript ifadesi yerleştirmek için süslü parantezleri de kullanabilirsiniz:

const element = <img src={user.avatarUrl}></img>;

Bir attribute’e JavaScript ifadesi yerleştirirken süslü parantezler arasına tırnak işareti koymayın. Tırnak işaretleri string değerler için ve süslü parantezler ise JavaScript ifadeleri için kullanmanız gerekir. Her ikisi birden aynı attribute’te kullanılamaz.

Uyarı:

JSX JavaScript’e HTML’den daha yakın olduğundan ReactDOM, HTML nitelik adları yerine camelCase adlandırma kuralını kullanır.

Örneğin JSX’te class yerine className, tabindex yerine tabIndex kullanılır.

JSX ile Child Belirlemek

Bir etiket boşsa (child içermiyorsa manasında), XML gibi hemen /> ile kapatabilirsiniz:

const element = <img src={user.avatarUrl} />;

JSX etiketleri child içerebilir:

const element = (
  <div>
    <h1>Merhaba!</h1>
    <h2>Seni burada görmek güzel.</h2>
  </div>
);

JSX elementindeki ana kapsayıcının içindeki ifadeler child (çocuk) olarak adlandırılır. Örneğin, üstteki ifadede <div> ana kapsayıcısının içerisinde bulunan <h1> ve <h2> etiketleri child olarak adlandırılır.

JSX, Enjeksiyon Saldırılarını Önler

Input’tan gelen içeriği JSX’e yerleştirmek güvenlidir:

const title = response.inputtanGelenKotuNiyetliGiris;
// bu güvenlidir:
const element = <h1>{title}</h1>;

Varsayılan olarak React DOM, JSX’in içindeki herhangi bir değeri değişkene atmadan önce ifadeyi unicode’a çevirir. Böylece, uygulamanızda açıkça yazılmamış bir şeyi hiçbir zaman enjekte edememenizi sağlar. İşlenmeden önce her şey bir string’e dönüştürülür. Bu, XSS saldırılarını önlemeye yardımcı olur.

Örneğin & ifadesi &, < ifadesi <, > ifadesi >, " ifadesi ", ' ifadesi ' şekline dönüşecektir. Böylece input üzerinden XSS saldırısı yapmaya kalkılsa bile yazılan kod tamamen string’e dönüşmüş olduğundan etkisiz olacaktır.

JSX Nesneleri Temsil Eder

Babel, JSX’i React.createElement() çağrılarına derlemektedir.

Yani bizim yazdığımız tüm JSX ifadeleri Babel tarafından derlenerek saf JavaScript’in anlayacağı şekilde objelere dönüşür.

Bu iki örnek aynıdır:

const element = (
  <h1 className='greeting'>
    Merhaba Dünya!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Merhaba Dünya!'
);

React.createElement() hatasız kod yazmanıza yardımcı olmak için birkaç kontrol gerçekleştirir ancak aslında böyle bir nesne oluşturur:

// Not: Bu yapı basitleştirilmiştir
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Merhaba Dünya!'
  }
};

Bu nesneler React elementleri olarak adlandırılır. Bunları, ekranda görmek istediğiniz şeyin açıklaması olarak düşünebilirsiniz. React bu nesneleri okur, onları DOM’u oluşturmak ve güncel tutmak için kullanır.

Sıradaki Eğitim: Elementleri Render Etmek