React.js Neden Öğrenmeli?

React’la ilk tanışmam 2020 yılında oldu. O dönemde WordPress siteleri yapıyordum, frontend tarafında jQuery ile idare ediyordum. Bir gün bir proje için interaktif bir panel yapmam gerekti ve jQuery ile yazdığım kod harbeye dönmüştü. Her şey birbirine girmişti, bir yeri değiştirince başka bir yer bozuluyordu. O zaman bir arkadaşım “React’e bir bak” dedi. İlk iki hafta kafam allak bullak oldu, JSX nedir, component nedir, state nedir hiçbir şey anlamıyordum. Ama bir ay sonra jQuery’ye geri dönmek istemedim bile.

Şimdi 2026’yı geldim ve React, frontend dünyasının tartışmasız lideri. Meta tarafından geliştirilen bu açık kaynak kütüphanesi, Stack Overflow anketlerinde en çok kullanılan frontend framework olmaya devam ediyor. Netflix, Airbnb, Instagram gibi devler React kullanıyor. Türkiye’de de iş ilanlarına baktığınızda React bilen developer arayan şirketlerin sayısı her geçen gün artıyor.

React.js vs Diğer Framework’ler

Frontend dünyasında seçenek çok ama React her zaman öne çıkıyor. Ben Vue.js ve Angular’ı da denedim, her birinin kendine göre artıları var. Ama iş bulma açısından ve topluluk desteği açısından React’ın yeri ayrı.

Vue.js öğrenmesi en kolay olan ama Türkiye’de iş pazarı sınırlı. Angular kurumsal projelerde güçlü ama öğrenme eğrisi dik. Svelte performans açısından harika ama ekosistemi henüz olgunlaşmadı. Benim önerim yeni başlayanlara React’ten başlamaları yönünde, çünkü hem iş bulma şansınız yüksek hem de öğrendikten sonra diğer framework’lere geçiş çok daha kolay oluyor.

React Kurulumu

Eskiden React kurulumu biraz sıkıntılıydı, webpack ayarları, babel ayarları derken bir saat sürerdi. Şimdi Vite sayesinde birkaç dakikada hazır proje oluşturabiliyorsunuz. Ben tüm yeni projelerimde Vite kullanıyorum, Create React App artık eskidi.

# Vite ile yeni proje olusturma
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Kurulum tamamlandığında tarayıcınızda localhost:5173 adresinde projenizi göreceksiniz. O anki hissi tarif edemem, ekranda React logosu dönmeye başladığında “evet, artık bir React developer’ım” diyorsunuz. Aslında daha yolun çok başındasınız ama o motivasyon çok önemli.

React Temel Kavramlar

JSX

JSX, React’ın en tartışmalı özelliğidir. JavaScript içine HTML yazmak başta tuhaf geliyor. Ben ilk gördüğümde “bu nasıl bir hack” diye düşünmüştüm. Ama alıştıktan sonra normal HTML yazmaktan daha pratik geliyor çünkü JavaScript’in tüm gücünü direkt olarak kullanabiliyorsunuz.

function Merhaba() {
  const isim = "Dünya";
  return 
Merhaba, {isim}!
;
}

Süslü parantezler içinde herhangi bir JavaScript ifadesi yazabilirsiniz. Değişkenler, fonksiyon çağrıları, koşullu ifadeler hepsi çalışıyor. Bu esneklik JSX’i güçlü kılıyor.

State ve Props

State ve Props, React’ın temelini oluşturan iki kavram. Props bir component’e dışarıdan veri göndermek için, state ise component’in kendi içindeki değişken veriyi yönetmek için kullanılıyor. İlk başta ikisi karıştırılıyor ama pratik yaptıkça ayrımı kavramak çok kolay.

import { useState } from 'react';

function Sayac() {
  const [sayi, setSayi] = useState(0);
  return (
    

      
Sayi: {sayi}
       setSayi(sayi + 1)}>Artir
    
  );
}

Ben bu sayaç örneğini ilk yaptığımda butona bastığımda ekranın güncellendiğini görmüş ve gerçekten heyecanlanmıştım. Normal JavaScript’te DOM’u manuel güncellersiniz, React’te ise state değişince arayüz otomatik olarak güncelleniyor. İşte React’ın büyüsü burada.

useEffect Hook

useEffect, component’in yaşam döngüsünü yönetmek için kullanılıyor. Bir API’den veri çekecekseniz, bir timer başlatacaksanız ya da bir olay dinleyicisi ekleyecekseniz useEffect içine yazıyorsunuz. Başta karışık gelebilir ama birkaç projede kullanınca mantığı oturuyor.

import { useEffect, useState } from 'react';

function Kullanicilar() {
  const [kullanicilar, setKullanicilar] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => setKullanicilar(data));
  }, []);

  return (
    

      {kullanicilar.map(k => 
{k.name}
)}
    
  );
}

Boş bağımlılık dizisi (o köşeli parantez) component sadece bir kere yüklendiğinde çalışmasını sağlıyor. İçine değişken yazarsanız o değişken her değiştiğinde useEffect tekrar çalışıyor. Bu detayı anlamak React’te ilerlemenin anahtarlarından biri.

React Öğrenme Yol Haritası

React öğrenirken sırayla ilerlemek çok önemli. Ben başta her şeyi aynı anda öğrenmeye çalıştım ve bir ay boyunca hiçbir şey yapamadım. Sonra adım adım gittim ve her şey yerine oturdu. Şu sırayı tavsiye ediyorum:

1. JavaScript ES6+: Arrow functions, destructuring, spread operator, map/filter/reduce. React’e başlamadan önce bu konuları sağlam kavrayın. Benim en büyük hatam JavaScript temelim zayıfken React’e atlamamdı.
2. React temelleri: JSX, Components, Props, State. Bu dördü kavrandı mı temel anlamda React biliyorsunuz demektir.
3. Hooks: useState ve useEffect başlayın, sonra useContext, useRef, useMemo gibi ileri düzey hook’lara geçin.
4. Routing: React Router ile sayfa yönetimi. Tek sayfa uygulama yapmanın yolu buradan geçiyor.
5. State yönetimi: Küçük projelerde Context API yeterli. Büyük projeler için Zustand ya da Redux Toolkit değerlendirin. Ben artık Zustand tercih ediyorum, Redux’a göre çok daha sade.
6. API entegrasyonu: Fetch ya da Axios ile veri çekme. React Query (TanStack Query) kullanarak cache yönetimini öğrenin, hayatınız kolaylaşır.
7. Stillendirme: Tailwind CSS şu an en popüler seçenek. Ben Tailwind’e geçtikten sonra CSS yazma derdinden kurtuldum.
8. Proje geliştirme: Hava durumu uygulaması, film kataloğu, yapılacaklar listesi gibi küçük projelerle başlayın. Her proje bir şey öğretiyor.

Ücretsiz Öğrenme Kaynakları

React öğrenmek için para harcamanıza gerek yok. Benim kullandığım ve tavsiye ettiğim kaynaklar şunlar:

• React resmi belgeleri: react.dev sitesi yenilendi ve inanılmaz güzel oldu. Interaktif örneklerle öğretiyor, kesinlikle buradan başlayın.
• freeCodeCamp: YouTube’daki ücretsiz React eğitim serisi. 12 saatlik kapsamlı bir kurs, sıfırdan ileri seviyeye kadar götürüyor.
• Scrimba: İnteraktif React kursu, video izlerken aynı anda kod yazabiliyorsunuz. Başka bir platformda bu yok.
• YouTube: Traversy Media ve Web Dev Simplified kanalları İngilizce ama anlaşılır. Türkçe kaynak istiyorsanız çeşitli Türk developer’ların içerikleri mevcut.

Sonuç

React öğrenmek sabır gerektiriyor ama kesinlikle çabasına değer. Benim deneyimime göre ilk ay kafa karışıklığı normal, ikinci ay temeller oturuyor, üçüncü ay ise artık kendi projenizi yapabilecek seviyeye geliyorsunuz. Altı ay sonra ise intermediate seviyede projeler geliştiriyorsunuz. Önemli olan her gün biraz kod yazmak ve pes etmemek. Başta çalışan bir component bile yapmak büyük bir adım. Her projede biraz daha ilerleyin, zamanla React’in nasıl çalıştığını içgüdüsel olarak anlamaya başlayacaksınız.