React tam olarak ne zaman ve kim tarafından geliştirildi?

React'ın temelleri 2011'de Facebook'ta mühendis Jordan Walke tarafından atıldı. Walke, PHP'nin XHP uzantısından esinlenerek FaxJS adında bir prototip yazdı. Kütüphane önce Facebook haber akışında, ardından 2012'de Instagram web uygulamasında dahili olarak kullanıldı. Mayıs 2013'te JSConf US konferansında React adıyla açık kaynak olarak duyuruldu.

React bir framework mü yoksa kütüphane mi?

React resmi olarak bir kütüphanedir, framework değildir. Sadece arayüz bileşenleri ve durum yönetimi konusuna odaklanır; routing, form, veri çekme, kimlik doğrulama gibi konuları kapsamaz. Bu parçalar için React Router, Redux, Zustand, React Query gibi ayrı paketler kullanılır. Next.js gibi meta-framework'ler ise React'ı temel alıp eksik parçaları kendi içinde sağlar.

Virtual DOM nedir ve neden önemlidir?

Virtual DOM, gerçek tarayıcı DOM'unun hafif bir JavaScript kopyasıdır. State değiştiğinde React önce bu kopya üzerinde yeni ağacı üretir, eskisiyle karşılaştırır ve yalnızca farklı olan düğümleri gerçek DOM'a yazar. Bu yaklaşım, gereksiz repaint ve reflow işlemlerini azaltır; özellikle sık güncellenen karmaşık arayüzlerde belirgin bir performans avantajı sağlar.

JSX zorunlu mudur, React'ı saf JavaScript ile kullanabilir miyim?

JSX zorunlu değildir. JSX yalnızca React.createElement çağrılarına dönüşen söz dizimsel bir kolaylıktır. İsterseniz tüm bileşenleri React.createElement ile yazabilirsiniz. Ancak pratikte JSX kodun okunabilirliğini ciddi biçimde artırdığı için neredeyse tüm projelerde tercih edilir. Babel veya SWC gibi derleyiciler JSX'i otomatik olarak normal JavaScript'e çevirir.

React öğrenmeye başlamadan önce ne bilmem gerekir?

Modern JavaScript (ES6+) konularına hâkim olmak gerekir: let/const, arrow function, destructuring, spread operatörü, async/await ve özellikle array metotları (map, filter, reduce). HTML ve CSS temelleri yanında, JavaScript'te bağlam (this), modül sistemi ve fonksiyonların birinci sınıf değer olduğu kavramı önemlidir. TypeScript ileri seviye projelerde sıkça karşılaşılır.

Hooks ile sınıf bileşenleri arasındaki temel fark nedir?

Sınıf bileşenleri ES6 class söz dizimi kullanır; state ve lifecycle metotları class içine yazılır. Hooks ise 2019'da gelen API'dir; useState, useEffect gibi fonksiyonlar sayesinde state ve yan etki yönetimini düz fonksiyonel bileşenlerin içinde yapmanızı sağlar. Hooks daha az kalıp kod (boilerplate) gerektirir ve mantığın bileşenler arasında paylaşılmasını kolaylaştırır.

React Native ile React aynı şey midir?

Aynı değil ama aynı zihinsel modeli paylaşırlar. React tarayıcıda DOM hedefler; React Native ise iOS ve Android için yerel (native) bileşenleri hedefler. Bileşen yazma şekli, props/state mantığı, hooks API'si büyük oranda aynıdır. Ancak div/span yerine View/Text gibi bileşenler kullanılır ve CSS yerine JavaScript tabanlı bir stil sistemi vardır.

Küçük bir proje için React kullanmak mantıklı mı?

Çoğu zaman değildir. Statik tanıtım sayfaları, basit bloglar veya tek formluk siteler için React gereksiz yük getirir; saf HTML/CSS ya da Astro, Eleventy gibi statik üreteçler daha hızlıdır. React, durumun sık değiştiği, etkileşimli ve büyük arayüzlerde — dashboard, editör, sosyal akış, e-ticaret yönetim paneli gibi senaryolarda — gerçek avantaj sağlar.

REACT NEDİR?

React kütüphanesinin resmi atom logosu: üç elliptik yörünge ve merkezde çekirdek

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.

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.

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ı.

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. Virtual DOM ile gerçek DOM ağaçları arasındaki diff ve reconciliation süreci şeması

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ü.

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ü.

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:

Props: Bileşene dışarıdan gelen, değiştirilemez veri.
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.

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.

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ışı.

React bileşen ağacında üst bileşenden alt bileşenlere props ile tek yönlü veri akışı

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ı.