ReactJS Rehberi: Modern Frontend Geliştirme Yol Haritası

📚 ReactJS Nedir?

ReactJS, Facebook tarafından geliştirilen ve bakımı yapılan bir kullanıcı ara yüzü kütüphanesidir. Özellikle tek sayfa uygulamalar (SPA) oluşturmak için kullanılır. Bileşen bazlı (component-based) bir yaklaşımla çalışır ve sanal DOM kullanarak performansı optimize eder.

📊 React vs Vue.js vs Angular vs Diğerleri

🛠️ ReactJS Ekosisteminde Temel Araçlar

1. Axios

• HTTP istekleri yapmak için kullanılan bir üçüncü taraf kütüphanedir.
• Fetch'e alternatif, promise tabanlı.
• Otomatik JSON çevirimi, hata yönetimi kolay.

2. Fetch API

• Tarayıcının native HTTP istek yapma yöntemidir.
• Axios'a göre daha "ham" kullanılır.
• Basit kullanımlar için yeterli, ama ileri düzey error handling Axios ile daha rahattır.

3. Zustand

• Çok hafif, basit ama güçlü bir global state management çözümü.
• Redux'a alternatif.
• Hooks yapısında kullanılır, boilerplate kodu yok denecek kadar az.

4. TypeScript (TS) ve TSX

• TypeScript: JavaScript'in tip güvenliği sağlayan sürümü.
• .ts dosyaları: Sadece TypeScript kodu içerir.
• .tsx dosyaları: TypeScript + JSX bileşenlerini içeren dosyalar.
• Daha az hata, daha iyi IDE desteği, daha iyi refactoring.

5. JavaScript (JS)

• ReactJS, temelde vanilla JavaScript + JSX kullanır.
• Ancak projeler büyüdüğünde TypeScript'e geçmek best practice kabul edilir.

🔄 State vs Global State Nedir?

✨ State:

• Bir bileşenin kendi içinde tuttuğu veri.
• Sadece o bileşen etkilenir.

const [count, setCount] = useState(0);

📈 Global State:

• Tüm uygulama genelinde erişilebilen veri.
• Birden fazla bileşenin erişmesi gerekiyorsa kullanılır.
• Örnek: Kullanıcı bilgisi, tema ayarı.

Yönetim Araçları: Context API, Redux, Zustand, Recoil.

🗺️ React Router

• React uygulamaları içinde sayfalar arası geçiş sağlar.
• Tek sayfa uygulamada URL değiştirir ama tam sayfa yenilemesi olmaz.
• Nested routes, dynamic routes, protected routes gibi güçlü özellikleri vardır.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

📅 Devam Etmek İçin Öneriler

• Component yapısı ve props kavramını çok iyi öğren.
• Hooks (useState, useEffect, useContext) konularını kavra.
• TypeScript ile projeler geliştir.
• Zustand veya Redux gibi global state yönetimlerini incele.
• React Router kullanarak routing mantığını çöz.
• Axios veya Fetch ile API türü HTTP istekleri yapmayı öğren.
• Projelere SSR (Server Side Rendering) için Next.js girişi yapabilirsin.

🔧 İleri Seviye React Proje Kurulumu ve Yapısı

1. Yeni Proje Başlat

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm install axios zustand react-router-dom

2. Temiz Klasör Yapısı

src/
├── assets/
├── components/
├── hooks/
├── layouts/
├── pages/
├── routes/
├── services/
├── stores/
├── types/
├── utils/
└── App.tsx
└── main.tsx

3. Axios Service Katmanı

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

export default api;

4. Zustand Global State

import { create } from 'zustand';

interface UserState {
  name: string;
  setName: (name: string) => void;
}

export const useUserStore = create<UserState>((set) => ({
  name: '',
  setName: (name) => set({ name }),
}));

5. React Router Kullanımı

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

🌟 Final Tavsiyeler

• TypeScript kullan.
• Axios interceptor ayarla.
• Zustand ile atomic state yönet.
• Lazy loading uygula.
• Hook'lar geliştir.

Hazır mısın? 🚀 Artık frontend geliştirmede yeni bir seviyeye çıkıyorsun!