Sıfırdan İleriye React Eğitimi
Açıklama
Yapay zekamız Billy bu eğitim için konu anlatımları, çalışma programları oluşturabilir, istediğiniz kadar pratik yapabileceğiniz sorular hazırlayabilir.
React ile Modern Web Geliştirme Eğitimi
Geleceğin yazılım dili React’i öğrenmeye hazır mısın?
Bu eğitimle:
Bileşen tabanlı geliştirme, Hook kullanımı, API entegrasyonları, Performans ipuçları gibi konuları sıfırdan ileri seviyeye kadar öğreneceksin.
Uygulamalı projeler, güncel örnekler ve sektörde geçerli en iyi yöntemlerle hazırlanmış bu program sayesinde, kendi web projeni sıfırdan inşa edebilir, iş dünyasında öne çıkabilirsin.
Aktiviteler
Sorbil üzerinden React öğrenmenizi kolaylaştıracak ve eğitim deneyiminizi iyileştirecek, yapabileceğiniz aktiviteler:
1. Proje başlat
`create-react-app` veya `Vite` kullanarak boş bir proje oluştur
App.js içeriğini tamamen silip sıfırdan başla
2. İlk bileşen
Bir `Hello` bileşeni yaz
Props ile isim alıp ekrana `Hello, Ali!` yazsın
3. State kullanımı
Bir sayacı (Counter) useState ile yönet
Artırma ve sıfırlama butonları ekle
4. useEffect pratiği
Sayfa açıldığında console’a “Uygulama başladı” yaz
Bir state değiştiğinde de console’a log yazdır
5. Listeleme
Bir dizi isim (ör. meyveler) tanımla
map() ile listele
Listenin boş olması durumunda “Liste boş” yazdır
6. Koşullu render
Kullanıcının giriş yapıp yapmadığını boolean state ile kontrol et
Giriş yaptıysa ismini göster, yapmadıysa “Giriş yap” butonu göster
7. Basit bir form
Ad soyad inputları olan bir form oluştur
Controlled components kullan
Form submit edildiğinde console.log ile verileri göster
8. Routing
`react-router-dom` ile /home ve /about sayfaları
Menü linkleri
404 Not Found sayfası
9. API çağrısı
JSONPlaceholder’dan veri çek
loading, error durumlarını yönet
Gelen verileri listele
10. CRUD Todo uygulaması
Todo ekle
Tamamlandı / tamamlanmadı durumunu değiştir
Silme işlemi
Local Storage ile verileri kaydet
11. Context API
Basit bir global tema state’i yönet (ör. dark/light)
Bir butonla tema değiştirme örneği
12. useReducer
Todo işlemlerini reducer ile yönet (ekle, sil, tamamla)
13. Basit test
Jest + React Testing Library ile bir butonun çalışıp çalışmadığını test et
14. Animasyon
Framer Motion ile bir bileşene fade-in animasyonu uygula
15. Küçük proje
Kullanıcı kayıt formu
Doğrulama
Kayıt olduktan sonra profil sayfasına yönlendirme
