React Nedir? - React To-Do List Örneği

---

🔷 React Nedir?

React, kullanıcı arayüzleri (UI) oluşturmak için kullanılan, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Özellikle tek sayfa uygulamaları (SPA) oluşturmak için idealdir.

🔧 Temel Özellikleri:

• Bileşen Tabanlı Mimari (Component-Based Architecture): UI'yi küçük, tekrar kullanılabilir parçalara böler.

• Sanal DOM (Virtual DOM): Gerçek DOM'a göre daha hızlıdır. Değişiklikleri önceden hesaplar ve sadece değişen kısmı günceller.

• Tek Yönlü Veri Akışı (One-way Data Binding): Veriler, parent bileşenden child bileşene akar, bu da kodun takibini kolaylaştırır.

• JSX (JavaScript XML): JavaScript içinde HTML benzeri sözdizimi kullanmayı sağlar.

---

🧱 Temel Yapı Taşları

1. Bileşenler (Components)

İki çeşit bileşen vardır:

Fonksiyonel Bileşen:

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

Sınıf Bileşeni:

class Merhaba extends React.Component {
  render() {
    return <h1>Merhaba, React!</h1>;
  }
}

Modern React’te fonksiyonel bileşenler + Hooks tercih ediliyor.

---

2. JSX (JavaScript XML)

const element = <h1>Merhaba Dünya</h1>;

JSX, JavaScript dosyaları içinde HTML benzeri yazmanı sağlar. Aslında bu, JavaScript’e derlenir.

---

3. Props (Properties)

Bir bileşene dışarıdan veri gönderme yöntemidir.

function Selam(props) {
  return <h1>Selam, {props.isim}</h1>;
}

// Kullanımı:
<Selam isim="Ali" />

---

4. State (Durum)

Bileşenin kendi verilerini saklamasını sağlar. Değişince bileşeni yeniden render eder.

import { useState } from 'react';

function Sayaç() {
  const [sayi, setSayi] = useState(0);

  return (
    <div>
      <p>{sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
    </div>
  );
}

---

5. Hooks

Fonksiyonel bileşenlerde state ve yaşam döngüsü gibi özellikleri kullanmanı sağlar. Örneğin:

• useState

• useEffect

• useContext

• useRef
  ve daha fazlası...

---

🌐 React Nerelerde Kullanılır?

• Web uygulamaları (örn. Facebook, Instagram)

• Mobil uygulamalar (React Native ile)

• Masaüstü uygulamalar (Electron + React)

• Admin panelleri

• E-ticaret siteleri

---

⚙️ React Ekosistemi

React'ın yanında genellikle şunlar da kullanılır:

• React Router: Sayfa yönlendirmesi

• Redux, Zustand, Jotai: Global state yönetimi

• Axios, Fetch: API ile veri alışverişi

• Tailwind, Styled Components: Stil ve CSS yönetimi

• Next.js: Sunucu tarafı rendering ve routing için framework

---

🚀 Avantajları

✅ Hızlı ve performanslı
✅ Geniş topluluk ve destek
✅ Yeniden kullanılabilir bileşen yapısı
✅ Modern JavaScript ile uyumlu
✅ Büyük şirketlerde aktif kullanım

---

❗️Dezavantajları

❌ İlk öğrenme eğrisi biraz dik olabilir
❌ Sadece view katmanı için (MVC’de sadece “V”)
❌ SEO açısından SPA'lar sınırlıdır (Next.js ile bu aşılır)

---

Tabii ki! Sana basit ama işlevsel bir örnek uygulama yapayım:
🎯 React ile bir "Yapılacaklar Listesi (To-Do List)" uygulaması

Bu örnek:

• useState hook’u ile state yönetimini,

• JSX ile arayüz oluşturmayı,

• Dinamik listelemeyi ve silme eklemeyi gösteriyor.

---

🧩 Kod – Basit To-Do List

import React, { useState } from 'react';

function TodoApp() {
  const [yeniGorev, setYeniGorev] = useState('');
  const [gorevler, setGorevler] = useState([]);

  const gorevEkle = () => {
    if (yeniGorev.trim() === '') return;

    setGorevler([...gorevler, yeniGorev]);
    setYeniGorev('');
  };

  const gorevSil = (index) => {
    const yeniListe = gorevler.filter((_, i) => i !== index);
    setGorevler(yeniListe);
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>To-Do List</h2>
      <input
        type="text"
        placeholder="Yeni görev ekle"
        value={yeniGorev}
        onChange={(e) => setYeniGorev(e.target.value)}
      />
      <button onClick={gorevEkle}>Ekle</button>

      <ul>
        {gorevler.map((gorev, index) => (
          <li key={index}>
            {gorev}
            <button onClick={() => gorevSil(index)} style={{ marginLeft: 10 }}>
              Sil
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

---

🔧 Nasıl Kullanılır?

1. Bir React projesi oluştur:

   npx create-react-app todo-uygulamasi
   cd todo-uygulamasi
   

2. src klasöründeki App.js dosyasının içeriğini bu kodla değiştir.

3. Uygulamayı başlat:

   npm start
   

---

Bu uygulama geliştirilip şunlar da ekleyebilir:

• ✔ Görevleri tamamlandı olarak işaretleme

• 💾 LocalStorage ile kalıcı hale getirme

• 🎨 TailwindCSS ile şık bir tasarım

• 🔍 Arama & filtreleme