Kurulum ve araçlar

Bu Rehber Ne Anlatıyor

React resmi dokümanı tr.react.dev Türkçe ve çok iyi. Bu rehber onu tekrar etmiyor. Her derste konuyu kısaca özetleyip deneyimli mühendislerin önerilerini ve yaygın hataları topluyor. Sürüm: React 19.3 (Eylül 2026).¹

Ön koşul, Web Temelleri'ndeki JavaScript dersi. Kent C. Dodds'un önerisi de aynı: React'e geçmeden önce destructuring, arrow function, map/filter, modüller ve Promise rahat olmalı; React'te karşılaştığınız zorlukların çoğu aslında JavaScript'tir.² Tipler için TypeScript rehberi ayrıca var; buradaki örnekler .tsx ama tip konusuna girmez.

Framework mü, Vite mi?

React ekibi yeni bir uygulamaya bir framework ile başlamayı önerir: Next.js (App Router), React Router (framework modu) ya da mobil için Expo. Framework'ler routing, veri çekme ve server rendering'i hazır getirir ve sunucu olmadan statik site olarak da yayınlanabilir.³

React'in temellerini öğrenmek ya da sunucu gerektirmeyen bir SPA yazmak için Vite yeterlidir. Doküman bunun bir bedeli olduğunu açıkça söyler: routing, veri çekme ve SSR ihtiyacı doğduğunda kendi küçük framework'ünüzü yazmaya başlarsınız.⁴

Bu rehberdeki dersler Vite ile ilerler. Next.js'e özgü konular (Server Components, Server Actions) Next.js rehberinde.

İlk Proje

$ pnpm create vite@latest my-shop -- --template react-ts

cd my-shop
npm install
npm run dev

Vite şablonu React 19.3, TypeScript ve Oxlint ile gelir.⁶ Önemli dosyalar:

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Strict Mode

<StrictMode> yalnızca development'ta çalışan ek kontroller açar. Component'leri iki kez render eder, Effect'leri ve ref callback'lerini bir kez fazladan kurup söker, eski API'leri uyarır.⁷ Amaç, saf olmayan render'ı ve eksik cleanup'ı production'a çıkmadan yakalamaktır. Production build'i etkilemez.

Lint: React Kurallarını Makineye Bırakın

React'in kuralları (Rules of React) çoğu zaman hata vermeden bozulur; uygulama çalışır ama yanlış davranır. Bu yüzden lint şarttır.

Vite şablonundaki Oxlint yalnızca rules-of-hooks kuralını açar.⁶ React ekibinin kendi eklentisi eslint-plugin-react-hooks ise recommended preset'inde React Compiler'ın analizine dayanan kuralları da içerir: render sırasında state değiştirme, Effect içinde senkron setState, render'da ref okuma, component içinde component tanımlama gibi hataları yakalar. Bu kurallar compiler'ı kullanmasanız da çalışır.⁸

Kod Kalitesi rehberindeki ESLint kurulumuna eklentiyi ekleyin:

$ pnpm add -D eslint-plugin-react-hooks

// eslint.config.js
import reactHooks from "eslint-plugin-react-hooks";
import { defineConfig } from "eslint/config";

export default defineConfig([reactHooks.configs.flat.recommended]);

recommended preset'i yeni kurallar eklendikçe güncellenir; kuralları tek tek açmak yerine onu kullanın.⁹

React Compiler ve DevTools

React Compiler, memoization'ı build sırasında otomatik ekler. Vite şablonunda build hızına etkisi yüzünden kapalı gelir.⁶ Vite'ta açmak için:¹⁰

$ pnpm add -D babel-plugin-react-compiler @rolldown/plugin-babel

// vite.config.ts
import babel from "@rolldown/plugin-babel";
import react, { reactCompilerPreset } from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
});

Compiler'ın ne yaptığını ve memo/useMemo ile ilişkisini React'te render performansı dersi anlatıyor.

React Developer Tools tarayıcı eklentisidir. Components sekmesinde ağacı, props'u ve state'i görür, değerleri canlı değiştirirsiniz. Profiler sekmesi render sürelerini ölçer.¹¹

AI ile React Yazarken

Model'ler eski React kodunu çok gördüğü için eski kalıpları önerebilir. React ekibinin react.dev'i yazarken kullandığı agent skill'i bile modele "kendi bilgine şüpheyle yaklaş; çoğu zaman eski ya da yanlış React kalıplarıyla eğitildin" der.¹² Sık görülen eski öneriler:

Üç şey işe yarar:

• Güncel dokümanı bağlama verin. react.dev, agent'lar için bir llms.txt dizini sunar ve her sayfanın sonuna .md eklediğinizde düz Markdown döner (ör. react.dev/learn/you-might-not-need-an-effect.md).¹³

• Lint'i bekçi yapın. Yukarıdaki kurallar AI'ın yazdığı kodu da denetler. Agent'a "commit'ten önce npm run lint çalıştır" deyin.

• Kurallarınızı skill'e yazın. Proje kurallarını ve Vercel'in react-best-practices gibi hazır skill'lerini Skills dersi anlatıyor.

Kendin Dene

• my-shop projesini kurun, App.tsx'te bir metni değiştirin ve sayfanın yenilenmeden güncellendiğini görün.

• eslint-plugin-react-hooks'u ekleyin. App.tsx'e bir component'in içinde ikinci bir component tanımlayın ve lint'in ne dediğini okuyun.

• React DevTools'u kurun, Components sekmesinde App'i seçip state'ini değiştirin.

• Bir AI aracına "Vite ile React projesi kur" deyin. Önerdiği komutu bu dersle karşılaştırın.

Detaylı Öğrenmek İçin

• Resmi doküman: React'in Türkçe dokümanı; "Hızlı Başlangıç" ve "React'te Düşünmek" sayfaları ilk okuma için en iyi yer.¹⁴

• Resmi doküman: "Creating a React App" ve "Build a React App from Scratch" sayfaları; framework ile Vite arasındaki farkı anlatır.³⁴

• Video: React Conf 2025'teki "React and AI" paneli; React ekibi ve araç geliştiricileri AI ile React yazmayı tartışıyor (1. gün yayını).¹⁵

• Yazı: Kent C. Dodds'un React'e başlamadan bilinmesi gereken JavaScript listesi.²