REACT NEDİR?

2011 yılında Facebook'ta Jordan Walke, haber akışındaki karmaşık arayüz güncellemelerini yönetmek için XHP adlı PHP eklentisinden esinlenerek "FaxJS" adında bir prototip yazdı. O dönemde Facebook'un haber akışı milyonlarca kullanıcının verisini aynı anda günceller, küçük bir değişiklik bile sayfanın yeniden çizilmesine yol açardı. İki yıl sonra, Mayıs 2013'teki JSConf US'ta Jordan Walke sahneye çıkıp bu kütüphaneyi "React" adıyla açık kaynak duyurduğunda topluluğun ilk tepkisi şaşkınlık oldu: HTML'i JavaScript'in içine yazmak (JSX) çoğu geliştiriciye "yanlış" geliyordu. Ama altta yatan fikir — virtual DOM — kısa sürede kabul gördü ve modern frontend'in seyrini değiştirdi.

1. React Nedir, Ne Değildir?

React, kullanıcı arayüzleri oluşturmak için tasarlanmış bir JavaScript kütüphanesidir. Bir framework değildir; routing, form yönetimi, veri çekme gibi konular React'ın çekirdeğine dahil değildir. Kütüphane yalnızca tek bir işe odaklanır: bileşen tabanlı (component-based) yapıda arayüz parçalarını tanımlamak ve durum (state) değiştiğinde ekranı verimli biçimde güncellemek.

Bu sade odak, React'ın hem güçlü hem de zaman zaman kafa karıştırıcı yanıdır. Bir Angular projesinde "her şey kutudan çıkar" beklentisi varken, React projesinde geliştirici routing için React Router, durum yönetimi için Redux/Zustand, form için React Hook Form gibi parçaları kendisi seçer. Ekosistemin esnekliği, öğrenme eğrisinin dikleşmesi pahasına gelir.

2. 2011'den 2013'e: XHP'den React'a

React'ın kökeni Facebook'un PHP dünyasına dayanır. XHP, PHP içinde HTML benzeri yapıları doğrudan yazmayı sağlayan bir uzantıydı; amaç, XSS açıklarını azaltmak ve sunucu tarafında bileşen mantığı kurmaktı. Jordan Walke bu fikrin JavaScript tarafında daha radikal bir uygulamasını denedi: konuya ilişkin kaynaklar konuya derinlemesine bir bakış sağlar.

• 2011: Facebook'ta FaxJS prototipi, haber akışında dahili kullanım için yazıldı.
• 2012: Instagram satın alındıktan sonra Instagram web uygulaması React üzerinde kuruldu — Facebook dışına çıkan ilk büyük örnek.
• Mayıs 2013: JSConf US'ta açık kaynak duyurusu; ilk tepki karışık, JSX tartışma yarattı.
• 2015: React Native duyuruldu; aynı zihinsel modelle mobil uygulama yazılabilir hale geldi.
• 2019: Hooks API'si geldi; sınıf bileşenlerinden fonksiyonel bileşenlere geçiş hızlandı.

3. Virtual DOM: Asıl Fikir

React duyurulduğunda dikkat çeken teknik yenilik virtual DOM idi. Tarayıcının gerçek DOM'u ağır bir yapıdır; her doğrudan manipülasyon, yeniden boyamayı (repaint) ve düzeni (reflow) tetikleyebilir. React, gerçek DOM ile geliştirici arasına hafif bir JavaScript nesne ağacı yerleştirir.

Süreç şöyle işler: bileşenin state'i değiştiğinde React, yeni bir virtual DOM ağacı üretir, eskisiyle karşılaştırır (reconciliation / diffing) ve sadece gerçekten değişen düğümleri gerçek DOM'a yansıtır. Geliştirici "ekranı şu hale getir" der; ara adımları React halleder.

Bu yaklaşım o dönemde tartışmalıydı çünkü "DOM'un üzerine bir soyutlama daha koymak yavaşlatır" sezgisine ters geliyordu. Pratikte tersi çıktı: küçük, sık güncellemelerde React'ın diffing maliyeti, gereksiz DOM yazımının maliyetinden düşüktü.

4. JSX: HTML mi, JavaScript mi?

React'ın ikinci tartışmalı kararı JSX'ti. JSX, JavaScript içinde HTML benzeri sözdizimi yazmayı sağlayan bir uzantıdır. Örneğin:

const eleman = <h1 className="baslik">Merhaba</h1>;

Bu satır derleme aşamasında React.createElement("h1", { className: "baslik" }, "Merhaba") çağrısına dönüşür. 2013'te "ilgi ayrımı (separation of concerns) ihlal ediliyor" eleştirisi yaygındı. Ekibin cevabı şuydu: asıl ayrım HTML ile JavaScript arasında değil, bileşen mantığı ile uygulama mantığı arasında olmalı. Yıllar içinde bu görüş yaygın kabul gördü.

5. Bileşen Modeli ve Tek Yönlü Veri Akışı

React'ta her şey bileşendir. Bir buton, bir form, bir sayfa, hatta uygulamanın tamamı — tümü iç içe geçmiş bileşen ağacıdır. İki temel kavram bu modeli besler:

1. Props: Bileşene dışarıdan gelen, değiştirilemez veri.
2. State: Bileşenin kendi içinde tuttuğu, zamanla değişebilen veri.

Veri yukarıdan aşağıya akar (top-down). Bir alt bileşen, üst bileşendeki veriyi doğrudan değiştiremez; ancak callback fonksiyonları aracılığıyla "değişiklik niyetini" yukarı iletebilir. Bu tek yönlü akış (unidirectional data flow), arayüzdeki hataları izlemeyi büyük ölçüde kolaylaştırır çünkü "bu değer neden değişti?" sorusunun cevabı her zaman tek bir kaynağa götürür.

6. Hooks Dönemi ve Modern React

2019'da gelen Hooks, React'ın ikinci büyük dönüşümüydü. Daha önce state ve yaşam döngüsü (lifecycle) yönetmek için sınıf bileşenleri gerekirken, useState, useEffect, useContext gibi hooks sayesinde fonksiyonel bileşenler bu yetenekleri kazandı. Sınıf bileşenleri hâlâ destekleniyor ama yeni projelerde nadiren tercih ediliyor.

Günümüzde React; Next.js gibi meta-framework'lerle birlikte sunucu bileşenleri (Server Components), streaming SSR ve edge rendering gibi konuları da kapsayan geniş bir platforma dönüştü. Temel bir başlangıç arayanlar React eğitimi üzerinden ilerleyebilir; özellikle Hooks ve bileşen mantığını sırayla öğrenmek, sonraki ileri konuları çok daha anlaşılır kılar.

7. Ne Zaman React, Ne Zaman Değil?

React her proje için doğru seçim değildir. Tek sayfalık tanıtım siteleri, statik içerikli bloglar veya çok basit form arayüzleri için React kullanmak çoğu zaman gereksiz karmaşa getirir; saf HTML/CSS ya da Astro, Eleventy gibi statik üreteçler daha hızlı sonuç verir.

Buna karşılık React, şu durumlarda güçlü bir tercih olur:

• Durumu sık değişen, karmaşık etkileşimli arayüzler (dashboard, editör, sosyal akış).
• Tekrar kullanılabilir bileşen kütüphanesi oluşturulması gereken büyük ürünler.
• Web ve mobil (React Native) için ortak zihinsel model paylaşılmak istendiğinde.
• Ekosistemin geniş olması (kütüphane, iş ilanı, topluluk) sayesinde uzun ömürlü projeler için güvenli seçim arayışı.

2013'teki o JSConf sunumundan bu yana React, "JSX garip bir fikir" tepkisinden frontend geliştirmenin fiili standardına dönüştü. Virtual DOM artık tek başına ayırt edici bir özellik değil; pek çok modern kütüphane benzer fikirleri başka biçimlerde uyguluyor. Ama React'ın asıl mirası, arayüzü durumun bir fonksiyonu olarak düşünme alışkanlığını yaygınlaştırmasıdır — ve bu zihinsel model, kullandığınız kütüphane değişse bile kalıcı.