İfade Slotları

• JSX içinde açılış/kapanış etiketleri arasında koyduğumuz içerik, statik bir dize (string) olarak kabul edilir. Eğer bir değişken referans etmeye çalışırsak, değişkenin kendisi yazdırılır; yani, değişkenin değeri değil, ismi görüntülenir.
• Süslü parantezler ({}) kullanarak ifade slotları oluşturabiliriz. Süslü parantezler arasına koyulan her şey, dize yerine saf JavaScript olarak değerlendirilir.
• JSX kullanımı ile ilgili çok fazla kural yoktur. Derleme işlemi sırasında yazdığımız JSX’in geçerli olup olmadığı bile kontrol edilmez. JSX sadece aracı görevi görür ve içeriği saf JavaScript çıktısına iletir.
• JSX, React.createElement() fonksiyon çağrılarına dönüştüğü için bu slotlara bir ifade koymalıyız, deyim değil. Bu yüzden bu slotta bir JavaScript deyimi yazmaya çalışırsak bir sözdizimi hatası alırız.

Deyim (statements) ve ifadeler (expressions) arasındaki farkı daha iyi anlamak için JavaScript Temelleri modülündeki "Deyim vs. İfadeler" dersine bakabilirsin.

import React from 'react';
import { createRoot } from 'react-dom/client';

const alisverisListesi = ['elma', 'muz', 'havuç'];

// Bu kod...
const element = (
  <div>
    Alınacak ürün sayısı: {alisverisListesi.length}
  </div>
);

// şu koda eşdeğerdir:
const derlenmisElement = React.createElement(
  'div',
  {},
  'Alınacak ürün sayısı: ',
  alisverisListesi.length
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

JSX'te Yorumlar

JSX'e yorum eklemek için ifade slotlarını kullanabiliriz:

const element = (
  <div>
    {/* Bir yorum! */}
  </div>
);

Tek satırlık yorum yerine çok satırlı yorum (/* */) kullanmamız gerekir. Çünkü tek satırlık yorum (//), ifadenin kapanış süslü parantezini de yorum satırı yapar ve bu nedenle hata alırız.

Öznitelik İfade Slotları

Dinamik öznitelik değerleri için de aynı yöntemi kullanabiliriz!

const benzersizId = 'icerik-sarici';

const element = (
  <main id={benzersizId}>
    Merhaba Dünya
  </main>
);

Yukarıda gördüğümüz gibi, süslü parantezler () kullanarak bir ifade slotu oluşturabiliyoruz. Bu kez, id özniteliğinin değeri için bir slot oluşturuyoruz. Derlendiğinde şu hale gelir:

const element = React.createElement(
  'main',
  {
    id: benzersizId,
  },
  'Merhaba Dünya'
);

Karşılaştırmak adına, ifade slotu olmadan, id değerinin sabit olduğu durumda nasıl göründüğüne bakalım:

const element = (
  <main id="icerik-sarici">
    Merhaba Dünya
  </main>
);

const derlenmisElement = React.createElement(
  'main',
  {
    id: "icerik-sarici",
  },
  'Merhaba Dünya'
);

Öznitelik ifade slotlarını değerlerin dinamik olması gerektiğinde kullanabiliriz. Sadece değişkenler değil, herhangi bir geçerli JavaScript ifadesini burada kullanabiliriz:

const kullaniciEmail = 'sumeet@buyuk.com';

const element = (
  <main id={kullaniciEmail.replace('@', '-')}>
    Merhaba Dünya
  </main>
);

// Bu şekilde derlenecektir:
const derlenmisElement = React.createElement(
  'main',
  {
    id: kullaniciEmail.replace('@', '-'),
  },
  'Merhaba Dünya'
);

JSX kodu derlediğimizde, kodun değerlendirilmediğini unutmayalım. Örneğin, kullaniciEmail değişkenindeki @ karakterini - ile değiştirecek bir mantık yazdık ve bu işlem kullaniciEmail ifadesini "sumeet-buyuk.com" yapacak, ancak bu sadece kodu çalıştırdığımızda gerçekleşir.

Tür Dönüşümü

Çalışma zamanı sırasında React, ifade slotlarında öznitelik sağlarken gereken tür dönüşümlerini otomatik olarak yapar.

// Bu çalışır:
<input required="true" />

// Bu da çalışır!
<input required={true} />

İlk örnekte, required özniteliğini "true" stringine eşitliyoruz. İkinci örnekte ise bu öznitelik boolean true değerine eşitlenmiş durumda. HTML'de tüm değerlerin string olması gerektiğinden, boolean true değeri "true" stringine dönüştürülür.

Benzer şekilde, sayısal öznitelikler için hem sayı hem de string değerler geçerli olabilir:

// ✅ Geçerli
<input type="range" min="1" max="20" />

// ✅ Geçerli
<input type="range" min={1} max={20} />

Boolean Öznitelikler

HTML'de bir özniteliği true olarak ayarlamak için sadece öznitelik adını belirtmek yeterlidir:

<input required />

JSX'te de bu aynı şekilde uygulanabilir; aşağıdaki iki element birbirine denktir:

<input required />
<input required={true} />

Çoğu yazılımcı daha açık olmayı tercih ediyor ve required= olarak yazmaktadır.

Bunun nedenini anlamak için, JavaScript'te yalnızca anahtar sağlandığında bunun ne anlama geldiğini düşünmeye değer.

const isim = 'Karabas';
const kopek = { isim };

console.log(kopek);
// → { isim: 'Karabas' }

JavaScript nesnelerinde { isim }, { isim: isim } ifadesine eşittir, { isim: true } değil.

JSX, HTML ve JS arasında biraz hibrit bir yapıya sahip olduğu için bu durum yeni geliştiriciler için kafa karıştırıcı olabiliyor. JSX'e HTML perspektifinden bakarsanız değerin true olmasını beklersiniz, ancak JavaScript açısından bakarsanız değerin anahtara eşit olmasını beklersiniz.