React, Meta tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan açık kaynak bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı ve geniş ekosistemi sayesinde, web geliştirme dünyasının en yaygın araçlarından biri haline gelmiştir. Resmi sürüm sayfasına göre 2026 itibarıyla güncel ana sürüm React 19'dur.
React'i öğrenmeye değer kılan şey popülerliği değil, düşünce modelidir. Arayüzü küçük, yeniden kullanılabilir parçalara bölmek; veriyi tek yönlü akıtmak; durum değiştiğinde ekranın kendini güncellemesine izin vermek. Bu model bir kez oturduğunda, küçük bir form da büyük bir kurumsal web uygulaması da aynı mantıkla kurulur.
Bu rehberde React'in temel kavramlarını, hooks yapısını, React 19 ile gelen yenilikleri ve öğrenme yolunu adım adım anlatıyoruz.
Özetle
- React, arayüzü bağımsız bileşenlere bölerek kod tekrarını azaltan bir JavaScript kütüphanesidir.
- Props ve state, bileşenler arası veri akışının ve durum yönetiminin iki temel mekanizmasıdır.
- Hooks, fonksiyonel bileşenlere durum ve yan etki yönetimi kazandıran modern yaklaşımdır.
- React 19, form ve veri işlemlerini sadeleştiren Actions gibi yeniliklerle geliyor.
- Gerçek projelerde React çoğunlukla Next.js, TypeScript ve Tailwind CSS ile birlikte kullanılır.
Bileşen Mantığı: Props ve State
React'in temel yapı taşı bileşendir. Bileşen (component), arayüzün kendi görünümünü ve davranışını taşıyan, yeniden kullanılabilir parçasıdır. Bir buton, bir ürün kartı veya koca bir sayfa; hepsi bileşendir. Küçük parçalar birleşerek büyük ekranları oluşturur. Bu yapı sayesinde aynı kart bileşeni, sitenin on farklı yerinde tek satır kodla kullanılır.
Bileşenler JSX ile yazılır. JSX, JavaScript içinde HTML benzeri işaretleme yazmayı sağlayan söz dizimidir. Arayüz ile mantık aynı dosyada, aynı dilde durur; ayrı bir şablon dili öğrenme zorunluluğu yoktur.
Veri akışını iki kavram yönetir. Props, bir bileşenin dışarıdan aldığı ve değiştiremediği verilerdir; üst bileşenden alt bileşene akar. State ise bileşenin kendi içinde tuttuğu ve değiştirebildiği durumdur; sepetteki ürün sayısı veya bir menünün açık olup olmadığı gibi. State değiştiğinde React ilgili bileşeni otomatik olarak yeniden çizer. Ekranı elle güncelleme derdi ortadan kalkar; siz veriyi yönetirsiniz, görüntüyü React halleder.
Bu güncellemeyi verimli kılan mekanizma sanal DOM'dur. Sanal DOM, arayüzün bellekte tutulan hafif bir kopyasıdır. React her değişiklikte bu kopyayı gerçek sayfayla karşılaştırır ve yalnızca farklı olan kısımları günceller. Sayfanın tamamını yeniden çizmek yerine noktasal dokunuşlar yapmak, akıcı bir kullanıcı deneyimi sağlar.
Hooks ile Modern React
Hooks, güncel React'in yazım standardıdır. Hooks, fonksiyonel bileşenlere durum tutma ve yaşam döngüsü yönetimi kazandıran fonksiyon ailesidir. En sık kullanacaklarınız bellidir: useState ile durum tanımlarsınız, useEffect ile veri çekme gibi yan etkileri yönetirsiniz, useContext ile bileşen ağacının derinliklerine props taşımadan veri ulaştırırsınız.
Performans gereken yerlerde useMemo ve useCallback, pahalı hesapları ve fonksiyonları gereksiz yere tekrarlamaktan korur. Ancak bu ikisine erken sarılmayın; çoğu uygulama, optimizasyona gerek kalmadan yeterince hızlıdır. Kendi hook'unuzu yazmak da mümkündür: tekrar eden mantığı bir custom hook'ta toplayıp her bileşende kullanabilirsiniz. Bu, React'te kod paylaşımının en temiz yoludur.
Hooks kullanırken iki kurala dikkat edin: hook'lar yalnızca bileşenin en üst seviyesinde çağrılır; koşul ve döngülerin içinde çağrılmaz. Bu kurallar keyfi değildir, React'in durumları doğru sırayla takip edebilmesi için gereklidir. Modern lint araçları bu hataları siz fark etmeden yakalar.
React 19 ile Gelen Yenilikler
React 19, günlük geliştirmede en çok formları ve veri işlemlerini sadeleştirdi. Actions, form gönderimi gibi asenkron işlemlerin bekleme, hata ve sonuç durumlarını React'in kendisine devreden yapıdır. Daha önce elle yazılan yükleniyor göstergeleri ve hata yönetimi, artık useActionState gibi hook'larla standart biçimde kurulur. useOptimistic ise sonucu beklemeden arayüzü iyimser şekilde güncelleyerek uygulamaya hız hissi kazandırır.
Belge başlığı ve meta etiketlerinin bileşen içinden yönetilmesi gibi küçük ama pratik iyileştirmeler de React 19 ile geldi. Bu tür detaylar, üçüncü taraf paketlere olan ihtiyacı azaltarak proje bağımlılıklarını sadeleştirir.
Bir diğer önemli gelişme React Compiler'dır. Bileşenleri derleme aşamasında otomatik optimize ederek elle memo yazma ihtiyacını büyük ölçüde azaltır. Server Components desteği de React 19 ile olgunlaştı: bileşenler sunucuda çalışıp tarayıcıya yalnızca sonucu gönderir. Bu mimariyi pratikte kullanmanın en yaygın yolu Next.js'tir; detayları Next.js yazımızda bulabilirsiniz.
Sürüm geçişleri konusunda React ekibi geriye uyumluluğa önem verir. React 18'den 19'a geçiş, çoğu projede küçük düzeltmelerle tamamlanır. Yine de büyük bir projeyi güncellemeden önce resmi geçiş rehberini okumak ve test kapsamını genişletmek doğru bir alışkanlıktır.
React Ekosistemi: Birlikte Kullanılan Araçlar
Gerçek projelerde React tek başına değil, bir araç setiyle birlikte çalışır. Yaygın kombinasyon şöyledir:
- Framework: yönlendirme, SSR ve SEO için Next.js
- Dil: tip güvenliği için TypeScript
- Stil: hızlı ve tutarlı tasarım için Tailwind CSS
- Sunucu verisi: önbellekli veri çekme için TanStack Query
- İstemci durumu: sepet gibi global durumlar için Zustand veya Redux Toolkit
Bu araçların her biri bir sorunu çözer; hepsini ilk gün öğrenmeniz gerekmez. TypeScript'in projelere ne kattığını TypeScript yazımızda, Tailwind yaklaşımını ise Tailwind CSS yazımızda ayrıntılı anlattık. React bilginiz mobil tarafta da karşılık bulur: React Native, aynı bileşen mantığıyla iOS ve Android uygulaması geliştirmenizi sağlar.
Araç seçerken az ama oturmuş araçlarla ilerleyin. Her yeni kütüphane bir bağımlılıktır; bakımı bırakılmış bir paket, iki yıl sonra sürüm güncellemenizi engelleyen bir yüke dönüşebilir. Yaygın kullanılan ve aktif geliştirilen araçlara yatırım yapmak uzun vadede kazandırır.
React Öğrenme Yolu
React öğrenmek için ön koşul, sağlam JavaScript temelidir. Fonksiyonlar, diziler, nesneler ve asenkron yapılar oturmadan React kavramları havada kalır. Temel hazırsa izlenecek yol nettir: önce resmi dokümantasyondaki interaktif eğitimle bileşen ve state mantığını kavrayın, ardından yapılacaklar listesi gibi küçük bir uygulamayı kendi başınıza yazın.
Üçüncü adım, gerçekçi bir proje yapmaktır: API'den veri çeken, birden fazla sayfası olan küçük bir site. Bu aşamada Next.js'e geçmek, yönlendirme ve veri çekme pratiğini gerçek dünya standardında kazandırır. Öğrenme sürecinde hata mesajlarını okumayı alışkanlık edinin; React'in hata mesajları çoğu zaman çözümü de söyler.
Yapay zeka destekli kod araçları öğrenme sürecini hızlandırabilir; ancak ürettikleri kodu anlamadan kopyalamak temeli zayıf bırakır. Aracın önerdiği çözümü satır satır okuyup neden çalıştığını açıklayabiliyorsanız doğru yoldasınız demektir.
Stark Bilişim olarak web projelerimizi React ekosistemiyle geliştiriyor, kurumsal siteden e-ticarete kadar ölçeklenebilir uygulamalar kuruyoruz. Aklınızdaki proje için teklif isteyin.
