React Nedir? Sade Rehber — Web Tasarım, SEO ve Framework'ler

React Nedir? En Basit Haliyle

Web sitesi dediğinizde çoğu kişi önce görseli düşünür: menü, buton, fotoğraf, form. React tam bu katmanda çalışır — kullanıcının gördüğü ve etkileşime girdiği arayüzü yönetir.

Geleneksel yöntemde bir sayfa tek parça HTML dosyası gibidir; bir yerde değişiklik yapınca her şey birbirine karışabilir. React ise sayfayı bileşenlere böler. Her bileşen bağımsızdır; bir kartı güncellemek tüm sayfayı yeniden çizmez.

React bir "framework" değil, bir kütüphanedir. Sunucu, routing veya SEO altyapısını tek başına sunmaz; arayüz inşa etmeye odaklanır. Güncel projelerde bu boşluğu Next.js doldurur.

React öğrenmek için temel JavaScript bilgisi şarttır: değişkenler, fonksiyonlar, dizi ve nesne mantığı. JSX ve hooks bu temelin üzerine oturur; sıfırdan başlıyorsanız önce JS, ardından React mantıklı bir yol haritasıdır.

React Ne İşe Yarar? Kullanım Alanları

React yalnızca "güzel site" yapmak için değil; etkileşimli, ölçeklenebilir dijital ürünler için tercih edilir:

• Kurumsal web siteleri — Next.js ile SEO uyumlu, çok dilli platformlar
• E-ticaret vitrinleri — hızlı filtreleme, sepet, dinamik ürün kartları
• Admin panelleri ve dashboardlar — yoğun veri, tablo, grafik arayüzleri
• Tek sayfa uygulamaları (SPA) — sayfa yenilemeden akıcı geçişler
• Mobil uygulamalar — React Native ile iOS ve Android
• SaaS ürünleri — abonelik, ayarlar, canlı veri gösterimi

Netflix, Instagram, WhatsApp Web, Airbnb ve Uber gibi platformların arayüz katmanında React veya React türevi teknolojiler aktif kullanılır.

React Nasıl Çalışır? 5 Adımda

"React nasıl çalışır?" sorusunun cevabı, Sanal DOM mantığının etrafında döner. Her etkileşimde şu döngü işler:

1. Bileşen tanımlanır — JSX ile arayüz parçası yazılır (örneğin bir buton veya kart).
2. Sanal ağaç oluşturulur — React, gerçek DOM'un hafif bir kopyasını bellekte tutar.
3. State değişir — kullanıcı tıklar, form doldurur; bileşenin iç verisi güncellenir.
4. Diff hesaplanır — eski ve yeni sanal ağaç karşılaştırılır; yalnızca fark tespit edilir.
5. DOM güncellenir — tarayıcıda sadece değişen düğüm yeniden çizilir; sayfa akıcı kalır.

Sanal DOM: React'ın Gizli Süper Gücü

React'ı hızlı yapan şeylerden biri Sanal DOM (Virtual DOM) mantığıdır. Karmaşık terim; basit anlatım:

1. Kullanıcı bir butona tıkladığında React önce değişikliği sanal hafızada yapar.
2. Eski görünüm ile yenisini karşılaştırır (diffing).
3. Gerçek sayfada sadece değişen milimetrik alanı günceller — tüm sayfayı yeniden çizmez.

Bu mantık Facebook'un reklam panellerindeki performans darboğazını aşmak için doğdu; bugün modern web sitelerinin hızlı hissettirmesinin temel nedenlerinden biridir.

JSX Nedir?

JSX (JavaScript XML), React bileşenlerinde HTML benzeri işaretleme yazmanızı sağlayan bir sözdizimidir. Tarayıcı JSX'i doğrudan anlamaz; build aşamasında (Babel gibi araçlarla) standart JavaScript'e çevrilir.

Aşağıdaki örnek, en basit React bileşenini gösterir — bir başlık döndürür:

function Merhaba() {
  return <h1>Merhaba, React!</h1>;
}

Örnek 1 · Minimal JSX bileşeni

Daha gerçekçi bir senaryo: üst bileşen alt bileşene veri geçirir (props):

function Kart({ baslik, aciklama }) {
  return (
    <article>
      <h2>{baslik}</h2>
      <p>{aciklama}</p>
    </article>
  );
}

function App() {
  return <Kart baslik="React Nedir?" aciklama="Arayuz kutuphanesi" />;
}

Örnek 2 · Props ile veri aktarımı

Detaylı öğrenme için react.dev — JSX rehberi en güncel kaynaktır.

React Hooks: useState ve useEffect

Hooks, fonksiyonel bileşenlerde state ve yan etkileri yönetmenizi sağlar. React 16.8 ile geldi; günümüz projelerinin standartıdır.

useState — bileşen içinde veri tutma

Sayaç, form alanı, açık/kapalı menü gibi değişen değerler için kullanılır:

import { useState } from 'react';

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

  return (
    <button onClick={() => setAdet(adet + 1)}>
      Tiklandi: {adet} kez
    </button>
  );
}

Örnek 3 · useState ile sayaç

useEffect — yan etkiler

API çağrısı, analitik, DOM olayları gibi render sonrası çalışan işler için:

import { useEffect, useState } from 'react';

function KullaniciProfili({ id }) {
  const [veri, setVeri] = useState(null);

  useEffect(() => {
    fetch(`/api/kullanici/${id}`)
      .then((r) => r.json())
      .then(setVeri);
  }, [id]);

  return veri ? <p>{veri.ad}</p> : <p>Yukleniyor...</p>;
}

Örnek 4 · useEffect ile veri çekme

Props ve State Arasındaki Fark

React öğrenirken en sık karışıklık burada olur. Kısa kural: props dışarıdan gelir, state içeriden yönetilir.

Kriter	Props	State
Kaynak	Üst bileşen (parent)	Bileşenin kendisi
Değiştirilebilir mi?	Hayır — salt okunur	Evet — setter ile
Örnek	<Kart baslik="..." />	useState(0)
Amaç	Veri aktarımı	Etkileşimli, değişen UI

React vs Vue vs Angular

"React mi Vue mu?" sorusu projeye göre değişir. Genel karşılaştırma:

Özellik	React	Vue.js	Angular
Tip	UI kütüphanesi	İlerleyen framework	Tam framework
Öğrenme eğrisi	Orta	Kolay–orta	Zor
Performans	Yüksek (Sanal DOM)	Yüksek	Orta–yüksek
SEO (modern stack)	Next.js ile çok güçlü	Nuxt ile güçlü	SSR destekli
İş piyasası	En geniş	Artıyor	Kurumsal ağırlıklı
Geliştiren	Meta	Topluluk + Evan You	Google

Kurumsal web ve SEO odaklı projelerde Hitit Medya olarak React + Next.js hattını tercih ediyoruz; kanıtlanmış performans, geniş geliştirici havuzu ve uzun vadeli bakım avantajı sağlar.

React Nasil Ortaya Cikti? Kisa Bir Hikaye

2010'ların başında Facebook'un arayüzleri o kadar karmaşıklaşmıştı ki küçük bir güncelleme bile tüm sayfayı yavaşlatıyordu. Mühendis Jordan Walke, "sadece değişeni güncelle" fikrini hayata geçirdi.

WordPress'ten Next.js'e: Topluluk Nereye Kaydı?

2010'ların büyük bölümünde web dünyası WordPress etrafında döndü. Mobil trafik arttıkça, Google hız ve deneyimi sıralama sinyali yaptıkça WordPress tabanlı sitelerin sınırları netleşti: ağır eklentiler, yavaş admin, karmaşık özelleştirmeler.

Topluluk eğilimi React ve Next.js mimarisine kaydı. State of JS anketlerinde React yıllardır en çok kullanılan frontend kütüphanesi; npm'de haftalık indirme sayısı 20 milyonun üzerinde.

Bu geçiş moda değil, ölçülebilir bir kaymadır. Web tasarım ajansı seçimi rehberimizde de bu mühendislik eğilimini rakamlarla ele aldık.

React Neden SEO İçin Avantajlı?

"React SEO'ya uygun değildir" söylentisi eski bir genellemeydi. Sorun React'ın kendisi değil, nasıl kullanıldığıdır. Next.js ile birlikte React, arama motorları için ciddi avantajlar sunar:

Hitit Medya'da React: Kanıt ve Ölçüm

Biz React'ı anlatmakla yetinmiyoruz; canlıda ölçüyoruz. Kendi sitemiz ve müşteri projelerimiz bu teknolojinin vitrinidir.

Mühendislik Ekibimiz: Dört Yazılım Mühendisi, İSTÜN ve React

Hitit Medya'nın yazılım çekirdeği, İstanbul Teknoloji ve Sağlık Üniversitesi (İSTÜN) Yazılım Mühendisliği bölümünden mezun dört kıdemli yazılım mühendisinin stratejik ortaklığıyla şekillendi. Ajans modelinde projeyi dışarı devretmek yerine; mimari karar, kod kalitesi ve performans ölçümü doğrudan mühendis masasında alınır.

İSTÜN'deki lisans eğitimimizde React, "bir dersin konusu" olmaktan öte müfredatın merkezinde konumlandı. Modern arayüz geliştirme; JavaScript temeli üzerine bileşen düşüncesi, state yönetimi ve gerçek proje teslimiyle birlikte işlendi. Bu yüzden React bizim için sonradan öğrenilen bir trend değil; üniversite disipliniyle içselleştirilmiş üretim standardıdır.

Üniversite sonrası bu çizgiyi Next.js App Router, TypeScript ve production ortamıyla sürdürdük. Meta Open Source CLA ekosistemine katılım ve canlı projelerdeki PageSpeed ölçümleri, İSTÜN'de başlayan React odağının sahada devam ettiğini gösterir.

Dört mühendisin profillerini, GitHub katkılarını ve imza projelerini Ekip sayfamızda inceleyebilirsiniz.

Bugün ekip olarak React'ı şu alanlarda sistematik kullanıyoruz:

• Web: React + Next.js ile kurumsal siteler, e-ticaret ve çok dilli platformlar
• Mobil: React Native ile iOS ve Android'de tek kod tabanı
• Performans: Virtual DOM, code splitting ve lazy loading bilinçli kullanılır
• Bakım: Bileşen yapısı yıllar sonra bile düşük güncelleme maliyeti sağlar

Popüler React Frameworkleri

React tek başına arayüz kütüphanesidir; routing, SEO ve veri getirme için framework'ler devreye girer:

Firma Sahipleri İçin: React Ne Anlama Geliyor?

Teknik detaya girmeseniz de React tercihinin işinize etkisini net görebilirsiniz:

Yatırım kararı verirken ajansınıza sorun: "Canlı PageSpeed skorunuz kaç? CrUX verilerinizi gösterebilir misiniz?" Hitit Medya olarak bu sorulara rakamlarla yanıt veriyoruz.

Kaynaklar ve Referanslar

Sık Sorulan Sorular

01React bir framework mü, kütüphane mi?

React bir kütüphanedir; yalnızca arayüz katmanına odaklanır. Routing, veri getirme ve SEO için Next.js gibi framework'ler devreye girer.

02JSX nedir?

JSX, JavaScript içinde HTML benzeri işaretleme yazmanızı sağlayan sözdizimidir. Build aşamasında standart JavaScript'e dönüştürülür.

03Props ile state arasındaki fark nedir?

Props üst bileşenden gelir ve değiştirilemez. State bileşenin kendi iç verisidir; kullanıcı etkileşimiyle güncellenir.

04React öğrenmek için JavaScript bilmek gerekir mi?

Evet. Değişkenler, fonksiyonlar, dizi/nesne ve temel DOM bilgisi olmadan React öğrenmek zordur. Önce JS temeli, ardından React mantıklıdır.

05React ile React Native arasındaki fark nedir?

React web arayüzü içindir. React Native aynı bileşen mantığını iOS ve Android native uygulamalara taşır.

06React ile WordPress arasındaki fark nedir?

WordPress hazır tema ve eklenti ekosistemiyle hızlı başlangıç sunar; React size özel arayüz inşa eder. Kurumsal, hızlı ve SEO odaklı projelerde React + Next.js genellikle daha güçlü bir temel sağlar.

07Sanal DOM nedir, neden önemli?

Sanal DOM, React'ın değişiklikleri önce hafızada yapıp yalnızca farkı gerçek sayfaya yansıtmasıdır. Bu sayede arayüz hızlı kalır; Facebook'un reklam panellerindeki performans sorununu çözen temel mekanizmadır.

08React SEO'ya uygun mu?

Next.js gibi modern framework'lerle birlikte evet. Sunucu tarafı render ve statik üretim sayesinde Google botu hazır HTML görür. Hitit Medya projelerinde 90+ PageSpeed hedefi standart teslimatın parçasıdır.

09React öğrenmek ne kadar sürer?

Temel JavaScript bilgisiyle JSX, bileşenler ve hooks için pratikle 2–4 hafta yeterli bir başlangıç sağlar. Next.js ve production kalitesi için birkaç ay sürekli proje deneyimi gerekir.

10Hitit Medya React projelerinde ne kullanıyor?

Next.js App Router, React, TypeScript, Tailwind CSS. Detay: React Web Tasarım.