Kısım II · İnşaat · Bölüm 31

Framework'ler, React ve Bileşenler

Ekranı elle değil, durumdan çizmek (Frameworks, React, components)

1. Kat 10Bizim uygulamamızSoru kartı, puan rozeti, leaderboard: kodlarının düzeni burada kurulur.
2. Kat 9Web ve tarayıcı: HTML, CSS, JavaScriptReact bir JavaScript kütüphanesidir; sonunda DOM'a yazar. Bölüm 20, 23–26.
3. Kat 8Ağ ve internetBölüm 19–20.
4. Kat 7İşletim sistemiBölüm 13–18.
5. Kat 6Gömülü yazılım ve açılışBölüm 12.
6. Kat 5Programlama dilleri ve derleyiciJSX'i araç zinciri JavaScript'e çevirir. Bölüm 21, 25, 29.
7. Kat 4Makine dili ve assemblyBölüm 7.
8. Kat 3İşlemci ve bellekBölüm 6, 8.
9. Kat 2Devreler: hesap ve hafızaBölüm 4–5.
10. Kat 1Transistör ve mantık kapılarıBölüm 3.
11. Kat 0Elektrik ve bit (zemin)Bölüm 2.

Bu bölümün sonunda şunları bileceksin: kütüphane ile çerçevenin farkını (kontrolün tersine çevrilmesi; kütüphane burada Bölüm 9'daki derlenmiş kütüphane değil, tasarım anlamında); bileşen, özellik ve durumun ne olduğunu; JSX'in HTML olmadığını; "yeniden çizim" ile "DOM'un güncellenmesi" farkını; useState ve useEffect'in ne zaman çalıştığını; yönlendirmenin neden React'in çekirdeğinde olmadığını. Bir agent sana React kodu gösterdiğinde hangi satırın "çizme", hangisinin "olay", hangisinin "etki" olduğunu ayırabilmek hedef. Bölümdeki kodları gerçekten çalıştırdım (React 19.3.1, Node 22, jsdom adlı DOM benzetimi); çıktılar olduğu gibi duruyor.

31.1 Kütüphane ile çerçeve; kontrolün tersine çevrilmesi

Önce sorun. Bölüm 26'daki yöntemi bizim uygulamaya uygulayalım. Aşağıdaki, prototipinden değil kafadan yazılmış bir taslak (prototipin içini görmedik); yalnızca yapıyı gösteriyor:

function cevapVerildi(dogruMu) {
  if (dogruMu) {
    puan += puanHesapla(true, seri);
    seri += 1;
  } else {
    seri = 0;
    can -= 1;
  }
  puanEl.textContent = puan;
  seriEl.textContent = seri;
  canEl.textContent = can;
  ilerlemeEl.style.width = ilerleme + "%";
}

Önce değişkenler güncelleniyor, sonra her gösterge için DOM'daki karşılığı elle yazılıyor. Dört gösterge ve üç olay (doğru, yanlış, bölüm değişimi) varsa en fazla 4 × 3 = 12 hücrelik bir "hangi olay hangi göstergeyi günceller" tablosunu akılda tutman gerekir; unutulan her hücre ekranda eski bilgi demektir. React belgesi bunu şöyle söyler: elle yönetim yalıtılmış örneklerde yeter, ama karmaşık sistemlerde üstel olarak zorlaşır; yeni bir öğe, hata sokmadığından emin olmak için mevcut kodun tamamını kontrol etmeyi gerektirir.⁶ React bu soruna cevap olarak yapıldı.

Kütüphane: sen çağırırsın. Çerçeve: o çağırır.

Martin Fowler'ın tanımı kısadır. Kütüphane (library) çağırabileceğin bir fonksiyonlar kümesidir; her çağrı bir iş yapar ve kontrolü çağırana geri verir.²⁰ [3, 1, 2].sort() yazdığında akış sendedir. Çerçeve (framework) ise soyut bir tasarımı içinde taşır; sen kendi kodunu onun belirli noktalarına takarsın ve çerçeve o noktalarda kodunu çağırır.²⁰ Fowler buna kontrolün tersine çevrilmesi (inversion of control) der ve "Hollywood ilkesi"ni aktarır: "Bizi arama, biz seni ararız."²⁰ Çıplak halini küçük bir oyuncak çerçevede görelim (kendi yazdığım, çalıştırdığım kod):

const kayitli = [];

function olayDinle(ad, fonksiyon) {
  kayitli.push({ ad, fonksiyon });
}

function anaDongu(olay) {
  for (const k of kayitli) {
    if (k.ad === olay) k.fonksiyon();
  }
}

olayDinle("tikla", () => console.log("Gönder'e basıldı"));
anaDongu("tikla");
console.log([3, 1, 2].sort().join(","));

kayitli bir liste; olayDinle ad ile fonksiyonu listeye yazar (çalıştırmaz); anaDongu bir olay gelince adı uyan fonksiyonları kendisi çağırır. Çıktı: Gönder'e basıldı ve 1,2,3. Fonksiyonu başka bir fonksiyona değer gibi vermek, Bölüm 21'de fonksiyonel programlamada gördüğün "fonksiyonlar değer gibi dolaştırılabilir" fikridir: kontrolü çevirmek, çağırma işini sonra yapacak birine bir fonksiyon bırakmaktır. Hukuk benzetmesi: kanun kitabından istediğin maddeye bakmak kütüphane gibidir; duruşmada ise sırayı mahkeme belirler, sen söz sırası geldiğinde söyleyeceğin metni hazırlarsın. Çerçeve duruşma düzenidir.

React hangisi?

Dürüst cevap: sınırda. React'in belgesi onu açıkça "JavaScript kütüphanesi" diye adlandırır.³ Ama çizmede kontrol tersine çevrilmiştir: çizme "React'in bileşenlerini çağırması"dır;⁸ sen SoruKarti() yazmazsın, React çağırır. Olay işleyicileri de öyle. Öte yandan yönlendirme, veri çekme, derleme gibi kararları React vermez. Belgeler yeni projeye "çerçeveyle başlamayı" önerir; Next.js, React Router ve Expo'yu sayar, Expo'yu "gerçek yerel arayüzlü Android, iOS ve web uygulamaları yapan bir React çerçevesi" diye tarif eder.¹⁸ Derleme aracıyla sıfırdan başlamak ise "çoğu zaman kendi çerçeveni yazmak"tır; yönlendirme ve veri çekme için ek çözüm gelmez.¹⁹

Agent kod önerdiğinde sor: "bu çağrıyı ben mi yapıyorum, çerçeve mi çağıracak?" Cevap kodun ne zaman çalışacağını söyler; 31.4'te kancaların neden "hemen" değil "ekran güncellendikten sonra" çalıştığı buradan çıkar.

31.2 Bileşen, özellikler, durum; bildirimsel kullanıcı arayüzü

Bileşen

Bileşen (component), belgenin tanımıyla, kendi mantığı ve görünümü olan bir kullanıcı arayüzü parçasıdır; düğme kadar küçük, sayfa kadar büyük olabilir. React bileşenleri işaretleme döndüren JavaScript fonksiyonlarıdır ve adları büyük harfle başlar (küçük harfle başlayan HTML etiketidir).¹ Bileşenler iç içe geçip bir ağaç kurar.²⁵ Bölüm 23'teki DOM ağacıyla karıştırma: bileşen ağacı bizim kurduğumuz mantıksal parçalar, DOM sonunda çıkan HTML düğümleri. Her bileşen Bölüm 27'deki anlamıyla bir modüldür: bir dosya, bir export, dar bir arayüz ve içeride gizli ayrıntı.

SoruEkrani            (puan ve seri burada yaşar)
├── PuanRozeti
└── SoruKarti         (soru, şıklar, Gönder düğmesi)

Özellikler

Özellikler (props), bir JSX etiketine verdiğin bilgilerdir.⁴ Bileşen açısından fonksiyonun parametresidir (Bölüm 9); React hepsini tek nesne olarak verir, sen { soru, seri, onCevap } diye parçalarsın. İki kural: özellikler değiştirilemez; bileşen başka bir değer istiyorsa üst bileşenden yenisini göndermesini "ister".⁴ Ve bir fonksiyon da özellik olabilir: belgenin örneğinde Button bileşeni onClick adlı bir özellik alır ve tıklanınca React ona verilen fonksiyonu çağırır;²⁷ bizdeki onCevap aynı kalıptır (adı benim seçimim): çocuk üste "bir şey oldu" der. Böylece veri aşağı (özellikle), olay yukarı (fonksiyon çağrısıyla) akar; belge buna tek yönlü veri akışı der.²⁸

Durum

Bileşenin hatırlaması gereken şeyler var: seçili şık, puan. Sıradan yerel değişken yetmez; belge iki neden söyler: yerel değişken çizimler arasında kalıcı değildir (bileşen her seferinde baştan çağrılır) ve değişmesi React'e yeniden çizim gerektiğini bildirmez.⁷ Durum (state) bu iki işi yapar: değeri çizimler arasında saklar ve değişince yeniden çizimi tetikler. Bileşene yereldir: aynı bileşenin iki kopyasının durumu birbirinden bağımsızdır.⁷

Bildirimsel kullanıcı arayüzü

31.1'deki elle yazım buyurgan (imperative)dir: "şunu kapat, şunu göster." Belgenin benzetmesi: yanındaki sürücüye "şurada sağa dön" demek. Bildirimsel kullanıcı arayüzü (declarative UI) taksiye binip gideceğin yeri söylemektir.⁶ Yabancı fikir değil: Bölüm 21'de HTML ve SQL'i "ne istediğini söyle" diye bildirimsel programlama saymıştık. Sen her durum için ekranın nasıl görüneceğini yazarsın, durum değişince React ekranı o tarife uydurur: ekran, özellik ve durumun bir fonksiyonudur.

Belgenin önerdiği yol: önce görsel durumları say. Soru kartı: (1) şık seçilmedi (Gönder kapalı), (2) şık seçildi, (3) gönderildi, doğru, (4) gönderildi, yanlış; cevap sunucuya gidince bir de (5) "gönderiliyor".⁶ Sonra bunları en az değişkenle temsil et. Neden önemli, sayıyla (Python ile saydım): dört doğru/yanlış bayrak (seçildi, gönderiliyor, doğru, yanlış) 2⁴ = 16 birleşim verir, yalnızca 5'i anlamlıdır; 11 "imkânsız durum" (aynı anda hem doğru hem yanlış gibi) kodda yazılmasa bile bir yerden sızabilir. Belge bu yüzden birbirinden türetilebilen durumu ayrı tutmamayı öğütler.⁶ Aşağıdaki kodda yalnızca iki durum değişkeni var (secili, dogruMu); "kilitli" gibi gerisi bunlardan hesaplanır.

İlk bileşenimiz

Soru kartı, TypeScript ile (Bölüm 30). puanHesapla, Bölüm 27'deki fonksiyonun tipli halidir: (dogruMu: boolean, seri: number) => number.

import { useState } from "react";
import { puanHesapla } from "./puan";

type Soru = { id: number; metin: string; sikler: string[]; dogru: number };

type SoruKartiProps = {
  soru: Soru;
  seri: number;
  onCevap: (kazanilan: number) => void;
};

export function SoruKarti({ soru, seri, onCevap }: SoruKartiProps) {
  const [secili, setSecili] = useState<number | null>(null);
  const [dogruMu, setDogruMu] = useState<boolean | null>(null);
  const kilitli = dogruMu !== null;

  function gonder() {
    if (secili === null) return;
    const sonuc = secili === soru.dogru;
    setDogruMu(sonuc);
    onCevap(puanHesapla(sonuc, seri));
  }

  return (
    <section>
      <h2>{soru.metin}</h2>
      <ul>
        {soru.sikler.map((sik, i) => (
          <li key={sik}>
            <button disabled={kilitli} onClick={() => setSecili(i)}>
              {sik}{secili === i && " ✓"}
            </button>
          </li>
        ))}
      </ul>
      <button onClick={gonder} disabled={secili === null || kilitli}>Gönder</button>
      {dogruMu === true && <p>Doğru!</p>}
      {dogruMu === false && <p>Yanlış.</p>}
    </section>
  );
}

Satır satır: 1–2: kancayı ve puan fonksiyonunu modül olarak alıyoruz. 4: Soru tip takma adı, verinin şekli. 6–10: bileşenin "arayüzü" olan üç özellik; sonuncusu fonksiyon. 12: özellikleri parçalayarak alan, büyük harfle başlayan fonksiyon. 13–14: iki durum; useState<number | null>(null) "başlangıçta seçilmedi" demek. 15: kilitli durum değil, durumdan hesaplanan değer. 17–22: gonder olay işleyici; doğru mu diye bakar, durumu yazar, onCevap ile kazanılan puanı üste bildirir. 24–40: döndürülen JSX; && koşullu gösterim, map şıklardan düğme listesi (31.3).

import { useState } from "react";
import { SoruKarti } from "./SoruKarti";

const soru = {
  id: 1,
  metin: "Sözleşme hangi durumda kurulur?",
  sikler: ["Yalnızca yazılı olursa", "İcap ve kabul birleşince", "Noter onaylarsa"],
  dogru: 1,
};

export function SoruEkrani() {
  const [puan, setPuan] = useState(0);
  const [seri] = useState(7);

  return (
    <main>
      <p id="puan">Puan: {puan}</p>
      <SoruKarti soru={soru} seri={seri} onCevap={(k) => setPuan(puan + k)} />
    </main>
  );
}

puan burada yaşıyor, kartta değil. Belge: iki bileşenin aynı bilgiye ihtiyacı varsa durumu en yakın ortak üst bileşene taşı, aşağı özellik olarak ver (lifting state up); puanın tek bir sahibi olur.²⁶ İki dosyayı tsc ile strict kipte denetledim (hata yok) ve jsdom'da çalıştırdım: başta Puan: 0; ikinci şık seçilince "✓" çıktı ve Gönder açıldı; Gönder'den sonra Puan: 15 (seri 7, yani 10 + 5 bonus), Doğru! göründü, şıklar kilitlendi. Hiçbir yerde textContent yazmadık.

31.3 JSX; yeniden çizim (render ve commit)

JSX HTML değildir

JSX, JavaScript içine HTML benzeri işaretleme yazmaya yarayan sözdizimi uzantısıdır; React'ten ayrıdır.³ HTML'den farkları: bileşen tek kök döndürür (gerekirse <>...</> boş sarmalayıcıyla), etiketler kapatılır (<br />), class yerine className yazılır.³ Süslü parantez JavaScript'e kaçıştır: {soru.metin}.¹ Tarayıcı JSX'i anlamaz; Bölüm 29.3'teki dönüştürücü düz JavaScript'e çevirir. Küçük bir parçayı esbuild ile dönüştürdüm (Vite'ın iç aracı farklı olabilir, iş aynı):

// girdi (JSX)
function Kart({ soru, secili, onSec }) {
  return <li className="soru" onClick={() => onSec(soru.id)}>{soru.metin}{secili && <b> ✓</b>}</li>;
}

// çıktı (düz JavaScript; yorum işaretleri çıkarıldı)
import { jsx, jsxs } from "react/jsx-runtime";
function Kart({ soru, secili, onSec }) {
  return jsxs("li", { className: "soru", onClick: () => onSec(soru.id), children: [
    soru.metin,
    secili && jsx("b", { children: " ✓" })
  ] });
}

Her etiket bir fonksiyon çağrısı oldu; özellikler bir nesneye, içerik children özelliğine girdi. Eski adı createElement olan fonksiyonu çalıştırınca type: "h1", props: { className: "baslik", children: "Merhaba" } ve key: null alanlı bir nesne döndü.²⁴ Yani bileşenin döndürdüğü şey ne HTML ne DOM düğümü: ekranın tarifini taşıyan düz bir nesne. DOM'a çevirmek React'in sonraki işi.

Koşul için özel sözdizimi yoktur; if, ? :, && gibi sıradan JavaScript kullanılır.² Listede dizinin map'i kullanılır ve her öğeye key verilir: kardeşler arasında benzersiz, değişmeyen ve çizim sırasında üretilmeyen (Math.random() yanlış) bir değer; dizi sırasını anahtar yapmak, öğe eklenip silinince ince hatalara yol açar.²⁹ Masaüstündeki dosyalar adsız olsa "ikinci dosya" derdin; biri silinince "ikinci" başka dosya olurdu. Anahtar öğenin adıdır (yukarıdaki kodda şık metnini kullandık; aynı soruda iki şık aynı metni taşımaz varsayımıyla).

Yeniden çizim: tetikle, çiz, işle

Ekranda görünmek için React üç adım atar: tetikleme, çizme (render) ve DOM'a işleme (commit).⁸ Tetikleme ya ilk çizimdir ya da bir bileşenin (veya atasının) durumunun güncellenmesi. Çizme, belgenin deyişiyle "React'in bileşenlerini çağırması"dır ve çağrılan bileşen başka bileşen döndürüyorsa onları da çağırarak sürer. İşlemede React, DOM'u yeni çıktıyla eşleştirmek için gereken asgari işlemleri uygular; fark yoksa düğüme dokunmaz.⁸ (Buradaki "commit", Git'inkiyle ilgisiz; yalnızca ad benzerliği.) Sayıyla gördüm: Ust bir Rozet ve üç Kart çiziyor; +10 düğmesi Ust'un durumunu değiştiriyor.

Beş fonksiyon yeniden çağrıldı (çizme), ekranda yalnızca bir metin düğümü değişti (işleme). Kartlar değişmediği halde çağrıldı: belgeye göre varsayılan, güncellenen bileşenin içindeki bütün bileşenleri çizmektir; sorun çıkarsa seçenekler var ama "erken eniyileme yapma".⁸ Demek ki yeniden çizim ucuz hesap, pahalı olan DOM işlemidir ve React onu azaltır. Geliştirmede Strict Mode her bileşeni bir kez daha çağırır; saf olmayan bileşeni yakalamak içindir.³⁰

Durum bir anlık görüntüdür

Durum 0 iken bir düğme setSayi(sayi + 1)'i üç kez çağırıyor. Ekranda ne görünür? Çalıştırdım: 1. Her çizim kendi durum değerlerinin sabit bir anlık görüntüsüyle çalışır: o çizimin olay işleyicisinde sayi hep 0'dır, üç çağrı üç kez "1 yap" demektir.⁹ React ayrıca işleyicideki bütün çağrılar bitene kadar bekler, tek çizim yapar.¹⁰ Öncekine bağlı art arda güncelleme için değer yerine fonksiyon verilir: setSayi(x => x + 1) (güncelleyici fonksiyon). Aynı düğme böyle yazılınca ekranda 3 göründü.¹⁰

31.4 Kancalar: useState ve useEffect

Kanca ve kuralı

useState ve adı use ile başlayan öteki fonksiyonlara kanca (hook) denir; yalnızca React bileşeni çizerken çalışırlar ve React'in özelliklerine "takılmanı" sağlarlar.⁷ Kural: bileşenin (ya da kendi kancanın) en üst düzeyinde çağrılırlar; koşul, döngü, iç içe fonksiyon ya da try/catch içinde çağrılmazlar.¹⁷ Neden? useState(0) çağrısında hangi değişkene ait olduğunu söyleyen bir ad geçmez. Belgeye göre kancalar her çizimde sabit bir çağrı sırasına dayanır: React her bileşen için bir durum çiftleri dizisi ve bir sıra sayacı tutar, her çağrıda sıradaki çifti verir.⁷ Bunu bir oyuncak modelde denedim (benim basitleştirmem): iki useState (puan 0, seri 3); setPuan(10) ve setSeri(4) sonrası çağrılar sırayla 0 3, 10 3, 10 4 verdi. Birinci çağrı hep birinci kutuyu, ikincisi ikinciyi aldı. Bir useState koşula girse sıra kayar ve puan kutusundan seri okunurdu.

Olay işleyici ve etki

Bileşenin içinde üç tür kod var. Çizme kodu (en üst düzey) saf olmalı: özellik ve durumdan JSX hesaplar. Olay işleyici (event handler), belirli bir kullanıcı eylemi (tıklama, yazma) yüzünden çalışan iç içe fonksiyondur; yan etkiler burada serbesttir.¹³ Üçüncüsü etki (Effect): çizmenin kendisinin doğurduğu yan etki; bir işlemenin sonunda, ekran güncellendikten sonra çalışır.¹³ (Yan etki (side effect): programın dışındaki dünyayı değiştiren her şey; ağ isteği, zamanlayıcı, başlık.) Ayırma sorusu: bu kod neden çalışıyor? "Gönder'e basıldığı için" ise olay işleyici; "ekranda bu bileşen göründüğü için" ise etki.¹⁴ Cevabı sunucuya yollamak gonder'in işi (olay); soru ekranı görünürken geri sayım yürütmek etkidir.

Etki: bildir, bağımlılıkları yaz, temizle

Belge üç adım sayar: etkiyi bildir, bağımlılıklarını belirt, gerekirse temizlik ekle.¹³ Örnek: 30 saniyelik geri sayım (özellik varsayımsal; yalnızca etkinin biçimini gösteriyor).

import { useEffect, useState } from "react";

export function GeriSayim() {
  const [kalan, setKalan] = useState(30);

  useEffect(() => {
    const id = setInterval(() => {
      setKalan((k) => k - 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <p id="k">Kalan süre: {kalan}</p>;
}

4: kalan durumu 30'la başlar. 6: useEffect etkiyi bildirir. 7–9: saniyede bir kalan'ı azaltan setInterval; güncelleyici biçim (k => k - 1) kullanıldı, çünkü etki bir kez kurulur ve eski anlık görüntüye takılmamalı. 10: etkinin döndürdüğü temizlik fonksiyonu (cleanup); bileşen ekrandan kalkarken ya da etki yeniden kurulmadan önce çağrılır, zamanlayıcı durur. 11: [] bağımlılık dizisi: "ekrana gelince bir kez kur".

Bağımlılık dizisi üç biçimde yazılır: hiç yoksa etki her çizimden sonra çalışır; [] ise yalnızca bileşen ekrana gelince (mount); [a, b] ise ekrana gelince ve a ya da b bir öncekinden Object.is ile farklıysa çalışır.¹³ Bağımlılıkları sen "seçmezsin": etkinin içinde okuduğun her özellik ve durumu yazarsın, eksikse denetleyici (Bölüm 29.4) uyarır.¹³ (Bu "bağımlılık", Bölüm 27'deki modül bağımlılığı değil, etkinin okuduğu değerlerdir.) Başlığı puana bağlayan ikinci bir etki yazdım: useEffect(() => { document.title = `Puan: ${puan}`; }, [puan]). Sahte saatle çalıştırdım: ekrana gelince Kalan süre: 30, başlık Puan: 0, kurulan zamanlayıcı 1, temizlenen 0. Saat 3 sn ilerleyince Kalan süre: 27. Puan 15 olunca başlık Puan: 15 oldu, ama süre 27'de kaldı ve zamanlayıcı yeniden kurulmadı (bağımlılıklar ayrı). Soruyu değiştirmek için GeriSayim'e yeni key verince (anahtar listelerin dışında da kimliktir³²) eski bileşen kalktı: kurulan 2, temizlenen 1; süre yine 30. Kapatınca temizlenen 2. Her kurulumun bir temizliği var.

Temizlik ve Strict Mode

Temizlik, etkinin yaptığını durdurur ya da geri alır: bağlanmanın karşılığı bağlantıyı kesmek, abonenin abonelikten çıkmak, veri çekmenin iptal ya da sonucu yok saymak.¹³ Geliştirmede Strict Mode her etkiyi bir kez daha çalıştırır: kur, temizle, tekrar kur;³⁰ ölçüt, kullanıcının "bir kez çalışma" ile bu sıra arasındaki farkı ayırt edememesidir.¹³ Denedim: soruId bağımlılıklı bir etki "kur" ve "temizle" yazıyor. Strict Mode kapalıyken sıra kur 1 | temizle 1 | kur 2 | temizle 2 (ilk soru, değişim, kapanış); açıkken kur 1 | temizle 1 | kur 1 | temizle 1 | kur 2 | temizle 2: baştaki fazladan "temizle, kur" çifti geliştirmeye özgü sınavdır. Etkinin iki kez çalışmasını useRef ile engellemek ise belgeye göre tuzaktır; hatayı çözmez, gizler.¹³ Etkiyi bileşenin "gel, güncelle, kalk" yaşam döngüsüyle değil ayrı bir süreç olarak düşün: yalnızca iki şey yapar, eşitlemeye başlar ve durdurur; bağımlılık değişince "temizle, yeni değerle kur" olur.¹⁶

Çoğu zaman etki gerekmez

Etki React'in kaçış kapısıdır: yalnızca bileşeni dış bir sisteme (ağ, tarayıcı API'si) eşitlemek için.¹⁵ Bir durumu başka durumdan hesaplamak için etki yazma. Cevaplanan 3, toplam 8 soru ise ilerleme 3 / 8 × 100 = 37,5 yüzdedir; ayrı durum ve etki yerine çizim sırasında hesapla:

const yuzde = (cevaplanan / toplam) * 100;

Belge aynı ilkeyi (ad ve soyadı birleştirmek) şöyle söyler: hesaplanabiliyorsa durum yapma; kod daha hızlı, kısa ve hataya kapalı olur.¹⁵ İleri bir araç da var: useEffectEvent, etkinin içinde "en son değeri oku ama bağımlılık yapma" demenin yoludur; çünkü etkiler tepki verir, olay işleyiciler vermez.¹⁴³¹ Kurduğum React 19.3.1 bunu dışa aktarıyor; ayrıntı resmî sayfada.

31.5 Yönlendirme (routing) ve sayfalar

Yönlendirme (routing), belgenin tanımıyla, kullanıcı belirli bir URL'yi ziyaret ettiğinde hangi içeriğin ya da sayfanın gösterileceğine karar vermektir; URL'leri uygulamanın parçalarına eşlemek, iç içe rotaları, rota ve sorgu parametrelerini yönetmek gerekir.¹⁹ URL'yi Bölüm 20'den, tek sayfa uygulamayı Bölüm 22.1'den hatırla. Sayfa (page) burada bir rotaya (URL kalıbına) bağlı, ekranı kaplayan bileşendir; Bölüm 15'teki bellek sayfasıyla ilgisizdir.

Yönlendirme React'in çekirdeğinde yok

Belge açık: Vite gibi derleme araçlarının verdiği başlangıç istemci tarafında çalışan bir tek sayfa uygulamasıdır ve yönlendirme, veri çekme, stil için başka çözüm içermez; yönlendirici olarak React Router ve TanStack Router önerilir, yönlendiriciler kodda ya da bileşen klasörü ve dosya yapısından tanımlanabilir.¹⁹ Yönlendirme, 31.1'deki çerçeve kararlarından biridir (Bölüm 9'daki derlenmiş kütüphane ile karıştırma). Durumla da yazabilirsin:

const [sayfa, setSayfa] = useState("ana");
return sayfa === "ana" ? <AnaSayfa onGit={setSayfa} /> : <Leaderboard />;

Çalışır, ama adres çubuğu hiç değişmez: Geri düğmesi uygulamadan çıkarır, yenileyince ana sayfaya dönersin, "şu bölüme bak" bağlantısı paylaşamazsın. Tarayıcıda bunu çözen History API'dir: oturum geçmişi yığınının içeriğini değiştirmene izin verir ve history.back() tam olarak Geri düğmesine basmış gibi davranır.²³ Yönlendirici kütüphaneleri bu işi yönetip URL ile bileşeni eşler.

Köprü: Expo Router

Bölüm 32'de kullanacağımız Expo Router, dosya tabanlı bir yönlendiricidir: src/app klasöründeki dosyalar rotaları tanımlar, her sayfanın bir URL yolu vardır ve her ekran otomatik olarak derin bağlantıyla (deep link) paylaşılabilir.²¹²² [userName].tsx parametreli rota, index.tsx klasörün varsayılanı, _layout.tsx iskelet bileşenidir.²² Expo belgesi şöyle der: React Native tarihsel olarak uygulamaların nasıl kurulacağı konusunda kural koymamıştır; Expo Router ise React Native için "görüşlü" (opinionated) bir çerçevedir, web'de Remix ve Next.js'in rolüne benzer.²¹ Bizim uygulamaya uyarlanmış varsayımsal bir ağaç (gerçeği Bölüm 32.3'te, Emre ile belirleriz):

src/app/
├── _layout.tsx          ortak iskelet (üst bar, sekmeler)
├── index.tsx            →  /
├── leaderboard.tsx      →  /leaderboard
└── bolum/
    └── [bolumId].tsx    →  /bolum/3 gibi

"Hangi sayfa" sorusunun cevabı kodun içinde değil, dosya sisteminde (Bölüm 16). TanStack Router da aynı işi çözer; ona Bölüm 33.3'te kısaca bakacağız.

Bu bölümde neler kuruldu

Kütüphane senin çağırdığındır, çerçeve senin kodunu çağıran (kontrolün tersine çevrilmesi); React sınırdadır: bileşenleri o çağırır, yönlendirme gibi kararları çerçevelere bırakır. Ekran bileşenlerden kurulur; bileşen özellikleri (dışarıdan, değiştirilemez) ve durumu (hafıza) alıp ekranın tarifini döndüren saf bir fonksiyondur: bu bildirimsel yazımdır. JSX o tarifin yazımıdır. Durum değişince React tetikler, çizer (bileşenleri çağırır), DOM'a işler (yalnızca farkı uygular); durum anlık görüntüdür, yerinde değiştirilmez. Kancalar çağrı sırasına dayanır; useState hafıza, useEffect çizmenin doğurduğu yan etkidir ve bağımlılık dizisi ile temizlik ister. Yönlendirme URL'yi sayfaya eşler ve React çekirdeğinde değildir.

Terimler sözlükte, Bölüm 31 başlığı altında.

Kaynaklar

1. react.dev, Quick Start: bileşen, JSX, süslü parantez, koşul ve liste, olay, durum, durumu paylaşma özeti.
2. react.dev, Conditional Rendering: koşullar için sıradan JavaScript (if, &&, ? :).
3. react.dev, Writing Markup with JSX: JSX bir sözdizimi uzantısıdır, React bir kütüphanedir; JSX kuralları.
4. react.dev, Passing Props to a Component: özellikler, değiştirilemezlik.
5. react.dev, Keeping Components Pure: saflık, çizim sırasında dış nesneleri değiştirmemek, yan etkilerin yeri.
6. react.dev, Reacting to Input with State: buyurgan ve bildirimsel kullanıcı arayüzü, görsel durumları sıralamak.
7. react.dev, State: A Component's Memory: yerel değişken yetmez, useState, kancalar ve çağrı sırası.
8. react.dev, Render and Commit: tetikleme, çizme, DOM'a işleme; Strict Mode'da çift çağrı.
9. react.dev, State as a Snapshot: çizimin anlık görüntüsü, olay işleyicideki durum değeri.
10. react.dev, Queueing a Series of State Updates: toplu güncelleme, güncelleyici fonksiyon.
11. react.dev, Updating Objects in State: durumu salt okunur saymak, yeni nesne vermek.
12. react.dev, useState (başvuru): Object.is ile karşılaştırma, aynı değerde yeniden çizmeme.
13. react.dev, Synchronizing with Effects: etki, bağımlılık dizisi üç biçimi, temizlik, Strict Mode, useRef tuzağı, veri çekme.
14. react.dev, Separating Events from Effects: olay işleyici ile etki ayrımı, reaktif değerler.
15. react.dev, You Might Not Need an Effect: çizim sırasında hesaplama.
16. react.dev, Lifecycle of Reactive Effects: etkinin yaşam döngüsü bileşeninkinden ayrıdır.
17. react.dev, Rules of Hooks: kancalar yalnızca en üst düzeyde çağrılır.
18. react.dev, Creating a React App: yeni proje için çerçeveyle başlamak; Next.js, React Router, Expo.
19. react.dev, Build a React app from Scratch: yönlendirme tanımı, derleme araçlarının yönlendirme içermemesi, "kendi çerçeveni yazmak".
20. Martin Fowler, Inversion Of Control (2005): kütüphane ve çerçeve farkı, Hollywood ilkesi.
21. Expo, Introduction to Expo Router: dosya tabanlı yönlendirici; React Native için "görüşlü" çerçeve; her ekran derin bağlantılı.
22. Expo, Expo Router notation ve Core concepts: index, [param], _layout; her sayfanın URL'si olması.
23. MDN, History API: oturum geçmişi yığını, back(), pushState().
24. react.dev, createElement (başvuru): type, props, key alanlı eleman nesnesi.
25. react.dev, Understanding Your UI as a Tree: bileşen ağacı.
26. react.dev, Sharing State Between Components: durumu yukarı taşımak, tek doğruluk kaynağı.
27. react.dev, Responding to Events: olay işleyici, onClick özelliği olarak fonksiyon geçirmek.
28. react.dev, Thinking in React: tek yönlü veri akışı, ters veri akışı.
29. react.dev, Rendering Lists: map ve key kuralları.
30. react.dev, StrictMode (başvuru): geliştirmede ek çizim ve ek etki çalıştırma.
31. react.dev, useEffectEvent (başvuru). Ayrıca bu bölümdeki çıktıların hepsi, React 19.3.1, react-dom 19.3.1, Node 22 ve jsdom ile yazarın kendi çalıştırdığı kodlardandır.
32. react.dev, Preserving and Resetting State: key ile durumu sıfırlamak.