React ile Modern Web Geliştirme: Komple bir Başlangıç Kılavuzu

React, 2013 yılında Facebook tarafından geliştirilen ve hızla popülerleşen bir JavaScript kütüphanesidir. Component-based (bileşen tabanlı) mimarisi, sanal DOM ve one-way data flow (tek yönlü veri akışı) gibi özellikleriyle modern web geliştirmesinin standart haline gelmiştir.

Neden React?

React’ın popüler olmasının temel nedenleri:

  • Component-Based: Kodun yeniden kullanılabilir ve modüler
  • Sanal DOM: Performans artışı
  • One-Way Data Flow: Veri akışı öngörülebilir
  • Zengin Ekosistem: Redux, Router, Next.js gibi araçlar
  • Aktif Topluluk: Sürekli güncellemeler ve destek
// Basit bir React component
import React, { useState } from 'react';

function Sayaç() {
    const [sayi, setSayi] = useState(0);
    
    return (
        <div className="sayaç">
            <h2>Sayaç: {sayi}</h2>
            <button onClick={() => setSayi(sayi + 1)}>
                Artır
            </button>
            <button onClick={() => setSayi(sayi - 1)}>
                Azalt
            </button>
        </div>
    );
}

export default Sayaç;

Temel Kavramlar

JSX

JSX, JavaScript’e benzeyen bir sözdizimidir. HTML ve JavaScript’in birleşimidir.

const element = <h1>Merhaba, React!</h1>;

Components

React uygulaması componentlerden oluşur. Her component kendi durumunu ve render mantığını yönetir.

Props

Props, componentlere veri geçirmek için kullanılır.

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

// Kullanımı
<Merhaba isim="Ahmet" />

State

Component’in içindeki veridir. Değiştiğinde component tekrar render edilir.

const [yazi, setYazi] = useState('Merhaba');

Hooks

React 16.8’den sonra gelen hooks, function componentlerde state ve lifecycle metodları kullanmamızı sağlar.

useState

Component içinde state yönetimi için kullanılır.

useEffect

Side effects (yani component render olduktan sonra yapılacak işler) için kullanılır.

import { useState, useEffect } from 'react';

function KullaniciVerisi() {
    const [kullanici, setKullanici] = useState(null);
    const [yükleniyor, setYükleniyor] = useState(true);
    
    useEffect(() => {
        async function veriCek() {
            const cevap = await fetch('/api/kullanici');
            const veri = await cevap.json();
            setKullanici(veri);
            setYükleniyor(false);
        }
        
        veriCek();
    }, []); // Boş array = sadece bir kez çalışır
    
    if (yükleniyor) return <div>Yükleniyor...</div>;
    return <div>{kullanici.adi}</div>;
}

Proje Kurulumu

Create React App (CRA)

npx create-react-app benim-app
cd benim-app
npm start

Vite (Modern Alternatif)

npm create vite@latest benim-app -- --template react
cd benim-app
npm install
npm run dev

Best Practices

Component Splitting

Büyük componentleri daha küçük parçalara bölün.

Custom Hooks

Mantığı componentlerden ayırın.

function useKullanici(id) {
    const [kullanici, setKullanici] = useState(null);
    const [yükleniyor, setYükleniyor] = useState(true);
    
    useEffect(() => {
        fetch(`/api/kullanici/${id}`)
            .then(res => res.json())
            .then(data => {
                setKullanici(data);
                setYükleniyor(false);
            });
    }, [id]);
    
    return { kullanici, yükleniyor };
}

Performance Optimization

  • React.memo ile unnecessary render’ları önle
  • useMemo ve useCallback ile expensive hesaplamaları optimize et

“React öğrenmesi kolay, ustalaşması zor bir kütüphanedir.” - React Dokümantasyonu

Ekosistem

State Management

  • Redux: Global state management
  • Zustand: Daha modern alternatif
  • Context API: Built-in solution

Routing

  • React Router: Sayfa arası geçişler
  • Next.js: Full-stack framework

Styling

  • Tailwind CSS: Utility-first CSS
  • Styled Components: CSS-in-JS
  • CSS Modules: Scoped CSS

Öğrenme Yolu

  1. Temel JavaScript öğren
  2. React temellerini hakim ol
  3. Hooks öğren
  4. State management tools
  5. Testing ve deployment

Kaynaklar