“JSX” Nedir?

Lafı hiç uzatmadan direkt React ile yazılmış örnek bir kod göstermek istiyorum:

const h1 = <h1>Hello world</h1>;

Bu koda şöyle bir göz attığınızda, muhtemelen içinizden şunu geçirmişsinizdir: const ve ; ifadelerini görünce “Bu JavaScript, kesin!” diye düşünmüşsünüzdür. Ama gözünüz hemen ardından <h1>Hello world</h1> kısmına kaydığında, “Hımm, burası HTML gibi ama…?” demiş olabilirsiniz. İşin ilginç yanı, merak edip bu kodu alıp bir HTML dosyasına yapıştırırsanız çalışmayacağı; JavaScript dosyasına koysanız da hata alacağınızdır. Peki, bu kod neyin nesi?

Bunun adı JSX. Açılımı JavaScript XML. Kendisi React ekosisteminde kullanılan özel bir sözdizimidir. HTML gibi yazılsa da aslında JavaScript’in içinde çalışıyor. Ancak diğer JavaScript kodları gibi olmadığından tarayıcıda doğrudan çalışmaz. Dolayısıyla JSX kodlarının önce derlenmesi (transpile edilmesi) gerekiyor. Yukarıdaki kodumuz üzerinden bunun nasıl yapıldığını inceleyelim:

const h1 = <h1>Hello world</h1>;

JSX ile yazdığınız yukarıdaki gibi bir kod arka planda şuna dönüşmektedir:

const h1 = React.createElement("h1", null, "Hello world");

Bu dönüşüm için genelde Babel gibi araçlar kullanılıyor. Yani JSX, aslında bizim için işleri kolaylaştıran bir tür şekerlemedir (syntactic sugar) diyebilirim.

Özetle JSX, JavaScript’in kendi sözdizimine bir eklenti olarak tasarlanmıştır. Bu şu anlama gelir:

• Tarayıcılar JSX’i anlamaz ve çalıştırmaz.
• Eğer bir JavaScript dosyasında JSX kullanıyorsanız bu dosyanın önce bir derleyiciden (compiler) geçmesi gerekir.
• JSX’in HTML gibi gözükmesi tamamen bir tasarım kararıdır. Bunun arkasındaki amaç ise geliştiricilerin alışık oldukları HTML sözdizimini kullanarak hızlı adapte olmalarını sağlamaktır.

JSX’in en temel yapı taşı JSX elementidir. Yani yukarıdaki örneğimizde gördüğünüz şu kısımdır kendisi:

<h1>Hello world</h1>

HTML gibi görünse de, JSX elementleri JavaScript dosyalarında yer alır. React, bu yapıyla kullanıcı arayüzlerini tanımlamayı daha sezgisel hale getirir. Kod tarayıcıda çalışmadan önce JavaScript’e dönüştürülerek işler hale gelir. React projelerinin temelini JSX elementleri oluşturur.

JSX elementleri, JavaScript ifadeleri gibi davranır ve JavaScript ifadelerinin kullanılabileceği her yerde yer alabilir. Yani bu demektir ki, bir JSX elementi değişkende saklanabilir, fonksiyona parametre olarak gönderilebilir ya da bir nesne veya dizi içinde tutulabilir. Esneklikleri sayesinde projelerde çok yönlü bir şekilde kullanılabilirler. Örnekler üzerinden gösterelim:

Bir JSX elementi bir değişkene atanabilir:

const header = <header>Merhaba, ben bir başlık elemanıyım!</header>;

JSX elementleri bir nesne içinde düzenlenebilir ve farklı alanlara atanabilir:

const futbolTakımı = {
  forvet: <li>Barış Alper Yılmaz</li>,
  ortaSaha: <li>Hakan Çalhanoğlu</li>,
  defans: <li>Abdülkerim Bardakçı</li>,
  kaleci: <li>Mert Günok</li>
};

JSX’in JavaScript ifadeleri gibi çalışması, React projelerinde esneklik ve dinamiklik sağlar. Tasarımları kodun farklı bölümlerine taşıyabilir, bileşenleri daha modüler hale getirebilirsiniz. JSX elementlerini bir değişkende veya nesnede saklayarak düzenli ve okunabilir bir yapı oluşturmak mümkün hale gelir.

Self-Closing Tags

HTML’de çoğu etiket bir açılış ve bir kapanış etiketi kullanır:

<div>Bu bir div etiketi</div>

Ancak, bazı etiketler yalnızca tek bir etiketten oluşur ve kapanış etiketi gerektirmez. Örneğin:

<img src="resim.jpg" alt="Bir resim">
<input type="text">

Bu etiketler kendi kendini kapatan etiketlerdir (self-closing tags).

HTML’de, kendi kendini kapatan etiketlerde kapanış eğik çizgisi (/) isteğe bağlıdır:

<br> <!-- Sorunsuz çalışır -->
<br /> <!-- Bu da çalışır -->

Ancak JSX’te kapanış eğik çizgisi zorunludur. JSX, kendi kendini kapatan bir etiketi şu şekilde kabul eder:

<br /> // JSX'te doğru kullanım

Eğer kapanış eğik çizgisini unutursanız, hata alırsınız:

<br> // JSX'te HATA verir!

Eğik çizginin zorunlu olması, hangi etiketlerin açık (nested) hangi etiketlerin kapalı olduğunu netleştirir ve hataları önler. Son bir örnek yapalım:

// Doğru kullanım:
const gorsel = <img src="gorsel.jpg" alt="Açıklama" />;
const bosluk = <br />;
const girdi = <input type="text" />;

// Yanlış kullanım (hata alırsınız):
const gorsel = <img src="gorsel.jpg" alt="Açıklama">;
const bosluk = <br>;
const girdi = <input type="text">;

“JSX”te Özellikler (Attributes)

JSX elementleri, tıpkı HTML elementleri gibi özelliklere (attributes) sahip olabilir. Bu özellikler, elementlerin davranışını ve görünümünü kontrol etmek için kullanılır.

Bir JSX özelliği, HTML’deki gibi bir isim, ardından bir eşittir işareti ve bir değer ile yazılır. Değer genellikle çift tırnak içinde belirtilir:

attributeName="attributeValue"

Örnekler üzerinden gidelim; aşağıdaki gibi basit bir bağlantı etiketi örneğini yazabiliriz:

<a href="www.example.com">Sitemize Hoş Geldiniz!</a>

Bir JSX elementine birden fazla özellik eklenebilir. Mesela aşağıdaki gibi bir resim etiketinde bunu gösterebiliriz:

const kediResmi = <img src="images/kedi.jpg" alt="Sevimli bir kedi" width="400px" height="300px" />;

Başka bir örnekle, bir başlık elementini şu şekil kullanabiliriz:

const baslik = <h1 id="anaBaslik">React'e Giriş</h1>;

Salt yukarıdaki örneklerimizden yola çıkarak kısa bir özet çekersek eğer şunu diyebiliriz; JSX’te özellikler, elementlerinizi daha anlamlı ve işlevsel hale getirir. Yani:

• src özelliğiyle bir görselin kaynağını belirtebilirsiniz.
• alt özelliğiyle görseller için açıklama ekleyerek erişilebilirliği artırabilirsiniz.
• id özelliğiyle elementlere özel kimlikler atayarak onları hedefleyebilirsiniz.

Bu özellikler, JSX elementlerini yapılandırmanın temel yollarından biridir ve kullanıcı arayüzünü daha etkili bir şekilde kontrol etmenizi sağlar.

❗️ JSX’te class özelliği, elementlerinize CSS stilleri eklemek için kullanılır. Ancak, JavaScript’te class kelimesi bir anahtar kelime olduğu için JSX’te bu özellik className olarak adlandırılmıştır.

Bir JSX elementine CSS sınıfları eklemek için className özelliğini kullanabilirsiniz. Tıpkı HTML’de olduğu gibi, bir sınıf adı (ya da birden fazla sınıf adı) çift tırnak içinde belirtilir:

const paragraf = <p className="bilgilendirme">Bu bir bilgilendirme mesajıdır.</p>;

“JSX”te İç İçe Yapılar (Nested JSX)

JSX, tıpkı HTML gibi, elementlerin iç içe (nested) yerleştirilebilmesine olanak tanır. Yani bir JSX elementi, başka bir JSX elementinin içinde yer alabilir ve bu şekilde daha kompleks yapılar oluşturabiliriz.

Örnek üzerinden anlaşılır kılmak adına bir <h1> elementinin, bir <a> elementi içinde nasıl kullanılacağına bakalım:

<a href="https://www.example.com"><h1>Hemen Tıkla!</h1></a>

Kodun daha düzenli ve okunabilir olması adına HTML tarzı satır sonları ve girinti kullanılabilir. Bakınız:

<a href="https://www.example.com">
  <h1>Hemen Tıkla!</h1>
</a>

Eğer bir JSX ifadesi birden fazla satıra yayılıyorsa bu ifadeyi parantez içine almanız gerekir. İlk başta alışmak garip gelebilir ancak zamanla bu yapının avantajını kavrayacaksınız:

(
  <div>
    <h2>React ile Kolaylık</h2>
    <p>Kullanıcı arayüzünüzü düzenlemek artık daha kolay!</p>
  </div>
)

İç İçe “JSX”i Değişkenlerde Saklamak

İç içe yerleştirilmiş JSX ifadeleri pekala bir değişkende saklanabilir, bir fonksiyona parametre olarak aktarılabilir veya diğer JSX ifadeleriyle birleştirilebilir.

const bilgiKartı = (
  <div>
    <h3>Bilgi Kartı</h3>
    <p>React öğrenmek eğlenceli ve öğretici!</p>
  </div>
);

İç içe JSX kullanmak, kullanıcı arayüzlerini hiyerarşik bir yapıda düzenlemeyi sağlar. Bu yöntem, hem kodun okunabilirliğini artırır hem de daha karmaşık yapılar oluşturmayı kolaylaştırır. Sanırım neden React kullanıyoruz sorusuna verdiğimiz cevap iyice anlaşılır olmaya başladı.

“JSX” İfadelerinde Tek Dış Katman Kuralı

React’te JSX kodlarımızı yazarken dikkat edilmesi gereken önemli bir kural vardır: Her JSX ifadesinin yalnızca “bir“ dış katman elementi olmalıdır. Örnek üzerinden kuralımızın ne anlattığını inceleyelim:

const liste = (
    <ul>
      <li>Elma</li>
      <li>Armut</li>
    </ul>
);

Yukarıdaki örneğimiz JSX ifadesinde tüm içerik, tek bir dış katman elementi ile sarılmadığı için çalışmayacaktır. Çalışması için div gibi bir dış katman elementi eklemeliyiz. Bakınız:

const liste = (
  <div>
    <ul>
      <li>Elma</li>
      <li>Armut</li>
    </ul>
  </div>
);

Kodumuz bu sefer çalışacaktır çünkü <div> elementi, JSX ifadesinin tamamını kapsayan bir dış katman olarak görev yapmaktadır.

Eğer bir JSX ifadesinde birden fazla dış katman elementi bulunursa da çalışmayacaktır. Bakınız:

const liste = (
  <ul>
    <li>Elma</li>
  </ul>
  <ul>
    <li>Armut</li>
  </ul>
);

Kodumuz, iki ayrı <ul> elementi içerdiği için çalışmamaktadır. React, bir JSX ifadesinin yalnızca bir dış katman elementiyle başlamasını ve bitmesini bekler. Bu hatayı çözmek için elementleri bir kapsayıcı içerisine almak yeterlidir. Genelde bu kapsayıcı <div> olmaktadır:

const liste = (
  <div>
    <ul>
      <li>Elma</li>
    </ul>
    <ul>
      <li>Armut</li>
    </ul>
  </div>
);

Bu kural, React’in JSX ifadelerini düzgün bir şekilde ayrıştırmasını sağlar. Dış katman olmadan, React hangi elementin ifade sınırını belirlediğini bilemez ve bu da haliyle hatalara yol açar.

Eğer fazladan bir <div> eklemek istemiyorsanız Fragment adlı yapıyı kullanabilirsiniz. Bakınız:

const liste = (
  <>
    <ul>
      <li>Elma</li>
    </ul>
    <ul>
      <li>Armut</li>
    </ul>
  </>
);

Fragment, görünmez bir kapsayıcı görevi görerek JSX ifadelerini düzenli tutmamızı sağlar.

“React”te “JSX” Nasıl Görüntülenir?

JSX elementlerini yazmayı öğrendiniz, şimdi onları ekranda nasıl görüntüleyeceğinizi öğrenme zamanı. React, içerikleri ekranda göstermek için iki şeye ihtiyaç duyar: Hangi içeriğin görüntüleneceği ve içeriğin nereye yerleştirileceği.

Bu süreçte örnek React kodumuzu yazıp adım adım inceleyelim:

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

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<h1>Merhaba Dünya!</h1>);

1. İçeriğin Yerleştirileceği Alanı Belirlemek

İlk satırı inceleyelim:

const container = document.getElementById('root');

• document nesnesi, web sayfanızı temsil eder.
• getElementById('root') metodu, HTML’de id değeri “root” olan elementi bulur.
• Bu element, React’in içeriği yerleştireceği alandır ve container değişkeninde saklanır.

Kodun çalışması için HTML dökümanımızda şu gibi bir kod yazmalıyız:

<div id="root"></div>

2. “React Root” Oluşturmak

Sonraki satırı inceleyelim:

const root = createRoot(container);

• createRoot() fonksiyonu, React’in react-dom/client kütüphanesinden gelir.
• Bu fonksiyon, belirttiğimiz container üzerinde bir React root’u oluşturur ve root değişkeninde saklar.
• Evet, tam da bu nokta, “içeriği nereye yerleştireceğiz?” sorusunun yanıtıdır.

3. “JSX”i Görüntülemek

Son olarak:

root.render(<h1>Merhaba Dünya!</h1>);

• render() metodu, root üzerinde çalışır ve içine verilen JSX içeriğini ekrana yerleştirir.
• Burada, <h1> elementi “Merhaba Dünya!” metnini içerir ve tarayıcıda görüntülenir.

React ile JSX görüntülemek için yapılan tüm bu işlemi şu şekilde özetleyebiliriz:

1. Yer Belirleme
   Bir HTML elementi seçilir ve React’in içeriği buraya yerleştirmesi sağlanır.
2. Root Oluşturma
   React, seçilen alan üzerinde bir root oluşturur.
3. İçerik Render Etme
   JSX ifadesi, render() metodu ile bu root’a yerleştirilir ve ekranda görünür hale gelir.

“JSX” İfadesini Değişkende Saklamak

React ile içerik render etmek için genelde JSX ifadelerini doğrudan render() metoduna geçiririz. Ancak, render() metodunun argümanı sadece JSX olmak zorunda değil. Eğer bir değişken JSX ifadesine değerlendiriliyorsa onu da render() metoduna geçirebiliriz.

Örneğin, bir yapılacaklar listesi (to-do list) oluşturup bunu bir değişkende saklayalım:

const yapilacaklarListesi = (
  <ul>
    <li>React öğren</li>
    <li>Web projeleri geliştir</li>
  </ul>
);

Yukarıdaki kodumuzda bir ul elementi ve içinde iki li öğesi var. Tüm bu yapı yapilacaklarListesi adlı değişkende saklanıyor. Bu değişkeni artık render() metoduna geçirerek ekranda görüntüleyebiliriz:

const container = document.getElementById('root');
const root = createRoot(container);
root.render(yapilacaklarListesi);

Bu şekilde bir yaklaşımın bize bazı avantajları vardır:

• Kodunuzu Daha Okunabilir Hale Getirir
  JSX ifadelerini ayrı bir değişkende saklamak, uzun ve karmaşık yapıları daha düzenli bir şekilde yönetmenizi sağlar.
• Yeniden Kullanılabilirlik Sağlar
  Aynı JSX ifadesini birden fazla yerde kullanmanız gerektiğinde, sadece değişkeni kullanmanız yeterlidir.
• Daha Temiz Bir Yapı Sunar
  render() metodu içinde uzun JSX ifadeleri yazmak yerine değişken kullanarak kodunuzu sadeleştirebilirsiniz.

“JSX” İçinde “JavaScript” Kullanımı

JSX, JavaScript ile HTML’in bir araya geldiği güçlü bir yapıdır. Ancak, JSX içinde JavaScript kodlarını nasıl kullanabileceğimizi bilmek, React projelerinde dinamik ve etkileşimli içerikler oluşturmanın anahtarıdır.

JSX içinde matematiksel işlemler veya diğer JavaScript ifadeleri yazmak için {} (küme parantezleri) kullanılır. Aksi takdirde, JSX bu ifadeleri düz metin olarak işler.

root.render(<h1>{2 + 3}</h1>); // Çıktı: 5
root.render(<h1>2 + 3</h1>);   // Çıktı: "2 + 3" (metin olarak)

JSX içinde, JavaScript değişkenlerine de pekala {} kullanarak erişebilirsiniz.

const isim = "John";  
const selamlama = <p>Merhaba, {isim}!</p>;  
root.render(selamlama); // Çıktı: "Merhaba, John!"

Değişkenler, JSX özelliklerini dinamik olarak ayarlamak için de kullanılabilir. Bakınız:

const boyut = "300px";  
const resim = (
  <img 
    src="images/kedi.jpg" 
    alt="Kedi Resmi" 
    width={boyut} 
    height={boyut} 
  />
);
root.render(resim);

JavaScript nesneleri, JSX elementlerinin özelliklerini düzenlemek için sıklıkla kullanılır.

const resimler = {
  kedi: "http://bit.ly/3rXzH2j",
  köpek: "http://bit.ly/3uY6TlB"
};  

const kediResmi = <img src={resimler.kedi} alt="Sevimli Kedi" />;
const köpekResmi = <img src={resimler.köpek} alt="Şirin Köpek" />;
root.render(
  <div>
    {kediResmi}
    {köpekResmi}
  </div>
);

“JSX”te “Event Listener” Kullanımı

React’te olay dinleyicileri (event listeners), JSX elementlerine özel özellikler olarak eklenir.

function butonaTikla() {
  alert("Butona tıkladınız!");
}

const buton = <button onClick={butonaTikla}>Tıkla!</button>;
root.render(buton);

• HTML: onclick, onmouseover (küçük harf)
• JSX: onClick, onMouseOver (camelCase)

JSX Koşulları: Çalışmayan ve Çalışan Yöntemler

JSX içinde JavaScript kullanmak mümkündür ancak dikkat edilmesi gereken bazı kurallar vardır. Örneğin, JSX içine doğrudan bir if ifadesi yerleştiremezsiniz. Bu kural başlangıçta sınırlayıcı gibi görünse de, React projelerinde koşulları ifade etmek için birçok farklı yöntem bulunur.

Şu kodu düşünelim:

(
  <h1>
    {
      if (siparis.tamamlandi) {
        'Siparişiniz için teşekkür ederiz!'
      }
    }
  </h1>
)

Bu kod çalışmaz çünkü JSX içinde if gibi bir kontrol ifadesini doğrudan kullanmaya izin verilmez. JSX, ifadeleri işlerken if anahtar kelimesini tanımaz ve hata alırsınız.

“Eee, koşul ifadeleri olmadan ne anlamı kalıyor?” diye yakınabilirsiniz ama merak etmeyin JSX içinde doğrudan if kullanamasak da, onu JSX dışında tanımlayarak kullanabiliriz. Örneğin:

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

const container = document.getElementById('app');
const root = createRoot(container);

let mesaj;

if (kullanici.yas >= 18) {
  mesaj = (
    <h1>Bir yetişkin gibi davranma zamanı!</h1>
  );
} else {
  mesaj = (
    <h1>Çocukluğun tadını çıkar!</h1>
  );
}

root.render(mesaj);

Bu yaklaşımda:

1. Koşul ifadesi (if-else), JSX dışında tanımlanır.
2. JSX ifadesi, bir değişkene atanır.
3. Değişken render() metodu ile ekrana render edilir.

Bir örnek daha yapalım ki iyice pekişsin:

const kullanici = { yas: 16 };

let onerilenUrun;

if (kullanici.yas >= 18) {
  onerilenUrun = (
    <p>Yetişkinler için özel koleksiyonumuza göz atın!</p>
  );
} else {
  onerilenUrun = (
    <p>Gençlere özel indirimli ürünlerimizi kaçırmayın!</p>
  );
}

root.render(
  <div>
    {onerilenUrun}
  </div>
);

Üçlü Operatör (Ternary Operator) ile Koşul

React projelerinde koşulları ifade etmenin bir diğer yolu, üçlü operatör (ternary operator) kullanmaktır. Üçlü operatör, hem kompakt hem de okunabilir bir yapıya sahiptir ve JSX ifadelerinde sıkça kullanılır. Sözdizimi şu şekildedir:

koşul ? doğruysaYapılacak : yanlışsaYapılacak;

• koşul: Değerlendirilecek bir ifade.
• Eğer koşul doğruysa (truthy), doğruysaYapılacak kısmı çalışır.
• Eğer koşul yanlışsa (falsy), yanlışsaYapılacak kısmı çalışır.

Örnek üzerinden gösterelim:

const mesaj = (
  <h1>{kullanici.yas >= 18 ? 'Yetişkinlere Özel İndirimler' : 'Gençlere Özel Fırsatlar'}</h1>
);

• kullanici.yas >= 18 koşulu değerlendirilir.
• Eğer kullanıcı 18 yaşında veya daha büyükse, mesaj: “Yetişkinlere Özel İndirimler” olur.
• Aksi takdirde, mesaj: “Gençlere Özel Fırsatlar” olur.

JSX Koşulları: && Operatörü ile Koşullu Render

React’te koşulları ifade etmenin bir diğer pratik yolu, && operatörünü kullanmaktır. && operatörü, özellikle bir koşul doğru olduğunda bir işlem yapmak, aksi durumda ise hiçbir şey yapmamak istediğiniz durumlarda idealdir.

JavaScript’te && şu şekilde çalışır:

• Eğer sol taraftaki ifade doğru (truthy) ise, sağ taraftaki ifade değerlendirilir ve sonuç döner.
• Eğer sol taraftaki ifade yanlış (falsy) ise, sağ taraf tamamen yok sayılır.

Örnek üzerinden gösterelim:

const yas = 22;

const menü = (
  <ul>
    <li>Elma</li>
    {yas >= 18 && <li>Şarap</li>}
    {yas >= 21 && <li>Kokteyl</li>}
    {yas >= 25 && <li>Viski</li>}
  </ul>
);

root.render(menü);

Burada yaşa göre belirli öğeler eklenir. Örneğin:

• Eğer yas >= 18 doğruysa, “Şarap” eklenir.
• Eğer yas < 18 ise, hiçbir şey eklenmez.

React ve .map()

React projelerinde, bir dizi elemanını listelemek istediğinizde .map() metodu en etkili yöntemlerden biridir. Bu metot, bir dizi üzerinde çalışarak her bir elemanı dönüştürür ve bu elemanlardan yeni bir dizi oluşturur. JSX ile birlikte kullanıldığında, dinamik ve düzenli listeler oluşturmanın en hızlı yoludur.

JSX içinde listeleme için her zaman bir dizi kullanmak zorunda değilsiniz. Sabit elemanlar doğrudan da yazılabilir:

Bir örnek üzerinden ikisi arasındaki farkı inceleyelim:

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

const container = document.getElementById("app");
const root = createRoot(container);

// Sabit elemanlar ile listeleme (Doğrudan JSX içinde)
const sabitListe = (
  <ul>
    <li>Anasayfa</li>
    <li>Hakkımızda</li>
    <li>İletişim</li>
  </ul>
);

// Dinamik listeleme (.map() kullanarak)
const dinamikDizi = ["Laptop", "Telefon", "Tablet"];
const dinamikListe = dinamikDizi.map(eleman => <li>{eleman}</li>);

// Her iki yöntemi bir arada render etme
root.render(
  <div>
    {/* Sabit liste */}
    <h2>Sabit Menü</h2>
    {sabitListe}

    {/* Dinamik liste */}
    <h2>Ürünler</h2>
    <ul>{dinamikListe}</ul>
  </div>
);

Bu kodun işleyişi şu şekilde olacaktır:

• Sabit Liste: sabitListe değişkeni içinde doğrudan JSX ile sabit elemanlar oluşturuldu. Liste, her zaman aynı içeriklere sahip olacak.
• Dinamik Liste: dinamikDizi adlı bir dizideki elemanlar, .map() metodu kullanılarak <li> etiketlerine dönüştürüldü ve dinamik olarak ekrana yansıtıldı.
• Birlikte Kullanım: Her iki liste de tek bir render() çağrısı ile bir arada gösterildi.

Keys

React’te listeler oluştururken, bazı durumlarda “key” adlı bir özelliği kullanmanız gerekebilir. Kendisi, React’in listeler üzerinde düzeni ve performansı korumasına yardımcı olan bir JSX özelliğidir.

Key Nedir?

“Key” denilen şey, her bir liste elemanına özel ve benzersiz bir kimlik sağlayan bir özelliktir. HTML’deki id özelliğine benzer ancak “key”ler yalnızca React tarafından kullanılır. Örneğin:

<ul>
  <li key="urun-01">Telefon</li>
  <li key="urun-02">Laptop</li>
  <li key="urun-03">Tablet</li>
</ul>

Bu kodda her liste elemanına bir key atanmıştır. Ancak “key”ler ekranda görünmez ve kullanıcı tarafından fark edilmez.

• Hafıza Yönetimi
  Örneğin, bir yapılacaklar listesi (to-do list) uygulamasında, her eleman kendi durumunu (tamamlanmış ya da tamamlanmamış) hatırlamalıdır. “Key” olmadan bu durumlar karışabilir.
• Sıra Takibi
  Eğer liste elemanlarının sırası değişebilecekse (örneğin bir sıralama ya da arama sonucu listesi), “key” kullanmak React’in elemanları doğru bir şekilde yeniden düzenlemesini sağlar.

Bir başka örnekle iyice pekiştirelim:

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

// HTML'deki render edilecek alanı seçiyoruz
const container = document.getElementById("app");
const root = createRoot(container);

// Dinamik bir liste verisi
const hayvanlar = ["Kedi", "Köpek", "Kuş"];

// .map() metodu ile her hayvanı bir <li> etiketi haline getiriyoruz
// Her elemana benzersiz bir key atıyoruz
const hayvanListesi = hayvanlar.map((hayvan, index) => (
  <li key={"hayvan_" + index}>{hayvan}</li>
));

// Listeyi ekrana render ediyoruz
root.render(<ul>{hayvanListesi}</ul>);

Devamındaki konu olan “Sanal DOM” (Virtual DOM) anlatımını ise yazı fazla uzamasın diye başka bir yazıda yazıyorum.