📚 React Notları ve Proje Örnekleri

Modern React geliştirme için kapsamlı Türkçe kaynak ve örnek projeler.

🎯 İçerik

Bu repo, React öğreniminde ihtiyaç duyacağınız tüm temel konuları ve pratik örnekleri içerir.

📖 Dersler

1. React Temelleri - Component yapısı, JSX temelleri
2. JSX ve Props - Props kullanımı, data aktarımı
3. State ve Events - useState hook'u, event handling
4. useEffect - Side effects, lifecycle
5. Forms ve Validation - Form yönetimi, doğrulama
6. Custom Hooks - Özel hook'lar oluşturma
7. Context API - Global state yönetimi
8. React Router - Sayfa yönlendirme
9. Best Practices - En iyi uygulamalar

💻 Örnek Projeler

React Örnekleri

• 40+ Örnek Kod - Her ders için detaylı örnekler
• Basit componentlerden karmaşık uygulamalara
• Tüm örnekleri ORNEKLER-LISTE.md dosyasında bulabilirsiniz

Final Proje

Kapsamlı bir React uygulaması:

• API entegrasyonu
• Context API kullanımı
• Custom hooks
• React Router implementasyonu

Final Proje Detayları

Next.js Projesi

Modern Next.js uygulaması:

• TypeScript
• Tailwind CSS
• Server Components
• App Router

Next.js Proje Detayları

🚀 Next.js + .NET API Entegrasyonu (YENİ!)

Profesyonel Backend Entegrasyon Projesi:

• ✅ Axios ile API Client katmanı
• ✅ JWT Authentication sistemi
• ✅ CRUD operations (Product yönetimi)
• ✅ Custom Hooks (useAuth, useProducts)
• ✅ TypeScript %100 type-safe
• ✅ Error handling ve interceptors
• ✅ Token refresh mechanism
• ✅ Pagination ve search özellikleri
• ✅ Detaylı 9 bölümlük teorik anlatım
• ✅ Production-ready kod yapısı

Öğrenecekleriniz:

• .NET Web API ile Next.js entegrasyonu
• API Service katmanı nasıl oluşturulur
• Authentication flow nasıl yapılır
• Token management best practices
• Error handling stratejileri
• TypeScript ile tip güvenli geliştirme

📚 Next.js + .NET API Detaylı Rehber | 🎓 Teorik Ders Notları

🚀 Örnek Dersleri

Temel React konularını uygulamalı olarak öğrenmek için:

• 1.Giris - İlk React uygulaması
• 3.props - Props ile çalışma
• 4-useState - State yönetimi

🛠️ Kurulum

Projeleri çalıştırmak için:

# Proje klasörüne gidin
cd React/FINAL-PROJE  # veya istediğiniz proje
# Örnek: cd NEXTJS-DOTNET-API  (Backend entegrasyon projesi için)

# Bağımlılıkları yükleyin
npm install

# Geliştirme sunucusunu başlatın
npm run dev

🔥 Önerilen Öğrenme Sırası:

1. Temel React → React/dersler/ klasöründeki dersler
2. Pratik Örnekler → React/ornekler/ klasöründeki örnekler
3. Final Proje → React/FINAL-PROJE/
4. Next.js Basics → React/NEXTJS-PROJE/
5. Backend Entegrasyon → NEXTJS-DOTNET-API/ 🔥 (İleri seviye)

📋 Gereksinimler

• Node.js (v16 veya üzeri)
• npm veya yarn
• Modern bir web tarayıcısı

🎓 Nasıl Kullanılır?

Başlangıç Seviyesi:

1. İlk olarak dersler klasöründeki notları sırasıyla okuyun
2. Her ders sonrasında ilgili örnek kodları inceleyin
3. Örnek projeleri çalıştırarak pratik yapın
4. Final proje ile öğrendiklerinizi pekiştirin

İleri Seviye (Backend Entegrasyon):

5. NEXTJS-DOTNET-API/DERS-NOTLARI.md dosyasını okuyun
6. API Client yapısını inceleyin
7. Authentication flow'unu öğrenin
8. Pratik projeyi çalıştırarak test edin

🎯 Proje Seviyeleri

Seviye	Proje	Açıklama
🟢 Başlangıç	React Örnekleri	40+ basit örnek
🟡 Orta	Final Proje	Context, Router, Hooks
🟠 İleri	Next.js Projesi	SSR, TypeScript
🔴 İleri+	Next.js + .NET API	Backend entegrasyon, JWT

📝 Özellikler

• ✅ Türkçe kaynak
• ✅ Güncel React (Hooks API)
• ✅ Pratik örnekler
• ✅ Gerçek proje senaryoları
• ✅ Best practices
• ✅ TypeScript örnekleri
• ✅ Next.js + .NET API entegrasyonu
• ✅ Backend entegrasyon rehberi
• ✅ Production-ready kod yapıları

🤝 Katkıda Bulunma

Bu notlar sürekli geliştirilmektedir. Katkılarınızı bekliyorum!

📧 İletişim

Sorularınız için issue açabilirsiniz.

📄 Lisans

Bu proje eğitim amaçlıdır ve özgürce kullanılabilir.

---

Not: Bu repo, React öğrenmek isteyen herkes için hazırlanmıştır. Temel JavaScript bilgisi önerilir.