1. "Öğrenecekleriniz" Bölümünün Açıklaması

Bu kursta, modern web uygulamaları geliştirmek için günümüzde en çok tercih edilen teknolojileri öğreneceksiniz. Eğitim, temel seviyeden başlayarak ileri seviye mimarilere kadar uzanıyor. İşte bu bölümde yer alan başlıkların detaylı açıklamaları:

• Sıfırdan React ile Uygulama Geliştirme: React kütüphanesinin temel mantığını, web sayfalarını nasıl dinamik hale getirdiğini ve sıfırdan bir projeye nasıl başlanacağını öğreneceksiniz.

• State Management (Durum Yönetimi) Mantığı: Bir uygulamadaki verilerin (örneğin kullanıcı girişi, sepet bilgisi) bileşenler arasında nasıl aktarıldığını ve kontrol edildiğini kavrayacaksınız.

• Redux Toolkit Kullanımı: Büyük ve karmaşık uygulamalarda, tüm sayfaların ortaklaşa kullandığı verileri tek bir merkezden (Store) yönetmeyi öğreneceksiniz.

• Material UI Kütüphanesi Kullanımı: Google'ın Material Design standartlarına uygun, hazır ve şık tasarım bileşenlerini (butonlar, formlar, menüler) projenize eklemeyi göreceksiniz.

• Formik-YUP ile Form Doğrulama: Kullanıcı kayıt veya giriş formlarında, e-posta formatı kontrolü ya da şifre uzunluğu gibi kuralları kolayca koymayı ve yönetmeyi öğreneceksiniz.

• TypeScript ile Tip Yönetimi: JavaScript diline katı kurallar ekleyerek kod yazarken hata yapmanızı engelleyen, büyük projelerde güvenliği artıran TypeScript yapısını projelere entegre edeceksiniz.

• Component (Bileşen) Yapısı: React'ın en güçlü yanı olan, bir web sayfasını küçük parçalara (Header, Footer, Kartlar) bölerek tekrar tekrar kullanabilme mantığını öğreneceksiniz.

• React-Router-Dom: Web sitenizde sayfa yenilenmeden "Hakkımızda", "İletişim" veya "Ürün Detay" gibi farklı sayfalara (rotalara) geçiş yapmayı öğreneceksiniz.

• Firebase Kullanımı: Google'ın sunduğu bu bulut sistemi sayesinde, kendi arka plan (backend) kodunuzu yazmadan kullanıcı kayıt, giriş ve çıkış işlemlerini yapmayı öğreneceksiniz.

2. Kurs Konularının Detaylı İncelemesi, Örnekler ve Uygulamalar

Giriş & JSX Yapısı

React, web arayüzleri oluşturmak için kullanılan bir kütüphanedir. JSX (JavaScript XML) ise, JavaScript dosyalarının içinde doğrudan HTML benzeri kodlar yazmamızı sağlar. JSX sayesinde arayüz tasarlamak çok daha hızlı ve kolay hale gelir.

• Uygulama Örneği: JSX içinde bir değişkeni ekrana yazdırmak.

import React from 'react';

function App() {
  const kullaniciAdi = "Ahmet";
  const yas = 10;

  return (
    <div>
      <h1>Merhaba, {kullaniciAdi}!</h1>
      <p>Yaşınız: {yas}</p>
      <p>Gelecek yıl yaşınız: {yas + 1}</p>
    </div>
  );
}

export default App;

Component (Bileşen) ve Props Yapısı

Component, bir web sayfasındaki bağımsız, tekrar kullanılabilir arayüz parçalarıdır. Props ise, bu parçalara dışarıdan veri göndermek için kullanılan parametrelerdir.

• Uygulama Örneği: Bir ürün kartı bileşeni oluşturup, bu bileşene Props ile farklı ürün bilgileri göndermek.

// UrunKarti adında bir bileşen (Component) oluşturuyoruz
function UrunKarti(props) {
  return (
    <div style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>
      <h3>{props.urunAdi}</h3>
      <p>Fiyat: {props.fiyat} TL</p>
    </div>
  );
}

// Ana uygulama içinde bu bileşeni farklı verilerle (Props) kullanıyoruz
function App() {
  return (
    <div>
      <h2>Alışveriş Listesi</h2>
      <UrunKarti urunAdi="Mavi Tişört" fiyat={250} />
      <UrunKarti urunAdi="Spor Ayakkabı" fiyat={1200} />
    </div>
  );
}

export default App;

Hooks (useState ve useEffect)

• useState: React'te dinamik olarak değişen ve değiştiğinde sayfanın yeniden çizilmesini (render) sağlayan verileri tutar.

• useEffect: Sayfa ilk açıldığında veya belirli bir veri değiştiğinde otomatik olarak çalışmasını istediğimiz kodları (örneğin internetten veri çekme) buraya yazarız.

• Uygulama Örneği: Sayıcı uygulaması ve sayfa ilk açıldığında ekrana mesaj basma.

import React, { useState, useEffect } from 'react';

function SayacUygulaması() {
  // sayi adında bir durum (state) oluşturduk, ilk değeri 0
  const [sayi, setSayi] = useState(0);

  // Sayfa ilk yüklendiğinde bir kere çalışır
  useEffect(() => {
    console.log("Sayac uygulaması başarıyla yüklendi!");
  }, []);

  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <h1>Sayaç: {sayi}</h1>
      <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
      <button onClick={() => setSayi(sayi - 1)}>Azalt</button>
    </div>
  );
}

export default SayacUygulaması;

Axios ile HTTP İstekleri (GET, POST, PUT, DELETE)

Uygulamalarımızın dış dünyayla veya bir veri tabanıyla (API) iletişim kurmasını sağlar. Veri çekmek (GET), yeni veri eklemek (POST), veriyi güncellemek (PUT) ve silmek (DELETE) için Axios kütüphanesi kullanılır.

• Uygulama Örneği: İnternetten (sahte bir API'den) kullanıcı listesini çekip ekrana basmak.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function KullaniciListesi() {
  const [kullanicilar, setKullanicilar] = useState([]);

  useEffect(() => {
    // API'den verileri çekiyoruz (GET İsteği)
    axios.get('https://typicode.com')
      .then(response => {
        setKullanicilar(response.data); // Gelen veriyi state içine attık
      })
      .catch(error => {
        console.error("Veri çekilirken hata oluştu:", error);
      });
  }, []);

  return (
    <div>
      <h2>Kullanıcılar</h2>
      <ul>
        {kullanicilar.map(kullanici => (
          <li key={kullanici.id}>{kullanici.name} - {kullanici.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default KullaniciListesi;

Redux Toolkit (Merkezi Durum Yönetimi)

Uygulama büyüdükçe verileri Props ile sürekli oradan oraya taşımak zorlaşır. Redux Toolkit, tüm bileşenlerin doğrudan erişebileceği merkezi bir veri deposu (Store) kurar.

• Uygulama Örneği: Sepete ürün ekleme mantığının Redux ile tasarlanması.

// sepetSlice.js (Redux yapısının kurulması)
import { createSlice } from '@reduxjs/toolkit';

const sepetSlice = createSlice({
  name: 'sepet',
  initialState: { urunler: [], toplamTutar: 0 },
  reducers: {
    sepeteEkle: (state, action) => {
      state.urunler.push(action.payload);
      state.toplamTutar += action.payload.fiyat;
    }
  }
});

export const { sepeteEkle } = sepetSlice.actions;
export default sepetSlice.reducer;

React Router Dom (Sayfa Yönlendirmeleri)

Web sitemizde birden fazla sayfa varmış gibi davranılmasını sağlar. Kullanıcı üst menüden bir linke tıkladığında, sayfa tamamen yenilenmeden sadece o sayfanın içeriği yüklenir.

• Uygulama Örneği: Ana sayfa ve Hakkımızda sayfaları arasında geçiş köprüsü kurmak.

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

function Anasayfa() { return <h1>Ana Sayfaya Hoş Geldiniz</h1>; }
function Hakkimizda() { return <h1>Biz Kimiz? Hakkımızda Sayfası</h1>; }

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Ana Sayfa</Link> | <Link to="/hakkimizda">Hakkımızda</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Anasayfa />} />
        <Route path="/hakkimizda" element={<Hakkimizda />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

TypeScript Entegrasyonu

JavaScript esnek bir dildir fakat bu durum büyük projelerde hata yapmayı kolaylaştırır. TypeScript, yazdığımız verilere zorunlu tipler koyarak hataları daha kod çalışmadan yakalar.

• Uygulama Örneği: Bir fonksiyonun alacağı parametrelerin tipini zorunlu kılmak.

// TypeScript ile bir objenin yapısını (tipini) tanımlıyoruz
interface Görev {
  id: number;
  baslik: string;
  tamamlandi mi: boolean;
}

// Fonksiyonumuzun sadece bu tipte veri kabul etmesini sağlıyoruz
function GorevGoster(yeniGorev: Görev) {
  console.log(`Görev: ${yeniGorev.baslik}, Durum: ${yeniGorev.tamamlandi mi}`);
}

// Doğru Kullanım:
GorevGoster({ id: 1, baslik: "React çalış", tamamlandi mi: false });

// Hatalı Kullanım (TypeScript burada altını kırmızı çizer ve uyarır):
// GorevGoster({ id: "bir", baslik: "Hatalı görev" }); // id numara olmalıydı!

Formik ve YUP ile Form Yönetimi

Kullanıcıların doldurduğu formları kontrol etmek zordur. Formik formun yönetimini kolaylaştırırken, YUP ise doğrulama kurallarını (şifre en az 6 karakter olsun, e-posta geçerli olsun vb.) belirlememizi sağlar.

• Uygulama Örneği: Basit bir kayıt formu kuralları tasarımı.

import * as Yup from 'yup';

// Kayıt formu için geçerlilik kuralları hazırlıyoruz
const kayitSemasi = Yup.object().shape({
  eposta: Yup.string().email('Geçersiz e-posta adresi!').required('E-posta zorunludur!'),
  sifre: Yup.string().min(6, 'Şifre en az 6 karakter olmalıdır!').required('Şifre zorunludur!')
});

Material UI (MUI) Kütüphanesi

Web sitemizi güzelleştirmek için sıfırdan CSS yazmak yerine, Material UI kütüphanesinin hazır, modern ve profesyonel buton, kart, menü (Appbar), kutu (Box) ve tablo bileşenlerini kullanırız.

• Uygulama Örneği: MUI ile şık bir buton ve açılır kapanır Akordeon (Accordion) yapımı mantığı.

import React from 'react';
import Button from '@mui/material/Button';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

function MuiTasarim() {
  return (
    <div style={{ padding: '20px' }}>
      {/* MUI Hazır Butonu */}
      <Button variant="contained" color="primary">
        Kaydet
      </Button>

      {/* MUI Hazır Akordeon Menüsü */}
      <Accordion style={{ marginTop: '20px' }}>
        <AccordionSummary>
          <h3>Sıkça Sorulan Sorular</h3>
        </AccordionSummary>
        <AccordionDetails>
          <p>Bu kurs güncel mi? Evet, 2026 yılına uygundur.</p>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

export default MuiTasarim;

Firebase ile Kullanıcı İşlemleri

Firebase, arka plan kodları yazmadan hazır fonksiyonlar kullanarak güvenli bir şekilde kullanıcı kaydetmeyi (Sign Up), giriş yaptırmayı (Login) ve çıkış yaptırmayı (Sign Out) sağlar.

• Uygulama Örneği: Firebase ile e-posta ve şifre kullanarak giriş yapma fonksiyonu mantığı.

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

function KullaniciGiris(eposta, sifre) {
  signInWithEmailAndPassword(auth, eposta, sifre)
    .then((userCredential) => {
      console.log("Giriş başarılı!", userCredential.user);
      // Başarılı olunca ana sayfaya yönlendirme yapılır
    })
    .catch((error) => {
      console.error("Giriş başarısız! Hata kodu:", error.message);
    });
}

3. Kurstaki Uygulamalı Projeler

Kurs boyunca öğrendiğiniz bu teorik bilgileri pekiştirmek amacıyla sıfırdan şu projeleri geliştireceksiniz:

1. Kurslarım Projesi: Kart tasarımları yapmayı, dizi içerisindeki kurs verilerini map fonksiyonu ile ekranda listelemeyi ve temel komponent mimarisini kavramayı sağlar.

2. Döviz Kuru Projesi: İnternetteki canlı bir döviz API'sine bağlanarak TL, Dolar ve Euro arasında anlık hesaplamalar yapan bir finans aracı geliştirmenizi sağlar.

3. Todo (Yapılacaklar Listesi) Projesi: Listeye yeni bir görev ekleme, listeleme, görevi silme ve güncelleyerek düzenleme (CRUD) adımlarının state ile nasıl yönetildiğini öğretir.

4. Redux + TypeScript Todo Projesi: Aynı yapılacaklar listesi uygulamasını, bu sefer kurumsal standartlara uygun şekilde hem katı tip güvenliği (TypeScript) hem de merkezi yönetim (Redux) kullanarak baştan inşa etmenizi sağlar.

5. Gelişmiş E-Ticaret Projesi: Kursun en büyük projesidir. İçerisinde sepet işlemleri (ürün ekleme/çıkarma), sepet tutarı hesaplama, ürün detay sayfaları, kategoriye göre filtreleme, yerel hafıza (localStorage) kullanımı, Formik form doğrulamaları ve kullanıcı giriş sistemleri barındıran tam donanımlı bir alışveriş sitesi tasarlayacaksınız.

=====================

Kurs içerisindeki projelerin tamamı, modern bir React yazılımcısının gerçek iş hayatında karşılaşacağı senaryolar üzerine kurulmuştur. Bu projeler basitten karmaşığa doğru ilerleyerek bilgileri pekiştirir.

Aşağıda kurstaki 5 projenin de kod mimarisini, klasör yapılarını ve veri akışlarını en ince ayrıntısına kadar inceleyebilirsiniz.

1. Kurslarım Projesi (Temel Mimari)

Bu proje, React'ın en temel yapı taşı olan "Bileşenlere Bölme (Componentization)" ve "Props ile Veri Taşıma" mantığını öğretir.

Klasör Yapısı

src/
├── components/
│   ├── Header.jsx       // Sayfa başlığı ve menü
│   ├── KursListesi.jsx  // Kartları döngüye sokan kapsayıcı
│   └── KursKarti.jsx    // Tek bir kursun tasarımı
├── data.js              // Kurs bilgilerini içeren statik dizi
├── App.jsx              // Ana bileşen
└── index.css            // Kartların yan yana dizilmesini sağlayan CSS

Veri Akışı ve Kod Mantığı

• data.js dosyasında kursların başlığı, açıklaması, fiyatı ve resim yolu gibi bilgileri içeren bir nesne dizisi (Array of Objects) bulunur.

• App.jsx bu veriyi içeri aktarır (import) ve KursListesi bileşenine aktarır.

• KursListesi.jsx içinde JavaScript'in .map() fonksiyonu kullanılarak her bir kurs verisi için bir KursKarti oluşturulur.

• Her karta özel bilgiler Props yoluyla aktarılır. React'ın listeleri hızlı güncelleyebilmesi için her karta benzersiz bir key (id) verilir.

// KursListesi.jsx içindeki temel döngü mimarisi
import KursKarti from './KursKarti';
import { kurslarVerisi } from '../data';

function KursListesi() {
  return (
    <div className="kurs-listesi-container">
      {kurslarVerisi.map((kurs) => (
        <KursKarti key={kurs.id} kursBilgisi={kurs} />
      ))}
    </div>
  );
}

2. Döviz Kuru Projesi (API Entegrasyonu)

Bu proje, dış dünyadaki gerçek bir sunucuyla (API) asenkron iletişim kurmayı ve form girdilerini anlık olarak işlemeyi öğretir.

Klasör Yapısı

src/
├── components/
│   └── DovizCevirici.jsx  // Input ve Select kutularının olduğu ana arayüz
├── App.jsx
└── index.css

Veri Akışı ve Kod Mantığı

• Kullanıcı miktar girdikçe (Miktar Inputu) veya para birimini değiştirdikçe (USD, EUR, TRY) onChange olayları tetiklenir.

• Bu girdiler useState kancaları (hooks) ile hafızada tutulur.

• "Çevir" butonuna basıldığında veya girdiler değiştikçe Axios kütüphanesi devreye girer. Free Currency API adresine bir GET isteği gönderilir.

• Gelen güncel kur oranı, kullanıcının girdiği miktarla çarpılarak sonuç ekranına (useState ile güncellenerek) yansıtılır.

// DovizCevirici.jsx içindeki HTTP istek mimarisi
import { useState } from 'react';
import axios from 'axios';

function DovizCevirici() {
  const [miktar, setMiktar] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('TRY');
  const [sonuc, setSonuc] = useState(0);

  const dovizCevir = async () => {
    // API'ye istek atma ve asenkron bekleme (Await)
    const response = await axios.get(`https://freecurrencyapi.com{fromCurrency}`);
    const karsilikOran = response.data.data[toCurrency];
    setSonuc(miktar * karsilikOran);
  };
}

3. Todo Projesi (Yerel Durum ile CRUD İşlemleri)

Bir yazılımcının mutlaka yapması gereken, veri ekleme, okuma, güncelleme ve silme (CRUD) döngüsünün saf React state (useState) ile yönetildiği projedir.

Klasör Yapısı

src/
├── components/
│   ├── TodoCreate.jsx   // Yeni görev ekleme alanı
│   ├── TodoList.jsx     // Görevleri listeleyen alan
│   └── Todo.jsx         // Tek bir görev satırı (Silme ve Düzenleme butonları içerir)
├── App.jsx              // Tüm görevlerin (todos state) tutulduğu ana merkez
└── index.css

Veri Akışı ve Kod Mantığı

• State Lifting Up (Durumu Yukarı Taşıma): Görevlerin listesi App.jsx içinde tutulur. Çünkü hem ekleme bileşeni (TodoCreate) hem de listeleme bileşeni (TodoList) bu veriye ihtiyaç duyar.

• TodoCreate bileşeni yeni bir görev yazdığında, App.jsx içindeki setTodos fonksiyonunu tetikler ve listeye yeni eleman eklenir.

• Todo.jsx içindeki "Sil" butonuna basıldığında, görevin id değeri App.jsx'e geri gönderilir ve .filter() metodu ile o eleman listeden atılır.

• "Güncelle" butonuna basıldığında satır bir input alanına dönüşür (Edit Modu). Kullanıcı yazıyı değiştirip kaydettiğinde .map() metodu ile ilgili görev güncellenir.

// App.jsx içindeki CRUD fonksiyon mimarisi
const [todos, setTodos] = useState([]);

const todoEkle = (yeniTodo) => {
  setTodos([...todos, yeniTodo]); // State'e güvenli ekleme
};

const todoSil = (id) => {
  setTodos(todos.filter(todo => todo.id !== id)); // Listeden temizleme
};

const todoGuncelle = (id, yeniYazi) => {
  setTodos(todos.map(todo => todo.id === id ? { ...todo, title: yeniYazi } : todo));
};

4. Redux + TypeScript Todo Projesi (Kurumsal Mimari)

Bir önceki Todo projesinin aynısıdır, fakat bu kez kurumsal büyük projelerde kullanılan katı tip güvenliği (TypeScript) ve merkezi depo (Redux Toolkit) mimarisiyle baştan tasarlanır.

Klasör Yapısı

src/
├── app/
│   └── store.ts          // Redux'ın merkezi veri deposu configuration ayarı
├── features/
│   └── todoSlice.ts      // Görevlerin durumları ve fonksiyonları (Slice)
├── types/
│   └── todoTypes.ts      // TypeScript interface ve tiplerinin tanımları
├── components/
│   ├── TodoCreate.tsx
│   ├── TodoList.tsx
│   └── Todo.tsx
├── App.tsx
└── main.tsx

Veri Akışı ve Kod Mantığı

• App.tsx artık kendi içinde bir state tutmaz, içi boşalır ve sadece bileşenleri çağırır. Tüm veriler store.ts dosyasında toplanır.

• todoSlice.ts içinde yapılacak işlerin ilk durumu (initialState) ve bunları değiştirecek fonksiyonlar (reducers) yazılır.

• Bileşenler veriyi çekmek için useSelector kancasını, bir aksiyonu (silme, ekleme) tetiklemek için ise useDispatch kancasını kullanır.

• TypeScript sayesinde fonksiyonların hangi parametreleri alacağı (örneğin id'nin mutlaka number olması gerektiği) zorunlu tutulur.

// todoSlice.ts içindeki TypeScript ve Redux Toolkit mimarisi
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Todo, TodoInitialState } from '../types/todoTypes';

const initialState: TodoInitialState = { todos: [] };

export const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state, action: PayloadAction<Todo>) => {
      state.todos.push(action.payload); // Redux Toolkit arka planda state'i güvenle günceller
    },
    removeTodo: (state, action: PayloadAction<number>) => {
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
    }
  }
});

5. Gelişmiş E-Ticaret Projesi (Tam Donanımlı Üretim Mimarisi)

Kursun tepe noktası olan bu proje; TypeScript, Redux Toolkit, React Router Dom, Material UI, Formik/YUP ve Sahte Sunucu (json-server) teknolojilerinin hepsini tek bir potada eritir.

Klasör Yapısı

src/
├── app/
│   └── store.ts           // Tüm uygulamanın merkezi deposu
├── slices/
│   ├── productSlice.ts    // Ürünleri API'den çekme ve listeleme durumları
│   ├── cartSlice.ts       // Sepete ekleme, çıkarma, localStorage kaydı ve fiyat hesabı
│   └── userSlice.ts       // Giriş yapmış kullanıcı bilgileri (Auth)
├── components/
│   ├── Navbar.tsx         // Kategori menüleri ve sepet ikonu (Badge ile)
│   ├── ProductCard.tsx    // Ürün kartı tasarımı (Material UI Card)
│   └── CartDrawer.tsx     // Ekranın sağından açılan sepet sepet detay paneli (MUI Drawer)
├── pages/
│   ├── Home.tsx           // Ana sayfa (Ürünlerin listelendiği yer)
│   ├── ProductDetail.tsx  // useParams ile ID'ye göre açılan ürün detay sayfası
│   ├── Login.tsx          // Formik/YUP ile hazırlanan giriş sayfası
│   └── Register.tsx       // Kayıt olma sayfası
├── App.tsx                // Rotaların (Routes) tanımlandığı ana dosya
└── main.tsx

Veri Akışı ve İleri Seviye Mantıklar

1. Asenkron Veri Yükleme (AsyncThunk & Loading): Ürünler productSlice.ts içinde createAsyncThunk kullanılarak API'den çekilir. Veri internetten gelirken ekranda dalgalanma efekti (Material UI Skeleton veya Progress) gösterilir. Yükleme bitince (fulfilled) ürünler ekrana basılır.

2. Dinamik Sayfalama (Routing & useParams): Kullanıcı bir ürün kartına tıkladığında useNavigate ile /product-detail/5 gibi bir adrese yönlendirilir. ProductDetail.tsx sayfası açıldığında adresteki 5 sayısını useParams ile yakalar. Redux store'a giderek sadece 5 id'li ürünün detaylarını ekrana basar.

3. Kalıcı Sepet Hafızası (LocalStorage): Kullanıcı bir ürünü sepete eklediğinde cartSlice içindeki sepet dizisine bu ürün eklenir. Aynı zamanda bu fonksiyon sepetin son halini tarayıcının localStorage hafızasına kaydeder. Sayfa yenilense bile sepet sıfırlanmaz, hafızadan geri yüklenir.

4. Güvenli Form Doğrulamaları: Giriş ve kayıt sayfalarında Formik formun gönderilme sürecini kontrol ederken, YUP şeması girilen verileri arka planda denetler. Hatalı e-posta veya kısa şifre girilirse Material UI TextField bileşenlerinin altı anında kızarır ve hata mesajı basılır.

// cartSlice.ts içindeki sepet ve toplam tutar hesaplama mimarisi
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState = {
  cartItems: JSON.parse(localStorage.getItem('sepet') || '[]'), // Hafızadan geri yükleme
  totalAmount: 0
};

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action) => {
      // Ürün zaten sepette var mı kontrolü
      const findItem = state.cartItems.find((item) => item.id === action.payload.id);
      if (findItem) {
        findItem.quantity += 1; // Varsa miktarını arttır
      } else {
        state.cartItems.push({ ...action.payload, quantity: 1 }); // Yoksa yeni ekle
      }
      // Toplam tutarı yeniden hesapla
      state.totalAmount = state.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
      // LocalStorage güncelle
      localStorage.setItem('sepet', JSON.stringify(state.cartItems));
    }
  }
});

=========================================

Bu bölümde, kurumsal seviyedeki bir React + TypeScript + Redux Toolkit projesinin kalbini oluşturan en önemli mimari yapıları üç ana başlık altında en derin detaylarıyla inceleyeceğiz.

1. createAsyncThunk ile API'den Asenkron Veri Çekme Mimarisi

React bileşenleri içinde doğrudan fetch veya axios kullanmak, büyük projelerde kod kalabalığına ve durum yönetiminin (loading, error) dağılmasına neden olur. Redux Toolkit, asenkron (internet üzerinden veri çekme gibi zaman alan) işlemleri merkezi bir standartla yönetmek için createAsyncThunk yapısını sunar.

Mimari Akış Şeması

1. Bileşen (Component): Sayfa açıldığında bir asenkron aksiyon fırlatır (dispatch(getProducts())).

2. Thunk (Ara Yazılım): Arka planda API'ye istek (HTTP Request) atar ve yanıtı bekler.

3. ExtraReducers (Durum Yakalayıcı): İsteğin o anki durumuna göre (pending, fulfilled, rejected) merkezi state yapısını günceller.

Kod Mimarisi (productSlice.ts)

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// 1. Ürün Nesnesinin Tip Tanımı
export interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  image: string;
}

// 2. Product Slice İçin State Tip Tanımı
interface ProductState {
  products: Product[];
  loading: boolean;
  error: string | null;
}

const initialState: ProductState = {
  products: [],
  loading: false,
  error: null,
};

// 3. Asenkron Thunk Aksiyonu Tanımlama
// İlk parametre aksiyonun adıdır, ikinci parametre asenkron fonksiyondur.
export const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async (_, thunkAPI) => {
    try {
      const response = await axios.get<Product[]>('https://fakestoreapi.com');
      return response.data; // Bu veri 'fulfilled' durumunda action.payload olur.
    } catch (error: any) {
      return thunkAPI.rejectWithValue(error.message || 'Ürünler yüklenirken bir hata oluştu.');
    }
  }
);

// 4. Slice Tanımı ve ExtraReducers Kullanımı
export const productSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}, // Senkron aksiyonlar buraya yazılır
  extraReducers: (builder) => {
    builder
      // İstek başladı: Loading durumunu true yap, eski hataları temizle
      .addCase(fetchProducts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // İstek başarıyla tamamlandı: Veriyi kaydet, loading'i kapat
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.loading = false;
        state.products = action.payload; // API'den gelen dizi
      })
      // İstek başarısız oldu: Hatayı kaydet, loading'i kapat
      .addCase(fetchProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as string;
      });
  },
});

export default productSlice.reducer;

Bileşende Kullanımı (Home.tsx)

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts } from '../slices/productSlice';
import { RootState, AppDispatch } from '../app/store';

function Home() {
  // TypeScript projelerinde normal useDispatch yerine özel tiplendirilmiş AppDispatch kullanılır
  const dispatch = useDispatch<AppDispatch>();
  
  // Merkezi depodan verileri çekme
  const { products, loading, error } = useSelector((state: RootState) => state.product);

  useEffect(() => {
    dispatch(fetchProducts()); // Sayfa yüklenince asenkron isteği tetikle
  }, [dispatch]);

  if (loading) return <div>Ürünler yükleniyor (Skeleton Animasyonu)...</div>;
  if (error) return <div>Hata meydana geldi: {error}</div>;

  return (
    <div className="product-grid">
      {products.map((product) => (
        <div key={product.id} className="card">
          <img src={product.image} alt={product.title} />
          <h3>{product.title}</h3>
          <p>{product.price} TL</p>
        </div>
      ))}
    </div>
  );
}

2. Store, Slice ve Dispatch Üçlüsünün İletişim Mantığı

Redux Toolkit mimarisinin temel amacı, verilerin tek yönlü bir akış (Unidirectional Data Flow) içinde hareket etmesini sağlayarak uygulamanın durumunu tahmin edilebilir kılmaktır. Bu üçlü yapı sürekli bir döngü içinde birbiriyle konuşur.

  ┌─────────────────────────────────────────────────────────┐
  │                                                         │
  ▼                                                         │
┌─────────────────┐      Fırlatır (Postacı)      ┌────────────────────┐
│ Bileşen (View)  ├─────────────────────────────>│ Dispatch (Action)  │
└─────────────────┘                              └──────────┬─────────┘
  ▲                                                         │
  │ Güncellenmiş Veriyi Seçer (useSelector)                 │ Taşır ve Tetikler
  │                                                         │
┌─────────────────┐      Durumu Günceller        ┌──────────▼─────────┐
│  Store (Depo)   │<─────────────────────────────┤   Slice (Reducer)  │
└─────────────────┘                              └────────────────────┘

1. Slice (Fabrika Modülü)

Uygulamanın belirli bir özelliğine (örneğin sepet, kullanıcı, ürünler) ait verilerin yapısını ve bu verileri nasıl değiştireceğini bilen akıllı modüllerdir. Hem aksiyon üretir hem de durum yönetimini (Reducer) kendi içinde barındırır.

2. Dispatch (Postacı/Tetikleyici)

Bileşenlerin, merkezi depodaki veriyi doğrudan değiştirme yetkisi yoktur. Bir değişiklik yapmak istediklerinde bir emir (Action) vermek zorundadırlar. dispatch() fonksiyonu, bileşenin verdiği bu emri alır ve Redux mekanizmasına fırlatır.

3. Store (Merkezi Banka/Depo)

Projedeki tüm Slice yapılarının bir araya gelerek oluşturduğu tek ve merkezi veri ambarıdır. Uygulamanın anlık tüm hafızası burada saklanır.

İletişim Örneği (Sepete Ürün Ekleme Akışı)

1. Adım (Bileşen): Kullanıcı "Sepete Ekle" butonuna basar. Bileşen, sepet Slice'ından çıkan addToCart aksiyon emrini oluşturur ve postacıya verir:

   dispatch(addToCart(secilenUrun));

2. Adım (Döngü): dispatch bu emri alır, içinde taşınan veriyi (payload: secilenUrun) ilgili Slice'a ulaştırır.

3. Adım (Slice): Slice içindeki addToCart fonksiyonu tetiklenir. Gelen ürünü mevcut sepet dizisine güvenli bir şekilde ekler.

4. Adım (Store & Re-render): Store güncellenir. Store içindeki sepet verisini useSelector ile dinleyen tüm bileşenler (örneğin sağ üstteki Sepet İkonu Sayısı) otomatik olarak kendini yeniden çizer (render) ve yeni sayıyı gösterir.

3. TypeScript Projelerinde Tip (type) ve Arayüz (interface) Tanımlamaları

TypeScript'te nesnelerin, fonksiyonların ve bileşenlerin hangi veri yapısına sahip olması gerektiğini belirtmek için iki temel araç kullanılır: interface ve type.

interface ve type Arasındaki Farklar Nelerdir?

• interface (Arayüz): Genellikle nesnelerin (object) yapılarını tanımlamak için kullanılır. Nesne tabanlı programlamaya (OOP) uygundur. Sonradan genişletilebilir (Aynı isimle tekrar tanımlanırsa özellikleri birleştirir).

• type (Tip Takısı): Nesnelerin yanı sıra tekil değerler, fonksiyonlar, birlikler (Union) veya ilkel tipler için kullanılır. Sonradan doğrudan genişletilemez, birleştirme operatörleri (& veya |) kullanılır.

Uygulamalı Örnekler

1. interface ile Veri ve Model Yapılarını Tanımlama

Büyük projelerde API modelleri veya kullanıcı verileri için interface tercih edilir. extends anahtar kelimesiyle başka bir arayüzden miras alabilir.

// Temel Kullanıcı Arayüzü
interface User {
  id: string;
  name: string;
  email: string;
}

// Admin Kullanıcısı (Normal kullanıcının tüm özelliklerine sahip + ekstra yetki barındırır)
interface AdminUser extends User {
  role: 'superadmin' | 'manager';
  permissions: string[];
}

// Kullanım Örneği
const aktifYonetici: AdminUser = {
  id: "usr_102",
  name: "Can",
  email: "can@firma.com",
  role: "manager",
  permissions: ["delete_product", "edit_user"]
};

2. type ile Esnek Birlikler (Union) ve Fonksiyon Tipleri Tanımlama

Bir verinin sadece belirli değerleri almasını istiyorsak veya fonksiyonların girdi/çıktı kurallarını belirleyeceksek type kullanmak çok daha pratiktir.

// Birlik (Union) Tipi Tanımlama: Sipariş durumu sadece bu 3 yazıdan biri olabilir
type OrderStatus = 'hazirlaniyor' | 'kargoda' | 'teslim-edildi';

// Fonksiyon Tipi Tanımlama: İki sayı alıp geriye sayı döndüren bir fonksiyon şablonu
type MatematikFonksiyonu = (a: number, b: number) => number;

const toplamaIslemi: MatematikFonksiyonu = (x, y) => x + y;

// Nesne Tiplerini Birleştirme (Intersection)
type Kisi = { isim: string };
type Calisan = Kisi & { maas: number };

const personel: Calisan = {
  isim: "Ayşe",
  maas: 45000
};

3. React Bileşenlerinde Props Tiplendirmesi

Bileşenlerimize dışarıdan veri gönderirken hata yapmamak için Props yapılarını tiplendiririz.

import React from 'react';

// Bileşenin alacağı Props yapısını tanımlıyoruz
interface CustomButtonProps {
  label: string;
  color?: 'primary' | 'secondary'; // Soru işareti (?) bu özelliğin zorunlu olmadığını (opsiyonel) belirtir
  onClick: () => void; // Parametre almayan ve bir şey döndürmeyen fonksiyon tipi
}

// React.FC (Functional Component) kullanarak bileşene tipleri bağlıyoruz
export const CustomButton: React.FC<CustomButtonProps> = ({ label, color = 'primary', onClick }) => {
  return (
    <button className={`btn btn-${color}`} onClick={onClick}>
      {label}
    </button>
  );
};

==========================================================

Bu bölümde, istekleriniz doğrultusunda iki ana aşamayı ele alacağız. İlk olarak, tarayıcıda doğrudan çalıştırabileceğiniz ya da kendi geliştirme ortamınıza yapıştırabileceğiniz, sahte verilerle çalışan eksiksiz bir TypeScript + Redux Toolkit mini projesini tek parça halinde oluşturacağız. Ardından, Formik ve YUP ikilisinin TypeScript projelerinde form doğrulaması için nasıl güvenle kurulduğunu pratik bir örnekle inceleyeceğiz.

1. Tek Parça TypeScript + Redux Toolkit Mini Projesi

Bu kod bloğunda; veri modellerinin tiplerini, merkezi Store ayarını, verileri yöneten Slice yapısını ve bunları kullanan React Bileşenini tek bir dosyada bir araya getirdik. Bu senaryoda sahte bir "Kitaplık Yönetim Sistemi" kurulmuştur.

import React from 'react';
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

// ==========================================
// 1. TYPESCRIPT TIP TANIMLAMALARI (TYPES)
// ==========================================
export interface Kitap {
  id: string;
  baslik: string;
  yazar: string;
  okundu: boolean;
}

interface KitaplikState {
  kitaplar: Kitap[];
}

// Sahte Başlangıç Verileri
const initialState: KitaplikState = {
  kitaplar: [
    { id: '1', baslik: 'Nutuk', yazar: 'Mustafa Kemal Atatürk', okundu: true },
    { id: '2', baslik: 'Küçük Prens', yazar: 'Antoine de Saint-Exupéry', okundu: false },
  ]
};

// ==========================================
// 2. REDUX TOOLKIT SLICE TANIMLAMASI
// ==========================================
const kitaplikSlice = createSlice({
  name: 'kitaplik',
  initialState,
  reducers: {
    // Yeni kitap ekleme aksiyonu (Payload tipi kesin olarak 'Kitap' olmalı)
    kitapEkle: (state, action: PayloadAction<Kitap>) => {
      state.kitaplar.push(action.payload);
    },
    // Kitabın okuma durumunu tersine çevirme aksiyonu (Payload tipi 'string' id)
    durumDegistir: (state, action: PayloadAction<string>) => {
      const kitap = state.kitaplar.find(k => k.id === action.payload);
      if (kitap) {
        kitap.okundu = !kitap.okundu;
      }
    },
    // Kitap silme aksiyonu
    kitapSil: (state, action: PayloadAction<string>) => {
      state.kitaplar = state.kitaplar.filter(k => k.id !== action.payload);
    }
  }
});

// Aksiyonları dışarı aktarıyoruz
export const { kitapEkle, durumDegistir, kitapSil } = kitaplikSlice.actions;

// ==========================================
// 3. CENTRAL STORE (MERKEZİ DEPO) AYARI
// ==========================================
export const store = configureStore({
  reducer: {
    kitaplik: kitaplikSlice.reducer
  }
});

// TypeScript için Store üzerinden otomatik tip çıkarma (Type Inference)
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// ==========================================
// 4. REACT BİLEŞENİ (COMPONENT & UI)
// ==========================================
function KitaplikUygulamasi() {
  // Merkezi depodan verileri TypeScript güvenliği ile çekiyoruz
  const kitaplar = useSelector((state: RootState) => state.kitaplik.kitaplar);
  const dispatch = useDispatch<AppDispatch>();

  // Form girdileri için yerel state
  const [baslik, setBaslik] = React.useState('');
  const [yazar, setYazar] = React.useState('');

  const handleEkle = (e: React.FormEvent) => {
    e.preventDefault();
    if (!baslik.trim() || !yazar.trim()) return;

    // Yeni kitap nesnemizi kurallara (Kitap tipine) uygun oluşturuyoruz
    const yeniKitap: Kitap = {
      id: Date.now().toString(),
      baslik,
      yazar,
      okundu: false
    };

    // Store'a gönderiyoruz (Dispatch)
    dispatch(kitapEkle(yeniKitap));

    // Inputları temizle
    setBaslik('');
    setYazar('');
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', maxWidth: '500px', margin: '0 auto' }}>
      <h2>📚 Küçük Kitaplığım (TS + Redux)</h2>
      
      {/* Kitap Ekleme Formu */}
      <form onSubmit={handleEkle} style={{ marginBottom: '20px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
        <input 
          type="text" 
          placeholder="Kitap Adı" 
          value={baslik} 
          onChange={(e) => setBaslik(e.target.value)}
          style={{ padding: '8px' }}
        />
        <input 
          type="text" 
          placeholder="Yazar Adı" 
          value={yazar} 
          onChange={(e) => setYazar(e.target.value)}
          style={{ padding: '8px' }}
        />
        <button type="submit" style={{ padding: '8px', backgroundColor: '#007bff', color: 'white', border: 'none', cursor: 'pointer' }}>
          Kitaplığa Ekle
        </button>
      </form>

      {/* Kitap Listesi */}
      <ul style={{ listStyleType: 'none', padding: 0 }}>
        {kitaplar.map((kitap) => (
          <li key={kitap.id} style={{ 
            padding: '10px', 
            border: '1px solid #ddd', 
            marginBottom: '8px', 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            backgroundColor: kitap.okundu ? '#e2f0d9' : '#fff'
          }}>
            <div>
              <strong style={{ textDecoration: kitap.okundu ? 'line-through' : 'none' }}>{kitap.baslik}</strong> 
              <span style={{ fontSize: '0.9em', color: '#666' }}> - {kitap.yazar}</span>
            </div>
            <div style={{ display: 'flex', gap: '5px' }}>
              <button onClick={() => dispatch(durumDegistir(kitap.id))} style={{ cursor: 'pointer' }}>
                {kitap.okundu ? 'Okunmadı Yap' : 'Okundu Yap'}
              </button>
              <button onClick={() => dispatch(kitapSil(kitap.id))} style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', cursor: 'pointer' }}>
                Sil
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Uygulamayı Store Provider ile Sarmalayarak Dışarı Açıyoruz
export default function App() {
  return (
    <Provider store={store}>
      <KitaplikUygulamasi />
    </Provider>
  );
}

2. Formik ve YUP ile TypeScript Form Doğrulamaları

TypeScript projelerinde form yapılarının tiplerini belirlemek (Form Girdilerinin Şeması) ve YUP ile girilen verilerin kurallara uyup uymadığını denetlemek, çalışma zamanı (runtime) hatalarını sıfıra indirir.

Aşağıda bir E-Ticaret Giriş (Login) Formunun Formik, YUP ve TypeScript entegrasyonuyla nasıl yazıldığını adım adım inceleyebilirsiniz.

Uygulama Kod Mimarisi (LoginForm.tsx)

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

// 1. FORM VERİLERİNİN TYPESCRIPT TİPİNİ TANIMLIYORUZ
interface LoginValues {
  eposta: string;
  sifre: string;
  beniHatirla: boolean;
}

// 2. YUP İLE DOĞRULAMA KURALLARINI (VALIDATION SCHEMA) BELİRLİYORUZ
// Yup.object().shape yapısı, yukarıdaki LoginValues interface'i ile birebir uyuşmalıdır.
const loginValidationSchema = Yup.object().shape({
  eposta: Yup.string()
    .email('Lütfen geçerli bir e-posta adresi giriniz!')
    .required('E-posta alanı zorunludur!'),
  sifre: Yup.string()
    .min(6, 'Şifreniz en az 6 karakterden oluşmalıdır!')
    .max(20, 'Şifreniz en fazla 20 karakter olabilir!')
    .required('Şifre alanı zorunludur!'),
  beniHatirla: Yup.boolean()
});

export function LoginForm() {
  // 3. FORMIK KANCASINI (HOOK) BAĞLIYORUZ
  // useFormik fonksiyonuna <LoginValues> tip takısını vererek içindeki tüm alanların tip güvenliğini sağlıyoruz.
  const formik = useFormik<LoginValues>({
    initialValues: {
      eposta: '',
      sifre: '',
      beniHatirla: false,
    },
    validationSchema: loginValidationSchema, // YUP şemasını buraya bağlıyoruz
    onSubmit: (values) => {
      // Formda hiçbir hata yoksa bu fonksiyon tetiklenir.
      console.log('Sunucuya gönderilecek güvenli veriler:', values);
      // Burada dispatch(loginUser(values)) gibi işlemler yapılabilir.
    },
  });

  return (
    <div style={{ maxWidth: '400px', margin: '30px auto', padding: '20px', border: '1px solid #ccc', borderRadius: '5px' }}>
      <h3>Giriş Yap</h3>
      
      <form onSubmit={formik.handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
        
        {/* E-posta Alanı */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label htmlFor="eposta">E-posta</label>
          <input
            id="eposta"
            name="eposta"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur} // Kullanıcının inputtan çıkıp çıkmadığını izler
            value={formik.values.eposta}
            style={{ padding: '8px', border: formik.touched.eposta && formik.errors.eposta ? '1px solid red' : '1px solid #ccc' }}
          />
          {/* Eğer kullanıcı inputa dokunmuşsa (touched) ve YUP'ta bir hata varsa mesajı göster */}
          {formik.touched.eposta && formik.errors.eposta ? (
            <span style={{ color: 'red', fontSize: '0.85em', marginTop: '4px' }}>{formik.errors.eposta}</span>
          ) : null}
        </div>

        {/* Şifre Alanı */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label htmlFor="sifre">Şifre</label>
          <input
            id="sifre"
            name="sifre"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.sifre}
            style={{ padding: '8px', border: formik.touched.sifre && formik.errors.sifre ? '1px solid red' : '1px solid #ccc' }}
          />
          {formik.touched.sifre && formik.errors.sifre ? (
            <span style={{ color: 'red', fontSize: '0.85em', marginTop: '4px' }}>{formik.errors.sifre}</span>
          ) : null}
        </div>

        {/* Beni Hatırla Çentatısı (Checkbox) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <input
            id="beniHatirla"
            name="beniHatirla"
            type="checkbox"
            onChange={formik.handleChange}
            checked={formik.values.beniHatirla}
          />
          <label htmlFor="beniHatirla">Beni Hatırla</label>
        </div>

        {/* Gönder Butonu */}
        <button 
          type="submit" 
          style={{ padding: '10px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >
          Giriş Yap
        </button>
      </form>
    </div>
  );
}

Neden Formik + YUP + TypeScript?

1. Tip Koruması: formik.values.eposta yazarken editörünüz otomatik olarak bunu tamamlar. Yanlışlıkla formik.values.email yazarsanız TypeScript kodu derlemez ve sizi erkenden uyarır.

2. Kapsamlı Hata Yönetimi: formik.touched yapısı sayesinde, kullanıcı daha e-posta alanını doldurmadan şifre alanına geçtiğinde "Bu alan zorunludur" gibi sinir bozucu erken uyarıların çıkması engellenir. Uyarılar sadece kullanıcı inputa odaklanıp çıktıktan sonra (Blur aşaması) görünür.

========================================================================

Formik ve YUP ile kurduğumuz güvenli form yapısını Material UI (MUI) bileşenleriyle birleştirmek, projenin arayüz kalitesini kurumsal bir seviyeye taşır. Material UI bileşenleri, Formik'in ürettiği hata mesajlarını ve odaklanma durumlarını (touched, errors) doğrudan destekleyecek şekilde tasarlanmıştır.

Aşağıdaki örnekte, bir önceki LoginForm yapısını MUI'nin Box, TextField, Button, FormControlLabel ve Checkbox bileşenlerini kullanarak tamamen modern ve estetik bir görünüme kavuşturuyoruz.

Modern Material UI + Formik + YUP Giriş Formu (MuiLoginForm.tsx)

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

// Material UI Bileşenlerini İçeri Aktarıyoruz
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';

// 1. TYPESCRIPT TIP TANIMLAMASI
interface LoginValues {
  eposta: string;
  sifre: string;
  beniHatirla: boolean;
}

// 2. YUP GEÇERLİLİK ŞEMASI
const loginValidationSchema = Yup.object().shape({
  eposta: Yup.string()
    .email('Lütfen geçerli bir e-posta adresi giriniz!')
    .required('E-posta alanı zorunludur!'),
  sifre: Yup.string()
    .min(6, 'Şifreniz en az 6 karakterden oluşmalıdır!')
    .required('Şifre alanı zorunludur!'),
  beniHatirla: Yup.boolean()
});

export function MuiLoginForm() {
  // 3. FORMIK ENTEGRASYONU
  const formik = useFormik<LoginValues>({
    initialValues: {
      eposta: '',
      sifre: '',
      beniHatirla: false,
    },
    validationSchema: loginValidationSchema,
    onSubmit: (values) => {
      console.log('Material UI Formundan gelen temiz veriler:', values);
    },
  });

  return (
    // Container: Formu ekranın ortasında, belirli bir genişlikte tutar
    <Container component="main" maxWidth="xs" style={{ marginTop: '50px' }}>
      {/* Paper: Forma gölgeli, şık bir kart görünümü kazandırır */}
      <Paper elevation={3} style={{ padding: '30px', borderRadius: '8px' }}>
        
        {/* Typography: MUI'nin yazı ve başlık bileşenidir */}
        <Typography component="h1" variant="h5" align="center" gutterBottom style={{ fontWeight: 'bold' }}>
          Hesabınıza Giriş Yapın
        </Typography>

        {/* Box: Form elementlerini sarmalayan ve 'sx' veya style propu ile kolayca şekillenen kapsayıcı */}
        <Box component="form" onSubmit={formik.handleSubmit} noValidate style={{ marginTop: '20px' }}>
          
          {/* 
            MUI TextField: Kendi içinde <label>, <input> ve hata mesajı alanını barındırır.
            error: true olursa input kırmızı kenarlıklı olur.
            helperText: Inputun altında gösterilecek kılavuz veya hata yazısıdır.
          */}
          <TextField
            margin="normal"
            required
            fullWidth
            id="eposta"
            label="E-posta Adresi"
            name="eposta"
            autoComplete="email"
            autoFocus
            variant="outlined"
            value={formik.values.eposta}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.eposta && Boolean(formik.errors.eposta)}
            helperText={formik.touched.eposta && formik.errors.eposta}
          />

          <TextField
            margin="normal"
            required
            fullWidth
            name="sifre"
            label="Şifre"
            type="password"
            id="sifre"
            autoComplete="current-password"
            variant="outlined"
            value={formik.values.sifre}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.sifre && Boolean(formik.errors.sifre)}
            helperText={formik.touched.sifre && formik.errors.sifre}
          />

          {/* FormControlLabel: Checkbox gibi elemanları etiket yazısıyla düzgünce hizalar */}
          <FormControlLabel
            control={
              <Checkbox
                id="beniHatirla"
                name="beniHatirla"
                color="primary"
                checked={formik.values.beniHatirla}
                onChange={formik.handleChange}
              />
            }
            label="Beni Hatırla"
            style={{ marginTop: '10px', display: 'block' }}
          />

          {/* Button: MUI'nin hazır animasyonlu ve renk varyantlı buton bileşeni */}
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            style={{ marginTop: '20px', padding: '10px 0', fontSize: '16px' }}
          >
            Giriş Yap
          </Button>

        </Box>
      </Paper>
    </Container>
  );
}

Kodun Sağladığı Mimari Kolaylıklar:

1. Dahili FormHelperText Mantığı: Klasik HTML formlarında hata mesajları için ayrı bir <span> açıp CSS ile kızartmamız gerekiyordu. MUI TextField bileşeninde ise error propuna true değeri geldiği an, helperText içine yazdığınız yazı otomatik olarak kırmızı renge bürünür ve form düzenini bozmadan inputun tam altında hizalanır.

2. Estetik ve UX Gücü: Kullanıcı input alanına tıkladığında (Focus), arayüz etiketi (Label) şık bir animasyonla yukarı doğru kayar (Floating Label). Bu, modern web standartlarında en çok tercih edilen kullanıcı deneyimi (UX) yöntemlerinden biridir.

3. Responsive Düzen: fullWidth ve maxWidth="xs" gibi tanımlamalar sayesinde, formunuz hiçbir ekstra CSS yazmanıza gerek kalmadan hem masaüstü bilgisayarlarda hem de cep telefonlarında ekrana tam uyumlu (mobil uyumlu) şekilde görünür.

************************************************************************************************

Gönderdiğiniz dosya içeriğini istekleriniz doğrultusunda satır satır inceledim. Gereksiz ve anlamsız ifadeleri (dakika, saniye, önizleme, ders yazıları vb.) tamamen temizledim. Müfredat yapısını önce tasarladım, ardından konuları hiç özet yapmadan, detaylı açıklamalar, örnek kodlar ve uygulamalar ile aşağıda hazırladım.

📘 Kurs Tasarımı ve Konu Planı

Müfredat, bir yazılımcının bilmesi gereken en temel konulardan başlayarak ileri seviyeye doğru şu şekilde tasarlanmıştır:

1. Giriş ve Çevre Kurulumu: Kod yazacağımız ortamı tanıma.

2. Değişkenler ve Veri Tipleri: Bilgisayarın hafızasında bilgi saklama.

3. Mantıksal Koşullar: Programın kararlar almasını sağlama.

4. Döngüler (Loops): Tekrarlayan işleri otomatik yapma.

5. Fonksiyonlar (Functions): Kodları paketleme ve tekrar kullanma.

🚀 "Öğrenecekleriniz" Paragrafının Açıklaması

Bu kurs bittiğinde, bilgisayarların nasıl düşündüğünü anlayacaksınız. Kendi kendinize çalışan akıllı programlar yapabileceksiniz. Karşılaştığınız zor bir problemi, küçük parçalara bölerek kodlarla çözmeyi öğreneceksiniz. Kısacası, sadece kod yazmayı değil, bir yazılımcı gibi mantıklı düşünmeyi de kazanacaksınız.

📖 Tüm Konuların Detaylı Açıklamaları, Örnekleri ve Uygulamaları

1. Giriş ve Çevre Kurulumu

Detaylı Açıklama

Yazılım yazmak için bilgisayarımıza özel bir program kurmalıyız. Kodlarımızı yazacağımız bu yere Editör (IDE) denir. Bilgisayarın bizim yazdığımız kodları anlaması için de bir çeviriciye (derleyici/yorumlayıcı) ihtiyacımız vardır.

💻 Örnek

Ekrana yazı yazdırmak için dünyadaki tüm yazılımcılar ilk önce "Merhaba Dünya" yazar.

print("Merhaba Dünya!")

🛠️ Uygulama: Kendini Tanıtan Program

Görev: Ekrana kendi adınızı ve yaşınızı yazdıran bir program yapın.

print("Benim adım Ahmet.")
print("Ben 10 yaşındayım.")
print("Kod yazmayı çok seviyorum!")

2. Değişkenler ve Veri Tipleri

Detaylı Açıklama

Değişkenleri, içine eşya koyduğumuz oyuncak kutularına benzetebiliriz. Kutunun üzerine bir isim yazarız ve içine bir oyuncak koyarız. Bilgisayarda da sayıları, yazıları bu kutularda saklarız.

• Yazı tipi (String): Tırnak içinde yazılır. Örn: "Ayşe"

• Tam Sayı tipi (Integer): Normal sayılardır. Örn: 25

• Ondalıklı Sayı tipi (Float): Virgüllü (noktalı) sayılardır. Örn: 5.5

💻 Örnek

oyuncak_kutusu = "Kırmızı Araba"
yas = 12
boy = 1.45