React Nedir, Ne İşe Yarar? Yeni Başlayanlar İçin Rehber

React, kullanıcı arayüzleri geliştirmek için kullanılan JavaScript kütüphanesidir. Facebook tarafından geliştirilmiştir ve modern frontend dünyasında en yaygın araçlardan biridir.

React'in ana fikri şudur: arayüzü küçük, tekrar kullanılabilir component parçalarına bölmek.

React Ne İşe Yarar?

React ile:

• ▸Web uygulaması arayüzü geliştirilir.
• ▸Form, tablo, modal, panel gibi UI parçaları component yapılır.
• ▸State ile kullanıcı etkileşimleri yönetilir.
• ▸API'den gelen veri ekrana basılır.
• ▸Büyük arayüzler daha düzenli hale getirilir.

React'i öğrenmeden önce frontend temellerini görmek istersen Frontend Nedir? yazısıyla başla.

React Hangi Problemi Çözer?

Klasik JavaScript ile küçük etkileşimler yazmak kolaydır. Fakat arayüz büyüdükçe durum değişir. Sepete ürün ekleme, filtreleme, kullanıcı oturumu, modal açma, form hataları ve API'den gelen veriyi aynı sayfada yönetmek karmaşık hale gelir.

React bu karmaşayı component ve state modeliyle düzenler. Arayüzü tek büyük dosya gibi değil, görevleri net küçük parçalar gibi düşünmeni sağlar.

Örnek parçalar:

• ▸Header
• ▸SearchInput
• ▸ArticleCard
• ▸Pagination
• ▸LoginForm
• ▸AdminTable

Bu parçalar ayrı ayrı geliştirilir, test edilir ve tekrar kullanılabilir.

Component Nedir?

Component, arayüzün tekrar kullanılabilir parçasıdır.

function ArticleCard({ title }: { title: string }) {
  return <article>{title}</article>;
}

Bu küçük yapı farklı sayfalarda tekrar kullanılabilir. React'in gücü buradan gelir.

Props ve State Nedir?

Props, componente dışarıdan gelen veridir. State ise componentin kendi içinde değişen veridir.

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

Yeni başlayanların ilk hedefi props ve state farkını net anlamaktır.

React Öğrenirken En Sık Yapılan Hatalar

React'e başlayanların en sık yaptığı hata, JavaScript temelini atlamaktır. map, filter, destructuring, async/await ve module import mantığı zayıfsa React hataları daha karmaşık görünür.

Diğer hatalar:

• ▸Her şeyi tek component içinde yazmak
• ▸State'i gereğinden fazla yukarı taşımak
• ▸useEffect ile veri akışını karıştırmak
• ▸Key prop kullanmadan liste render etmek
• ▸Form hata durumlarını düşünmemek
• ▸Performansı ölçmeden optimizasyon yapmak

Performans tarafına geçtiğinde React Performans Optimizasyonu dersi bu hataları daha teknik şekilde açar.

React Ne Zaman Öğrenilmeli?

Şunları biliyorsan React'e geçebilirsin:

• ▸HTML temel etiketleri
• ▸CSS ile düzen kurma
• ▸JavaScript array/object
• ▸Function mantığı
• ▸async/await
• ▸Basit API çağrısı

React'i çok erken öğrenmek mümkündür, ama JavaScript temeli zayıfsa hataları anlamak zorlaşır.

React ve Next.js Farkı

React UI kütüphanesidir. Next.js ise React üzerine kurulu frameworktür.

Next.js şunları ekler:

• ▸Routing
• ▸Server rendering
• ▸SEO desteği
• ▸API route
• ▸Image optimizasyonu
• ▸App Router mimarisi

React temeli kurduktan sonra Next.js öğrenmek güçlü bir adımdır.

React ile Mini Proje Fikirleri

Başlangıç için proje seçerken hedef React'in temel kavramlarını göstermektir.

İyi mini projeler:

• ▸Filtrelenebilir kullanıcı listesi
• ▸Not alma uygulaması
• ▸API'den veri çeken film arama ekranı
• ▸Sepet mantığı olan ürün listesi
• ▸Form validasyonlu kayıt ekranı
• ▸Tema değiştiren dashboard

Her projede en az şu kavramlar olsun: component, props, state, event, liste render, boş durum ve hata durumu.

React Öğrenme Sırası

React öğrendikten sonra React Hooks Derinlemesine ve React Server Components içerikleriyle devam edebilirsin.

Sık Sorulan Sorular

React zor mu?

React başlangıçta component, props ve state mantığı yüzünden farklı gelebilir. Temel JavaScript bilgin varsa öğrenmesi zor değildir.

React için TypeScript şart mı?

Şart değildir ama profesyonel projelerde TypeScript büyük avantaj sağlar.

React yerine Vue öğrenilir mi?

Evet. İkisi de modern frontend için güçlü seçeneklerdir. İş piyasası ve proje hedefi seçimde belirleyici olabilir.