class ReactJS Rehberi extends Post

**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 | Özellik | React | Vue.js | Angular | Svelte | Next.js (React tabanlı) | |-------------------------|------------------|------------------|-------------------|------------------|----------------------------| | Öğrenme Eğ risi | Orta | Kolay | Zor | Kolay | Orta | | Yapı | Kütüphane | Framework/Kütüphane | Tam Framework | Compiler Bazlı | Framework | | Performans | 🌟🌟🌟 | 🌟🌟🌟 | 🌟🌟 | 🌟🌟🌟🌟 | 🌟🌟🌟🌟 | | Destek ve Topluluk | 👍👍👍 | 👍👍 | 👍👍👍 | 👍👍 | 👍👍👍 | | Kurumsal Kullanım | Çok Yüksek | Orta | Çok Yüksek | Az | Yüksek | | Şablon Dili | JSX | HTML Tabanlı | HTML + TypeScript | HTML Benzeri | JSX | --- # 🛠️ 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!**