Bu rehber, Web Tasarım Nedir? yazımızın devamı niteliğindedir ve React Web Tasarım çözümümüzün teknik temelini sade bir dille anlatır.

React nedir? En kısa yanıt: web sitenizin arayüzünü parça parça, hızlı ve düzenli biçimde inşa etmenizi sağlayan bir JavaScript kütüphanesidir. Instagram, Netflix ve Airbnb gibi dev platformların arayüzlerinde de kullanılır.

Sağdaki animasyon tam bunu gösterir: bir sayfa tek parça değil; App → Header → Kart → Form gibi bileşenlerden oluşur. Lego mantığı — parçalar tekrar kullanılır, güncellenmesi kolaydır.

30 SANİYEDE ÖZET

React nedir? Meta (Facebook) tarafından geliştirilen, web arayüzü (UI) inşa etmeye yarayan açık kaynak bir JavaScript kütüphanesi. Bileşen mantığı ve Sanal DOM ile hızlı, tekrar kullanılabilir arayüzler üretir. Tam bir framework değildir; routing ve SEO için genellikle Next.js ile birlikte kullanılır.

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:

Bileşen tanımlanır — JSX ile arayüz parçası yazılır (örneğin bir buton veya kart).
Sanal ağaç oluşturulur — React, gerçek DOM'un hafif bir kopyasını bellekte tutar.
State değişir — kullanıcı tıklar, form doldurur; bileşenin iç verisi güncellenir.
Diff hesaplanır — eski ve yeni sanal ağaç karşılaştırılır; yalnızca fark tespit edilir.
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:

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

SANAL DOM · YALNIZCA DEĞİŞEN PARÇA GÜNCELLENİR

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.

2011

Facebook News Feed'de ilk kullanım

→ Devasa veri akışında arayüzü hızlandırmak için Facebook içinde doğar.

2012

Instagram'a entegrasyon

→ Mobil ve web arayüzlerinde kanıtlanır.

2013

Açık kaynak olarak yayınlanır

→ Kaynak kodu dünyaya açılır; milyonlarca geliştirici React kullanır.

2015+

React Native ve ekosistem

→ Aynı mantık mobile taşınır; Next.js, Remix, Gatsby doğar.

2020+

Next.js ana akım olur

→ React + Next.js, kurumsal web projelerinin varsayılanı hâline gelir.

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:

01

Sunucu tarafı render

Google botu geldiğinde sayfa hazır HTML olarak sunulur; boş JavaScript kabuğu beklenmez.

→ Tarama bütçesi verimli kullanılır

02

Statik üretim (SSG)

Blog ve landing sayfaları build anında üretilir; CDN'den milisaniyeler içinde açılır.

→ LCP ve INP skorları yükselir

03

Core Web Vitals

LCP, INP ve CLS metriklerini optimize etmeye doğrudan hizmet eder.

→ Sıralama sinyali güçlenir

04

Semantik HTML & schema

Doğru başlık hiyerarşisi ve schema.org eklemek bileşen yapısıyla kolaylaşır.

→ Zengin snippet ve AIO uyumu

05

Çok dilli SEO

hreflang, locale routing ve canonical yapıları Next.js ile sistematik kurulur.

→ TR/EN siteler tek mimaride

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.

99

Hitit Medya canlı sitesi Google PageSpeed Desktop skoru.

PageSpeed Insights

90+

Tüm React web tasarım projelerinde hedeflediğimiz minimum PageSpeed skoru.

Hitit Medya standart teslimat

20M+

React npm paketinin haftalık indirme hacmi — ekosistem canlılığının göstergesi.

npm trends 2025

#1

State of JS anketlerinde yıllardır en çok kullanılan frontend kütüphanesi.

State of JS 2024

ÜCRETSİZ ARAÇLAR

React sitenizi şimdi test edin

Ajans sunumu değil, veri isteyin. Canlı URL'nizi ücretsiz araçlarımızla ölçebilirsiniz.

01

Teknoloji Tarayıcı

Siteniz React / Next.js mi? Stack tespiti saniyeler içinde.

→ 02

SEO Analizi

Teknik SEO sinyalleri, başlık yapısı ve meta kontrolü.

→ 03

Tasarım Denetimi

Arayüz kalitesi, tipografi ve renk tutarlılığı raporu.

→

META OPEN SOURCE · CLA

Hitit Medya, React CLA ekosisteminde

Hitit Medya, Meta Open Source CLA (Contributor License Agreement) kapsamında React ekosisteminin resmi katkıda bulunanları arasındadır.

React kaynak koduna erişim ve topluluk standartları
Meta mühendisliğiyle aynı teknoloji hattı
Silikon Vadisi seviyesinde kod kalitesi hedefi

React bizim için moda değil; 1999'dan bu yana dijital projelerde güvenle kullandığımız kanıtlanmış altyapıdır.

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.

01

Bileşen mimarisi & JSX

Arayüz parçalama, yeniden kullanılabilir bileşenler ve JSX ile bildirimsel UI — laboratuvar ve proje ödevleriyle uygulamalı.

→ Kurumsal sitelerde modüler kod tabanı

02

State & hooks

useState, useEffect ve bileşenler arası veri akışı; form, liste ve etkileşimli arayüz senaryoları üzerinden.

→ Bakımı kolay, öngörülebilir arayüzler

03

Sanal DOM & performans

Diffing mantığı, render optimizasyonu ve kullanıcı deneyiminde gecikmenin maliyeti — mühendislik perspektifiyle.

→ 90+ PageSpeed hedefinin teorik temeli

04

Proje tabanlı üretim

Bitirme ve staj projelerinde uçtan uca React uygulaması: API entegrasyonu, routing ve teslim disiplini.

→ Müşteri projelerine doğrudan aktarım

Ü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:

EKOSİSTEM

React üzerine kurulu framework'ler

01

Next.js

SSR, SSG, App Router, SEO — kurumsal web'in altın standardı.

→ 02

Remix

Web standartları odaklı full-stack framework.

→ 03

Gatsby

İçerik ağırlıklı projeler için GraphQL destekli SSG.

→ 04

React Native

iOS ve Android — React bilgisiyle mobil geliştirme.

→ 05

Expo

React Native üzerine hızlı prototip ve mağaza dağıtımı.

→ 06

react.dev

Resmi React dokümantasyonu — Türkçe dahil.

→

Firma Sahipleri İçin: React Ne Anlama Geliyor?

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

Hız

Ziyaretçi sayfanızı saniyeler içinde görür; yavaş site kaybedilen müşteri demektir.

SEO

Google'ın performans metriklerine uyum; organik trafik potansiyeli artar.

Güven

Netflix, Airbnb, Meta gibi devlerin kullandığı teknoloji marka algısına yansır.

Ölçek

Kampanya dönemlerinde trafik patlamasına dayanıklı altyapı.

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

React Resmi Dokümantasyonu

Meta tarafından yayımlanan güncel React rehberi; hooks, bileşenler ve best practice.

Next.js

React tabanlı full-stack framework; SSR, SSG ve App Router dokümantasyonu.

Meta Open Source · React

React'ın açık kaynak ekosistemi ve katkıda bulunanlar programı.

State of JS

Yıllık geliştirici anketi; frontend kütüphane kullanım trendleri.

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.

#JSX

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

#JSX

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