React Nedir?

Kütüphane mi, framework mü?

React kendisini bir kullanıcı arayüzü kütüphanesi olarak tanımlar: bileşenleri tanımlamayı, durumlarını yönetmeyi ve ekrana yansıtmayı üstlenir. Sayfa yönlendirme, veri çekme, kod bölme, derleme ve sunucu tarafı render gibi bir uygulamanın geri kalan ihtiyaçları ise React'in çekirdeğinde yoktur. Bu yüzden React ekibi, Şubat 2025'te Create React App'i yeni projeler için kullanımdan kaldırırken Next.js, React Router ve Expo gibi bir framework ile başlamayı önerdi; daha özel ihtiyaçlar için Vite, Parcel veya Rsbuild gibi derleme araçlarını da alternatif olarak gösterdi.

Pratikte bir web sitesi söz konusu olduğunda React çoğu zaman tek başına değil, Next.js gibi bir framework'ün parçası olarak kullanılır: React arayüzü tarif eder, framework sayfaların nasıl üretileceğini, sunulacağını ve önbelleğe alınacağını belirler.

Bileşenler ve JSX

React uygulaması, iç içe geçen bileşenlerden oluşur. Bileşen, girdi olarak props alan ve ekranda ne görüneceğini döndüren bir JavaScript fonksiyonudur. Görünüm, HTML'e benzeyen JSX sözdizimiyle yazılır ve derleme sırasında normal JavaScript çağrılarına dönüştürülür:

import { useState } from "react";

function SepeteEkle({ urunAdi, stok }) {
  const [adet, setAdet] = useState(1);

  return (
    <div>
      <p>{urunAdi}: {adet} adet</p>
      <button onClick={() => setAdet(adet + 1)} disabled={adet >= stok}>
        Artır
      </button>
    </div>
  );
}

Bu örnekte urunAdi ve stok dışarıdan gelen props, adet ise bileşenin kendi durumudur. Düğmeye basıldığında setAdet durumu değiştirir; React bileşeni yeniden çalıştırır ve yalnızca değişen metni ve düğmenin durumunu günceller.

Durum ve tek yönlü veri akışı

React'in temel fikri, arayüzün durumun bir fonksiyonu olmasıdır: aynı durum ve props her zaman aynı görüntüyü üretir. Veri yukarıdan aşağıya props olarak akar; alt bileşen bir şeyi değiştirmek istediğinde doğrudan veriyi değiştirmez, üstten gelen bir fonksiyonu çağırır. Bu tek yönlü akış, büyük arayüzlerde “bu değeri kim değiştirdi?” sorusunun cevabını takip edilebilir kılar. Yan etkiler (veri çekme, abonelik, zamanlayıcı) useEffect gibi hook'larla yönetilir. Ekim 2025'te 1.0 sürümüne ulaşan React Compiler ise gereksiz yeniden render'ları önlemek için eskiden elle yazılan önbellekleme (memoization) kodunu derleme sırasında otomatik ekler.

React ekranı nasıl günceller?

Durum değiştiğinde React önce etkilenen bileşenleri yeniden çalıştırıp yeni bir arayüz tarifi üretir (render aşaması), sonra bunu bir önceki tarifle karşılaştırır ve yalnızca gereken DOM değişikliklerini uygular (commit aşaması). Bu karşılaştırmaya uzlaştırma (reconciliation) denir ve genellikle sanal DOM kavramıyla anlatılır. React 18 ile gelen eşzamanlı (concurrent) render sayesinde React, acil olmayan güncellemeleri kesip kullanıcının yazması veya tıklaması gibi öncelikli işlere yer açabilir.

Sunucuda React ve SEO'ya etkisi

Yalnızca tarayıcıda çalışan bir React uygulamasında sunucudan gelen HTML neredeyse boştur ve içerik JavaScript çalışınca oluşur; bu CSR modelinin tarama ve performans açısından bilinen riskleri vardır. Sunucu tarafı render'da ise bileşenler sunucuda HTML'e dönüştürülür, tarayıcıda hydration ile etkileşimli hâle getirilir. Aralık 2024'te kararlı sürümü çıkan React 19 ile Server Components yaklaşımı da React'in resmî parçası oldu: bazı bileşenler yalnızca sunucuda çalışır ve tarayıcıya hiç JavaScript göndermez. Next.js'in App Router'ı bu model üzerine kuruludur.

Sunucu tarafı özellikler yeni bir saldırı yüzeyi de getirir; React ekibi Aralık 2025'te Server Components ile ilgili kritik güvenlik açıkları için düzeltmeler yayımladı. React ve onu kullanan framework sürümlerini güncel tutmak bu yüzden yalnızca yeni özellik meselesi değildir.