React Nedir ve Neden Var?

React, 2013'te Facebook (Meta) tarafından açık kaynak olarak yayınlanan bir UI kütüphanesidir. "Framework" değil — sadece arayüz katmanını çözer. Routing, state, fetch gibi konuları sen veya seçtiğin kütüphaneler halleder.

Çözmeye çalıştığı problem

Klasik DOM manipülasyonu (jQuery dönemi) state büyüdükçe çığ etkisi yaratırdı: hangi event hangi DOM düğümünü değiştirir, hangi elemana hangi class eklenir, hepsi senin elinde. UI = state eşitliği yoktu. React tek bir cümle ile bunu değiştirdi:

UI = f(state). Veriyi değiştir, React DOM'u senin yerine senkronize etsin.

Declarative vs imperative

Imperative (eski yöntem):

const button = document.querySelector("button");
button.addEventListener("click", () => {
  const span = document.querySelector("#count");
  span.textContent = String(Number(span.textContent) + 1);
});

Declarative (React):

const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;

Sen sonucu tarif edersin, "nasıl" kısmını React halleder.

Virtual DOM ve reconciliation

DOM yavaştır. React, her render'da hafıza içinde virtual DOM denen bir JavaScript ağacı üretir. İki render arasındaki farkı (diffing) hesaplar ve sadece değişen kısımları gerçek DOM'a yazar. Buna reconciliation denir.

Kabaca:

1. State değişti → bileşen yeniden çağrılır
2. Yeni virtual DOM oluşur
3. Eski ile karşılaştırılır
4. Minimum DOM operasyonu uygulanır

Bileşen tabanlı düşünme

Her şey bir bileşendir: buton, form, sayfa, hatta tüm uygulama. Bileşenler parametre (props) alır, JSX döndürür, kendi state'lerini yönetebilir. Küçük parçaları birleştirip büyük arayüz kurarsın.

Ne React DEĞİLDİR

• Bir framework değildir (Next.js framework'tür, React kütüphanedir)
• Bir state yönetim çözümü değildir (useState yetmediğinde Zustand/Redux)
• Bir routing çözümü değildir (React Router veya Next.js gerekir)
• Bir CSS çözümü değildir (Tailwind, CSS Modules vs. seçersin)

Hangi parçayı neyle dolduracağını sen seçersin. Eğitimde her birine değineceğiz.