React'e İlk Adım: Kod Yazmadan Önce Bilmen Gerekenler

React'in kendi dokümantasyonundan başlayarak temel kavramları öğren.

1. 1
   Temel Bölümleri Oku — React dokümantasyonunun 'Main Concepts' bölümünü sırayla oku. JSX, Components, Props, State konularına özellikle dikkat et.
2. 2
   Her Bölümde Kod Yaz — Okuduğun her konuyu CodeSandbox veya lokal ortamında deneyerek pekiştir. Sadece okumak yetmez.
3. 3
   Hooks Bölümüne Geç — useState, useEffect, useContext gibi temel hook'ları öğren. Her biri için basit örnekler yap.
4. 4
   Advanced Guides'ı İncele — Performance, testing, code splitting gibi konulara göz at ama detaylı çalışma için daha sonra zaman ayır.
5. 5
   Tutorial'ı Tamamla — Resmi 'Tic-tac-toe' tutorial'ını yap. Bu, React düşünce yapısını anlamana yardımcı olacak.

Hazır konfigürasyonla ilk React projeni oluştur ve temel yapıyı öğren.

1. 1
   Node.js ve npm Kur — Node.js'in LTS versiyonunu indir ve kur. Kurulumdan sonra terminalde 'node --version' ve 'npm --version' komutlarıyla kontrol et.
2. 2
   Create React App Çalıştır — Terminalde 'npx create-react-app ilk-projem' komutunu çalıştır. Bu, tüm gerekli dosyaları otomatik oluşturacak.
3. 3
   Proje Yapısını İncele — Oluşan dosyaları incele: public/index.html, src/App.js, src/index.js. Her dosyanın ne işe yaradığını anla.
4. 4
   Development Server'ı Başlat — Proje klasörüne girip 'npm start' komutunu çalıştır. Tarayıcında localhost:3000'de projenin çalıştığını göreceksin.
5. 5
   İlk Değişikliği Yap — src/App.js dosyasını aç ve 'Hello World' yazan kısmı değiştir. Kaydet, tarayıcının otomatik yenilendiğini gör.
6. 6
   Basit Bileşen Oluştur — src klasöründe yeni bir 'Button.js' dosyası oluştur ve basit bir buton bileşeni yaz. App.js'te kullan.

React state yönetimini basit projelerle adım adım öğren.

1. 1
   useState ile Başla — İlk olarak useState hook'unu kullanarak basit state'ler yönet. Örneğin, bir sayaç uygulaması yap.
2. 2
   State'i Props ile Aktar — State'i child component'lere props olarak geçmeyi öğren. Parent'ta tutulan state'i child'da güncellemeyi dene.
3. 3
   useContext Deneyimle — Küçük bir projede useContext kullanarak global state yönet. Theme değiştirme (açık/koyu mod) gibi basit bir senaryo ile başla.
4. 4
   useReducer Öğren — Daha kompleks state'ler için useReducer'ı dene. Alışveriş sepeti gibi state'i anla.
5. 5
   Redux'a Geçiş Yap — Temel state yönetimini öğrendikten sonra Redux'ı incele. Küçük bir projede deneyimle.

Kendi projeni geliştirerek React becerilerini pekiştir.

1. 1
   Proje Fikri Belirle — Yapabileceğin gerçekçi bir proje seç: yemek tarifleri uygulaması, film izleme listesi, kişisel blog gibi.
2. 2
   Component Yapısını Planla — Projenin component yapısını kağıt üzerinde çiz. Hangi component'lar olacak, nasıl ilişkilenecekler?
3. 3
   API Entegrasyonu Yap — Gerçek veri kullanmak için ücretsiz API'lar bul (JSONPlaceholder, TheMovieDB gibi). useEffect ve fetch/axios ile veri çek.
4. 4
   Routing Ekleye — React Router kullanarak sayfalar arası geçiş yap. Ana sayfa, detay sayfası gibi route'lar oluştur.
5. 5
   Styling Yap — CSS Modules, Styled Components veya Tailwind CSS kullanarak tasarım yap. Responsive olmasına dikkat et.
6. 6
   Deploy Et — Netlify veya Vercel kullanarak projeni canlıya al. URL'yi portfolyona ekle.
7. 7
   Geri Bildirim Al — Projeni diğer geliştiricilere göster, feedback al ve geliştirmeye devam et.