React Nedir? Yeni Başlayanlar İçin Rehber

01React Nedir, Kısaca Ne İşe Yarar?

React nedir sorusunun en kısa yanıtı şudur: tarayıcıda çalışan kullanıcı arayüzlerini kurmak için kullanılan bir JavaScript kütüphanesi. Bir web sayfasındaki menü, ürün kartı, sepet ya da form gibi parçaları ayrı ayrı tanımlar, sonra bunları birleştirerek bütün sayfayı oluşturursunuz.

React bir çerçeve (framework) değil, kütüphanedir. Yönlendirme, veri çekme ya da sunucu tarafı işler için ek araçlar gerekir. Bu esneklik sayesinde küçük bir widget'tan büyük bir yönetim paneline kadar her ölçekte kullanılabilir.

React'i anlamak için önce dilin kendisini tanımak gerekir. Temeller eksikse JavaScript nedir yazısıyla başlamanızı öneririz; React'te yazdığınız her şey sonunda JavaScript'tir.

02React Ne İşe Yarar?

React'in asıl gücü, veri değiştikçe arayüzü otomatik güncellemesidir. Sepete ürün eklendiğinde sayaç artar, filtre seçildiğinde liste yenilenir; geliştirici bu güncellemeleri tek tek elle yazmak zorunda kalmaz.

Bir başka kazanç bakım kolaylığıdır. Arayüz bileşenlere bölündüğü için bir düğmenin görünümünü değiştirmek istediğinizde tek bir dosyaya dokunursunuz; değişiklik o bileşenin kullanıldığı her yere yansır. Büyük ekiplerde herkes farklı bileşen üzerinde çalışabildiği için iş bölümü de netleşir.

React'in geniş bir topluluğu olması da pratik bir avantajdır. Tarih seçici, tablo, grafik ya da form doğrulama gibi ihtiyaçlar için olgun açık kaynak paketler bulunur; ancak her bağımlılık projeye bakım yükü ekler, bu yüzden paket seçimi bilinçli yapılmalıdır.

Bu yüzden React, kullanıcıyla yoğun etkileşime giren ekranlarda öne çıkar. Tipik kullanım alanları şunlardır:

• Yönetim panelleri ve raporlama ekranları
• E-ticaret ürün listeleri, filtreler ve sepet akışları
• Rezervasyon, randevu ve teklif formları gibi çok adımlı akışlar
• Gerçek zamanlı veri gösteren canlı ekranlar (sipariş, stok, mesajlaşma)
• React Native ile mobil uygulamalar (aynı düşünce modeli, farklı platform)

03React Bileşen Yapısı Nasıl Çalışır?

React'te her şey bileşendir (component). Bileşen, bir arayüz parçasını ve onun davranışını içinde barındıran bir fonksiyondur. Bir “ÜrünKartı” bileşenini bir kez yazar, sayfada yüzlerce kez farklı verilerle kullanırsınız.

Bileşenler dışarıdan props ile veri alır, kendi içlerinde ise state ile değişen bilgiyi tutar. Props bir fonksiyonun parametresi gibidir; state ise bileşenin hafızasıdır. State değiştiğinde React bileşeni yeniden çizer.

import { useState } from "react";

function Sayac({ baslik }) {
  const [adet, setAdet] = useState(0);

  return (
    <div>
      <h3>{baslik}</h3>
      <p>Adet: {adet}</p>
      <button onClick={() => setAdet(adet + 1)}>Artır</button>
    </div>
  );
}

export default Sayac;

JSX Nedir?

Yukarıdaki örnekte HTML'e benzeyen kısım JSX'tir. JSX, JavaScript içinde arayüzü okunaklı biçimde tarif etmenizi sağlayan bir söz dizimidir. Tarayıcı JSX'i doğrudan anlamaz; derleme araçları onu sıradan JavaScript çağrılarına çevirir.

Hook'lar Ne Sağlar?

useState, useEffect gibi hook'lar, fonksiyon bileşenlerine durum tutma, veri çekme ve yan etkileri yönetme yeteneği kazandırır. Yeni başlayan biri için önce useState ve useEffect'i iyi kavramak yeterlidir.

04Sanal DOM ve Performans

Tarayıcıdaki sayfa yapısına DOM denir ve DOM'u sık sık değiştirmek maliyetlidir. React, arayüzün hafif bir kopyasını bellekte tutar; buna sanal DOM denir. Veri değişince yeni kopyayı eskisiyle karşılaştırır ve gerçek DOM'a yalnız farkı uygular.

Bu yaklaşım geliştiriciyi tek tek DOM işlemleri yazmaktan kurtarır. Yine de sanal DOM tek başına hız garantisi değildir. Büyük paket boyutu, gereksiz yeniden çizimler ve optimize edilmemiş görseller bir React sitesini de yavaşlatabilir.

Kullanıcının hissettiği hız Core Web Vitals ile ölçülür: LCP ≤ 2,5 sn, INP ≤ 200 ms ve CLS ≤ 0,1 iyi kabul edilir. Bu eşikleri tutturmak için hız ve performans yönetimi teknolojiden bağımsız olarak ayrı bir iş kalemi olarak ele alınmalıdır.

05React Hangi Projelerde Tercih Edilir?

Her web sitesi React gerektirmez. Birkaç sayfalık bir tanıtım sitesi için sade HTML, CSS ve az miktarda JavaScript çoğu zaman daha hızlı ve daha ekonomiktir. React'in değeri, etkileşim ve veri yoğunluğu arttıkça belirginleşir.

Aşağıdaki tablo kararı kolaylaştırmak için genel bir çerçeve sunar:

06React Öğrenmek İçin Yol Haritası

React öğrenmek isteyenlerin en sık hatası, JavaScript temelleri oturmadan doğrudan kütüphaneye geçmektir. Aşağıdaki sıra, kalıcı öğrenme için sağlam bir yol sunar:

1. HTML ve CSS ile sayfa iskeleti ve düzen mantığını öğrenin.
2. JavaScript'te değişkenler, diziler, nesneler, fonksiyonlar, map/filter ve async/await konularını kavrayın.
3. Resmî dokümantasyondaki öğreticiyle bileşen, props ve state kavramlarını uygulayın.
4. Küçük bir proje yapın: yapılacaklar listesi, hava durumu ya da ürün filtresi.
5. Form yönetimi, veri çekme ve yönlendirme konularına geçin.
6. Büyüyen projelerde tip güvenliği için TypeScript ekleyin.

İlk Projeyi Başlatmak

Yeni bir React projesi için yaygın yöntem Vite gibi bir derleme aracı kullanmaktır. Bilgisayarınızda Node.js'in güncel LTS sürümü kurulu olmalıdır. Güncel öneriler için react.dev adresindeki resmî dokümantasyonu takip edin.

npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run dev

07React, TypeScript ve Ekosistem

React tek başına arayüz katmanıdır; gerçek projede onu çevreleyen araçlar da seçilir. Sunucu tarafı render ve yönlendirme için Next.js gibi çatılar, tip güvenliği için TypeScript, test için Testing Library gibi araçlar sık kullanılır.

Ekip büyüdükçe TypeScript neredeyse standart hâle gelir; bileşenlerin hangi props'ları beklediği kodda açıkça yazılır ve hatalar derleme sırasında yakalanır. Ayrıntılar için TypeScript nedir yazımıza göz atabilirsiniz.

React'in projede hangi katmanda durduğunu netleştirmek de önemlidir. Arayüz tarafı frontend, veritabanı ve iş kuralları ise backend tarafıdır; ikisinin sınırını frontend ve backend farkı yazısında anlattık.

08İyi Arayüz İçin React Yetmez

React, arayüzü kodlamanın iyi bir yoludur; ama neyin, hangi sırayla, kime gösterileceğini belirlemez. Bu kararlar kullanıcı deneyimi tasarımının işidir. Akışı belirsiz bir ekranı en modern teknolojiyle yazmak, sorunu yalnızca daha hızlı üretmek demektir.

Bu yüzden projelerde önce kullanıcı yolculuğu, ekran taslakları ve bileşen kütüphanesi planlanır; kod bunun üstüne kurulur. UI/UX tasarım çalışması, React bileşenlerinin de doğal haritasını çıkarır.

Arama görünürlüğü önemli olan sayfalarda teknik altyapı ile içerik yapısı birlikte düşünülmelidir. SEO uyumlu web tasarımı yaklaşımında başlık hiyerarşisi, sunucuda üretilen HTML ve hız aynı anda ele alınır.