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