CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol
Ücretsiz 4 seviye

React

React 18+ ile JSX, hooks, context, Next.js ve modern React mimarilerini projelerle öğrenin.

React kursu fonksiyonel bileşenler, hooks, context, performans, React Router, Next.js, Server Components ve concurrent features ile tüm seviyeleri kapsar.

  • 252 ders
  • 18 sa 40 dk
  • 11 proje
Ücretsiz başla Müfredatı gör

Hesap gerekmez, hemen başlayabilirsin. İlerlemeni kaydetmek istersen ücretsiz hesap aç

Seviyeler

React kursu dört seviyede sıfırdan uzmanlığa ilerler. İstediğin seviyeden başlayabilirsin.
Seviyeni bilmiyor musun? Seviye testini çöz
Başlangıç

React'in temel taşlarını öğrenirsin: JSX, bileşenler, props, state ve hooks ile gerçek küçük uygulamalar yazarsın.

  • React girişi
  • JSX temelleri
  • Bileşenler
  • Props
84 ders · 6 sa 11 dk Dersleri gör →
Orta

Orta seviye

Custom hook'lar, performans, React Router, error boundary, Suspense, portal ve test ile orta seviye beceriler kazanırsın.

  • Custom hook temelleri
  • İleri custom hook'lar
  • Context derin
  • useReducer kalıbı
80 ders · 5 sa 55 dk Dersleri gör →
İleri

İleri seviye

Next.js, SSR/SSG, API rotaları, veri çekme, state kütüphaneleri, form, animasyon, erişilebilirlik ve CI/CD ile üretim seviyesi uygulamalar yazarsın.

  • Next.js temelleri
  • SSR ve SSG
  • API rotaları
  • Veri çekme
56 ders · 4 sa 9 dk Dersleri gör →
Uzman

Uzman seviye

React Compiler, Server Components, streaming SSR, concurrent features, fiber ve custom renderer ile React'in derinliklerine inersin.

  • React Compiler
  • Server Components
  • Streaming SSR
  • Concurrent features
32 ders · 2 sa 25 dk Dersleri gör →

Yapacağın projeler

Her seviyede öğrendiklerini gerçek bir sayfada birleştirirsin.
Profil kartı Başlangıç · 4 ders Alışveriş listesi Başlangıç · 4 ders Sayaç uygulaması Başlangıç · 4 ders Todo uygulaması Başlangıç · 4 ders Sepet yönetimi Orta · 4 ders Performans projesi Orta · 4 ders Çok sayfalı uygulama Orta · 4 ders Panel projesi Orta · 4 ders Next.js mağaza İleri · 4 ders State projesi İleri · 4 ders Mikro ön yüz ve tasarım sistemi Uzman · 4 ders

Nasıl çalışıyor?

Kısa anlatım

Her ders tek bir kavramı birkaç kısa kartla anlatır; uzun video ya da metin yok.

Hemen dene

Çoktan seçmeli, boşluk doldurma ve eşleştirme sorularıyla öğrendiğini anında pekiştirirsin.

Kendin yaz

Tarayıcıdaki editörde gerçek kod yazarsın; kodun anında kontrol edilir ve sonucu canlı görürsün.

Müfredat

62 grup · 252 ders · 18 sa 40 dk

React'in temel taşlarını öğrenirsin: JSX, bileşenler, props, state ve hooks ile gerçek küçük uygulamalar yazarsın.

1
React girişi
4 ders · 17 dk
  1. 1 React nedir? React'in bileşen tabanlı bir kütüphane olduğunu ve neden web'de bu kadar yaygın olduğunu öğrenirsin. 4 dk
  2. 2 Kurulum ve Vite Vite ile yeni bir React projesi başlatmayı ve proje yapısını tanırsın. 4 dk
  3. 3 İlk bileşen Bir fonksiyonel bileşen yazıp ekranda göstermeyi öğrenirsin. 4 dk
  4. 4 Özet - React girişi Vite projesi açıp ilk bileşenini ekleyerek temel akışı birleştirirsin. 5 dk
2
JSX temelleri
4 ders · 17 dk
  1. 1 JSX nedir? JSX'in HTML benzeri sözdizimiyle arayüz tanımlamayı sağladığını öğrenirsin. 4 dk
  2. 2 İfadeler ve süslü parantez Süslü parantez içinde değişken ve ifade yazmayı öğrenirsin. 4 dk
  3. 3 Öznitelikler ve className JSX'te özniteliklerin nasıl yazıldığını ve class yerine className kullanıldığını öğrenirsin. 4 dk
  4. 4 Özet - JSX temelleri JSX ifade, öznitelik ve stillerini birleştirerek bir karşılama kartı yazarsın. 5 dk
3
Bileşenler
4 ders · 17 dk
  1. 1 Bileşen mantığı Bir bileşenin bir fonksiyon olduğunu ve JSX döndürdüğünü öğrenirsin. 4 dk
  2. 2 Bileşen ağacı Bileşenlerin iç içe çağrılarak bir ağaç oluşturduğunu öğrenirsin. 4 dk
  3. 3 İsimlendirme kuralları Bileşen adlarının büyük harfle başladığını ve neden önemli olduğunu öğrenirsin. 4 dk
  4. 4 Özet - Bileşenler Birkaç küçük bileşeni bir araya getirerek bir sayfa iskeleti kurarsın. 5 dk
4
Profil kartıProje
4 ders · 19 dk
  1. 1 Proje: Profil kartı Profil kartı projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Avatar bileşeni Avatar bileşenini yazıp isim ve rol gösterirsin. 5 dk
  3. 3 Bilgi listesi Profil bilgilerini bir listede toplarsın. 5 dk
  4. 4 Kartı birleştir Avatar ve bilgi listesini bir ProfileCard bileşeninde birleştirirsin. 5 dk
5
Props
5 ders · 21 dk
  1. 1 Props nedir? Props'un bileşenlere dışarıdan veri aktarmanın yolu olduğunu öğrenirsin. 4 dk
  2. 2 Props okuma Props nesnesini destructuring ile almayı öğrenirsin. 4 dk
  3. 3 Children prop children prop'unun bileşen içeriğini aktardığını öğrenirsin. 4 dk
  4. 4 Varsayılan props Bir prop gelmediğinde varsayılan değer kullanmayı öğrenirsin. 4 dk
  5. 5 Özet - Props Props kullanarak yeniden kullanılabilir bir buton bileşeni yazarsın. 5 dk
6
Koşullu render
5 ders · 21 dk
  1. 1 Koşullu render nedir? Bir koşula göre farklı içerik göstermenin mümkün olduğunu öğrenirsin. 4 dk
  2. 2 Ternary operatör Koşul ? doğru : yanlış ile kısa koşullu render yazmayı öğrenirsin. 4 dk
  3. 3 Mantıksal AND (&&) Koşul && öğe desenini ve dikkat noktalarını öğrenirsin. 4 dk
  4. 4 Erken return Bileşenden erken return ile null veya yedek içerik döndürmeyi öğrenirsin. 4 dk
  5. 5 Özet - Koşullu render Giriş yapmış ve misafir kullanıcı için farklı başlık gösteren bir banner yazarsın. 5 dk
7
Liste render
5 ders · 21 dk
  1. 1 Liste render nedir? Bir diziyi JSX içine map ile dönmenin nasıl yapıldığını öğrenirsin. 4 dk
  2. 2 key özniteliği Her liste öğesine benzersiz bir key verilmesinin nedenini öğrenirsin. 4 dk
  3. 3 Diziden bileşen Bir veri dizisinden özel bileşenler üretmeyi öğrenirsin. 4 dk
  4. 4 Filtreleme ve sıralama Diziyi filtreleyip sıralayarak render etmeyi öğrenirsin. 4 dk
  5. 5 Özet - Liste render Ürün listesini fiyatına göre sıralayıp gösteren bir vitrin yazarsın. 5 dk
8
Alışveriş listesiProje
4 ders · 19 dk
  1. 1 Proje: Alışveriş listesi Alışveriş listesi projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Öğe bileşeni Tek bir alışveriş öğesini gösteren ListItem bileşenini yazarsın. 5 dk
  3. 3 Liste gövdesi Öğeleri diziye göre render eden ListBody bileşenini yazarsın. 5 dk
  4. 4 Boş durum Liste boşken yedek mesaj gösteren kodu eklersin. 5 dk
9
Olaylar
4 ders · 17 dk
  1. 1 Olaylar (events) onClick gibi olay özniteliklerine fonksiyon vermeyi öğrenirsin. 4 dk
  2. 2 Olay nesnesi Olay işleyiciye gelen event nesnesini kullanmayı öğrenirsin. 4 dk
  3. 3 Form olayları Input ve form gönderim olaylarını yakalamayı öğrenirsin. 4 dk
  4. 4 Özet - Olaylar Bir butona tıklanınca sayaç artıran basit bir panel yazarsın. 5 dk
10
useState
5 ders · 21 dk
  1. 1 State nedir? State'in bileşenin içinde değişebilen veri olduğunu öğrenirsin. 4 dk
  2. 2 useState çağrısı useState'in değer ve güncelleyici döndürdüğünü öğrenirsin. 4 dk
  3. 3 State güncelleme Setter ile state'i güncellemeyi ve eski değeri kullanmayı öğrenirsin. 4 dk
  4. 4 Birden fazla state Aynı bileşende birden çok useState kullanmayı öğrenirsin. 4 dk
  5. 5 Özet - useState Açılır-kapanır bir panel (accordion) bileşeni yazarak state pratiği yaparsın. 5 dk
11
Sayaç uygulamasıProje
4 ders · 19 dk
  1. 1 Proje: Sayaç uygulaması Sayaç uygulamasının amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Sayı ve buton Sayıyı gösteren ve artıran butonu eklersin. 5 dk
  3. 3 Azaltma ve sıfırlama Azalt ve sıfırla butonlarını eklersin. 5 dk
  4. 4 Sınır kontrolü Sayının sıfırın altına inmesini engellersin. 5 dk
12
Formlar
4 ders · 17 dk
  1. 1 Kontrollü input Input değerini state'e bağlayarak kontrollü bileşen yazmayı öğrenirsin. 4 dk
  2. 2 Form gönderimi Form gönderimini yakalayıp veriyi okumayı öğrenirsin. 4 dk
  3. 3 Birden çok alan Aynı state ile birden çok form alanını yönetmeyi öğrenirsin. 4 dk
  4. 4 Özet - Formlar İsimalanı girişi olan kısa bir iletişim formu yazarsın. 5 dk
13
Stil
4 ders · 17 dk
  1. 1 CSS ile stil className ile dış CSS dosyasından stil vermeyi öğrenirsin. 4 dk
  2. 2 CSS Modules CSS Modules ile yerel sınıf adları oluşturmayı öğrenirsin. 4 dk
  3. 3 Inline stiller style özniteliği ile nesne tabanlı inline stil yazmayı öğrenirsin. 4 dk
  4. 4 Özet - Stil CSS Modules ile stilli bir fiyat etiketi bileşeni yazarsın. 5 dk
14
styled-components
4 ders · 17 dk
  1. 1 styled-components nedir? styled-components ile JS içinde stil yazmanın temelini öğrenirsin. 4 dk
  2. 2 Props ile stil Bir styled bileşene prop geçip stili değiştirmeyi öğrenirsin. 4 dk
  3. 3 Tema kullanımı ThemeProvider ile tema değerlerini tüm bileşenlere aktarmayı öğrenirsin. 4 dk
  4. 4 Özet - styled-components Temalı bir buton ailesi (primary, ghost) yazarsın. 5 dk
15
useReducer
4 ders · 17 dk
  1. 1 useReducer nedir? useReducer ile state güncellemelerini bir fonksiyona taşımayı öğrenirsin. 4 dk
  2. 2 Aksiyon ve state Aksiyon nesneleriyle state geçişlerini tanımlamayı öğrenirsin. 4 dk
  3. 3 useState vs useReducer Hangi durumlarda useReducer'ın tercih edileceğini öğrenirsin. 4 dk
  4. 4 Özet - useReducer Çok adımlı bir sayaç reducer'ı yazıp bileşene bağlarsın. 5 dk
16
useEffect
4 ders · 17 dk
  1. 1 useEffect nedir? useEffect ile bileşen çizildikten sonra yan etkiler yapmayı öğrenirsin. 4 dk
  2. 2 Bağımlılık dizisi Bağımlılık dizisinin ne zaman çalıştırılacağını kontrol ettiğini öğrenirsin. 4 dk
  3. 3 Temizlik fonksiyonu Effect'in return fonksiyonu ile temizlik yapmayı öğrenirsin. 4 dk
  4. 4 Özet - useEffect Bir pencere boyutu değişimini dinleyen bir kanca yazarsın. 5 dk
17
Context
4 ders · 17 dk
  1. 1 Context nedir? Context'in prop drilling yerine veri paylaşmanın yolu olduğunu öğrenirsin. 4 dk
  2. 2 createContext createContext ile bir context ve varsayılan değer yaratmayı öğrenirsin. 4 dk
  3. 3 Provider ve useContext Provider ile veri sağlayıp useContext ile okumayı öğrenirsin. 4 dk
  4. 4 Özet - Context Bir tema (koyu/açık) context'i kurup iki düğmeye bağlarsın. 5 dk
18
useRef
4 ders · 17 dk
  1. 1 useRef nedir? useRef ile yeniden çizim yapmadan değer saklamayı öğrenirsin. 4 dk
  2. 2 DOM erişimi ref ile bir DOM düğümüne erişmeyi öğrenirsin. 4 dk
  3. 3 Zamanlayıcı örneği useRef ile bir zamanlayıcı kimliği saklamayı öğrenirsin. 4 dk
  4. 4 Özet - useRef Bir butona basınca input'a otomatik odaklanan bir form yazarsın. 5 dk
19
Todo uygulamasıProje
4 ders · 19 dk
  1. 1 Proje: Todo uygulaması Todo uygulamasının amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Todo giriş formu Yeni todo eklemek için bir kontrollü form yazarsın. 5 dk
  3. 3 Todo listesi Todo'ları map ile gösterip tamamlama durumunu değiştirirsin. 5 dk
  4. 4 Filtre ve özet Aktif/tamamlanan filtreleri ve kalan sayıyı eklersin. 5 dk
20
Başlangıç finaliFinal
4 ders · 24 dk
  1. 1 Meydan okuma: Hava durumu kartı Bir şehir adı prop alıp sıcaklık ve durum gösteren bileşeni yazarsın. 6 dk
  2. 2 Meydan okuma: Sepet özeti Ürün listesinden toplam fiyatı hesaplayan bir özet bileşeni yazarsın. 6 dk
  3. 3 Meydan okuma: Sayaç ve sıfırlama Artı, eksi ve sıfırla butonlu, alt sınırı olan bir sayacı yazarsın. 6 dk
  4. 4 Meydan okuma: Açılır menü useRef ve state ile dışarı tıklayınca kapanan bir menü yazarsın. 6 dk

Custom hook'lar, performans, React Router, error boundary, Suspense, portal ve test ile orta seviye beceriler kazanırsın.

1
Custom hook temelleri
4 ders · 17 dk
  1. 1 Custom hook nedir? use ile başlayan fonksiyonların tekrar kullanılabilir mantık parçası olduğunu öğrenirsin. 4 dk
  2. 2 useToggle Bir boolean state'i yöneten useToggle hook'unu yazmayı öğrenirsin. 4 dk
  3. 3 usePrevious Bir değerin bir önceki halini saklayan usePrevious hook'unu yazarsın. 4 dk
  4. 4 Özet - Custom hook temelleri Bir form alanı için useField hook'u yazıp iki inputta kullanırsın. 5 dk
2
İleri custom hook'lar
4 ders · 17 dk
  1. 1 useLocalStorage State'i tarayıcı localStorage'ına yazan bir hook yazmayı öğrenirsin. 4 dk
  2. 2 useFetch Veri çekme ve yükleme durumunu yöneten useFetch hook'unu yazarsın. 4 dk
  3. 3 useDebounce Bir değerin değişimini geciktiren useDebounce hook'unu yazarsın. 4 dk
  4. 4 Özet - İleri custom hook'lar useFetch'i useDebounce ile birleştirip arama kutusu yazarsın. 5 dk
3
Context derin
4 ders · 17 dk
  1. 1 Context ayrımı Birden çok context'i ayırarak performansı korumayı öğrenirsin. 4 dk
  2. 2 Context + useReducer Context ile global bir useReducer state yönetmeyi öğrenirsin. 4 dk
  3. 3 Varsayılan değer ve hata Provider dışında kullanımı hata fırlatan bir hook yazmayı öğrenirsin. 4 dk
  4. 4 Özet - Context derin Sepet state'ini context + useReducer ile global yaparsın. 5 dk
4
useReducer kalıbı
4 ders · 17 dk
  1. 1 Reducer kalıbı State, aksiyon ve reducer üçlüsünün nasıl çalıştığını öğrenirsin. 4 dk
  2. 2 Aksiyon tipleri Aksiyon tiplerini sabit olarak tanımlamayı öğrenirsin. 4 dk
  3. 3 Kompozisyon Birden çok reducer'ı birleştirmeyi öğrenirsin. 4 dk
  4. 4 Özet - useReducer kalıbı Çok adımlı bir form wizard reducer'ı yazıp bileşene bağlarsın. 5 dk
5
Sepet yönetimiProje
4 ders · 19 dk
  1. 1 Proje: Sepet yönetimi Sepet yönetim projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Sepet reducer Ekle, çıkar ve temizle aksiyonları olan sepet reducer'ını yazarsın. 5 dk
  3. 3 Sepet context Sepet reducer'ını context ile saran sağlayıcıyı yazarsın. 5 dk
  4. 4 Ürün ekleme UI Ürünleri listeleyip sepete ekleme yapan bir panel yazarsın. 5 dk
6
useMemo
4 ders · 17 dk
  1. 1 useMemo nedir? useMemo ile pahalı bir hesabı önbelleğe almayı öğrenirsin. 4 dk
  2. 2 Bağımlılık kontrolü useMemo'nun ne zaman yeniden hesapladığını öğrenirsin. 4 dk
  3. 3 Dikkat noktaları useMemo'yu aşırı kullanmanın maliyetini öğrenirsin. 4 dk
  4. 4 Özet - useMemo Büyük listeyi filtreleyip sıralayan hesabı useMemo ile sararsın. 5 dk
7
useCallback
4 ders · 17 dk
  1. 1 useCallback nedir? useCallback ile bir fonksiyonu önbelleğe almayı öğrenirsin. 4 dk
  2. 2 Kardeş bileşen yeniden çizimi useCallback'in alt bileşenlerin gereksiz çizimini nasıl engellediğini öğrenirsin. 4 dk
  3. 3 useMemo vs useCallback İki kanca arasındaki farkı öğrenirsin. 4 dk
  4. 4 Özet - useCallback useCallback ile sabit bir handler verip React.memo'lu alt bileşeni korursun. 5 dk
8
React.memo
4 ders · 17 dk
  1. 1 React.memo nedir? React.memo ile bir bileşeni prop değişmediğinde yeniden çizilmekten korumayı öğrenirsin. 4 dk
  2. 2 Prop karşılaştırma React.memo'nun sığ karşılaştırma yaptığını öğrenirsin. 4 dk
  3. 3 Özel karşılaştırıcı İkinci argüman ile özel karşılaştırıcı yazmayı öğrenirsin. 4 dk
  4. 4 Özet - React.memo React.memo'lu bir liste öğesi ve useCallback'li parent yazarsın. 5 dk
9
Performans projesiProje
4 ders · 19 dk
  1. 1 Proje: Performans Performans projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Pahalı hesap useMemo ile pahalı bir istatistik hesabını sararsın. 5 dk
  3. 3 Sabit handler useCallback ile sabit bir seçim handler'ı yazarsın. 5 dk
  4. 4 Memo'lu liste React.memo'lu liste öğesiyle gereksiz çizimi engellersin. 5 dk
10
Router temelleri
4 ders · 17 dk
  1. 1 React Router nedir? React Router ile istemci taraflı sayfa geçişlerini öğrenirsin. 4 dk
  2. 2 Rota tanımlama Routes ve Route ile rota ağacı kurmayı öğrenirsin. 4 dk
  3. 3 Link ve NavLink Link ile sayfa değiştirmeyi ve NavLink ile aktif durumu öğrenirsin. 4 dk
  4. 4 Özet - Router temelleri Ana sayfa ve hakkında sayfası olan iki rotalı bir iskelet kurarsın. 5 dk
11
İleri router
4 ders · 17 dk
  1. 1 URL parametreleri :id gibi parametreleri useParams ile okumayı öğrenirsin. 4 dk
  2. 2 İç içe rotalar Outlet ile iç içe rotaları yönetmeyi öğrenirsin. 4 dk
  3. 3 Programlı yönlendirme useNavigate ile kod içinden sayfa değiştirmeyi öğrenirsin. 4 dk
  4. 4 Özet - İleri router Ürün listesi ve detay sayfaları olan iç içe rotalı bir yapı kurarsın. 5 dk
12
Çok sayfalı uygulamaProje
4 ders · 19 dk
  1. 1 Proje: Çok sayfalı uygulama Çok sayfalı uygulama projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Layout ve router Layout bileşeni ve rota ağacını kurarsın. 5 dk
  3. 3 Liste ve detay Ürün listesi ve detay sayfalarını yazarsın. 5 dk
  4. 4 Yönlendirme ve 404 Sepete git butonu ve 404 sayfasını eklersin. 5 dk
13
Layout bileşenleri
4 ders · 17 dk
  1. 1 Layout deseni children ile sayfa iskeleti kuran bileşenler yazmayı öğrenirsin. 4 dk
  2. 2 Sidebar ve header Sidebar ve header içeren bir sayfa düzeni kurmayı öğrenirsin. 4 dk
  3. 3 Outlet ile layout React Router ile paylaşılan layout kullanmayı öğrenirsin. 4 dk
  4. 4 Özet - Layout bileşenleri Header, sidebar ve ana içerikten oluşan bir DashboardLayout yazarsın. 5 dk
14
Error boundary
4 ders · 17 dk
  1. 1 Error boundary nedir? Bir alt ağaçtaki hataları yakalayan sınıf bileşenini öğrenirsin. 4 dk
  2. 2 Sınıf bileşeni yapısı getDerivedStateFromError ve componentDidCatch kullanmayı öğrenirsin. 4 dk
  3. 3 Yedek arayüz Hata durumunda gösterilen yedek arayüzü yazmayı öğrenirsin. 4 dk
  4. 4 Özet - Error boundary Bir widget'ı saran, hata verince yedek gösteren sınır yazarsın. 5 dk
15
Suspense ve lazy
4 ders · 17 dk
  1. 1 React.lazy nedir? React.lazy ile bileşenleri tembel yüklemeyi öğrenirsin. 4 dk
  2. 2 Suspense sınırı Suspense ile yükleme sırasında yedek göstermeyi öğrenirsin. 4 dk
  3. 3 Çoklu sınır Birden çok Suspense sınırını stratejik yerleştirmeyi öğrenirsin. 4 dk
  4. 4 Özet - Suspense ve lazy Bir ağır modal'ı React.lazy ile yükleyip Suspense ile sararsın. 5 dk
16
Portal
4 ders · 17 dk
  1. 1 Portal nedir? createPortal ile bir bileşeni DOM ağacının başka yerine çizmeyi öğrenirsin. 4 dk
  2. 2 Modal örneği Portal ile taşma sorunları olmayan bir modal yazmayı öğrenirsin. 4 dk
  3. 3 Olay yayılımı Portal'da olayların yine de bileşene ulaştığını öğrenirsin. 4 dk
  4. 4 Özet - Portal Bir onay penceresini portal ile kök dışında çizilen bir modal yaparsın. 5 dk
17
İleri useRef
4 ders · 17 dk
  1. 1 useRef ve hesaplama useRef ile yeniden çizim tetiklemeden değer tutmayı öğrenirsin. 4 dk
  2. 2 Ölçüm yapma ref ile bir elemanın boyutunu ölçmeyi öğrenirsin. 4 dk
  3. 3 forwardRef Bir alt bileşene ref'i forwardRef ile aktarmayı öğrenirsin. 4 dk
  4. 4 Özet - İleri useRef Bir input'u forwardRef ile sarıp parent'tan odaklatırsın. 5 dk
18
RTL testleri
4 ders · 17 dk
  1. 1 React Testing Library RTL ile bileşen testi yazmanın temelini öğrenirsin. 4 dk
  2. 2 render ve screen Bir bileşeni render edip screen ile sorgulamayı öğrenirsin. 4 dk
  3. 3 Olay tetikleme fireEvent ve userEvent ile tıklama ve yazmayı öğrenirsin. 4 dk
  4. 4 Özet - RTL testleri Bir sayaç bileşenini artır butonuna basarak test edersin. 5 dk
19
Panel projesiProje
4 ders · 19 dk
  1. 1 Proje: Panel Panel projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Layout ve rota DashboardLayout ve iç içe rotaları kurarsın. 5 dk
  3. 3 İstatistik widget'ı useMemo ile pahalı istatistik hesabı yapan bir widget yazarsın. 5 dk
  4. 4 Modal ile ekleme Portal ve Suspense ile bir ekleme modalı yazarsın. 5 dk
20
Orta seviye finaliFinal
4 ders · 24 dk
  1. 1 Meydan okuma: useFetch hook Yükleniyor, hata ve veri durumlarını döndüren useFetch hook'unu yazarsın. 6 dk
  2. 2 Meydan okuma: Tema sağlayıcı Context + useReducer ile koyu/açık tema sağlayıcı yazarsın. 6 dk
  3. 3 Meydan okuma: Memo'lu liste React.memo, useMemo ve useCallback ile optimize edilmiş bir filtreli liste yazarsın. 6 dk
  4. 4 Meydan okuma: Rotalı sepet React Router ile ürün listesi, detay ve sepet rotaları yazarsın. 6 dk

Next.js, SSR/SSG, API rotaları, veri çekme, state kütüphaneleri, form, animasyon, erişilebilirlik ve CI/CD ile üretim seviyesi uygulamalar yazarsın.

1
Next.js temelleri
4 ders · 17 dk
  1. 1 Next.js nedir? Next.js'in React tabanlı bir framework olduğunu öğrenirsin. 4 dk
  2. 2 App Router Yeni App Router yapısını ve dosya tabanlı rotaları öğrenirsin. 4 dk
  3. 3 Sayfa ve layout page.tsx ve layout.tsx dosyalarını tanırsın. 4 dk
  4. 4 Özet - Next.js temelleri Ana sayfa ve hakkında sayfası olan bir Next.js iskeleti kurarsın. 5 dk
2
SSR ve SSG
4 ders · 17 dk
  1. 1 SSR nedir? Sunucu taraflı çizim (SSR) kavramını öğrenirsin. 4 dk
  2. 2 SSG nedir? Derleme zamanı çizim (SSG) kavramını öğrenirsin. 4 dk
  3. 3 Server Components Sunucu bileşenlerinin ne olduğunu ve farkını öğrenirsin. 4 dk
  4. 4 Özet - SSR ve SSG Statik bir ana sayfa ve dinamik bir ürün sayfası kurarsın. 5 dk
3
API rotaları
4 ders · 17 dk
  1. 1 API rotaları Next.js'de route handler yazmayı öğrenirsin. 4 dk
  2. 2 GET ve POST GET ve POST isteklerini yanıtlamayı öğrenirsin. 4 dk
  3. 3 JSON yanıtı NextResponse ile JSON döndürmeyi öğrenirsin. 4 dk
  4. 4 Özet - API rotaları Ürünleri listeleyen ve yeni ürün ekleyen bir API yazarsın. 5 dk
4
Next.js mağazaProje
4 ders · 19 dk
  1. 1 Proje: Next.js mağaza Next.js mağaza projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Statik ana sayfa SSG ile ürünleri çeken bir ana sayfa yazarsın. 5 dk
  3. 3 Dinamik ürün sayfası URL parametresiyle ürün detayı gösteren bir sayfa yazarsın. 5 dk
  4. 4 Sepet API'si Sepete ürün ekleyen bir POST API rotası yazarsın. 5 dk
5
Veri çekme
4 ders · 17 dk
  1. 1 SWR ile veri çekme SWR ile önbellekli veri çekme yapmayı öğrenirsin. 4 dk
  2. 2 React Query temel React Query ile sunucu state'i yönetmeyi öğrenirsin. 4 dk
  3. 3 Mutasyonlar useMutation ile veriyi değiştirmeyi öğrenirsin. 4 dk
  4. 4 Özet - Veri çekme SWR ile ürünleri çekip sepete ekleme akışı yazarsın. 5 dk
6
Redux Toolkit
4 ders · 17 dk
  1. 1 Redux Toolkit nedir? Redux Toolkit'in Redux'u kolaylaştırdığını öğrenirsin. 4 dk
  2. 2 createSlice Bir slice ve reducer yazmayı öğrenirsin. 4 dk
  3. 3 configureStore Store'u kurup Provider ile sarmayı öğrenirsin. 4 dk
  4. 4 Özet - Redux Toolkit Bir sepet slice'ı ve store kurup bileşene bağlarsın. 5 dk
7
Zustand
4 ders · 17 dk
  1. 1 Zustand nedir? Zustand'ın basit bir state kütüphanesi olduğunu öğrenirsin. 4 dk
  2. 2 create ile store create ile bir store yazmayı öğrenirsin. 4 dk
  3. 3 Seçici kullanımı Selector ile sadece gerekli state'i alıp çizimi azaltmayı öğrenirsin. 4 dk
  4. 4 Özet - Zustand Bir tema store'u yazıp iki bileşene bağlarsın. 5 dk
8
State projesiProje
4 ders · 19 dk
  1. 1 Proje: State yönetimi State yönetimi projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Redux Toolkit store Bir ürün slice'ı ve store kurarsın. 5 dk
  3. 3 Zustand sepet store Zustand ile bir sepet store'u yazarsın. 5 dk
  4. 4 SWR ile veri çekme SWR ile ürünleri çekip Zustand sepete aktarırsın. 5 dk
9
react-hook-form
4 ders · 17 dk
  1. 1 react-hook-form nedir? react-hook-form ile performanslı form yönetimini öğrenirsin. 4 dk
  2. 2 register ve handleSubmit register ile alan bağlamayı öğrenirsin. 4 dk
  3. 3 Doğrulama (validation) Zod şeması ile form doğrulamayı öğrenirsin. 4 dk
  4. 4 Özet - react-hook-form İsim ve e-posta alanlı doğrulamalı bir kayıt formu yazarsın. 5 dk
10
Framer Motion
4 ders · 17 dk
  1. 1 Framer Motion nedir? Framer Motion ile animasyon yazmanın temelini öğrenirsin. 4 dk
  2. 2 motion bileşeni motion.div gibi bileşenlerle animasyon yapmayı öğrenirsin. 4 dk
  3. 3 Geçişler ve varyantlar variants ile bileşen durumlarını tanımlamayı öğrenirsin. 4 dk
  4. 4 Özet - Framer Motion Bir modal'ın açılıp kapanırken animasyonlu olmasını sağlarsın. 5 dk
11
Erişilebilirlik ve i18n
4 ders · 17 dk
  1. 1 Erişilebilirlik temelleri Erişilebilir bileşenlerin neden önemli olduğunu öğrenirsin. 4 dk
  2. 2 ARIA ve klavye aria-label, aria-expanded ve klavye kullanımını öğrenirsin. 4 dk
  3. 3 i18n ve react-i18next useTranslation ile çok dilli arayüz yazmayı öğrenirsin. 4 dk
  4. 4 Özet - Erişilebilirlik ve i18n Tam erişilebilir ve iki dilli bir açılır menü yazarsın. 5 dk
12
İleri testler
4 ders · 17 dk
  1. 1 Entegrasyon testi Birden çok bileşeni birlikte test etmeyi öğrenirsin. 4 dk
  2. 2 Mock service worker MSW ile API isteklerini taklit etmeyi öğrenirsin. 4 dk
  3. 3 Coverage ölçümü Test kapsamını ölçmeyi ve okumayı öğrenirsin. 4 dk
  4. 4 Özet - İleri testler Bir sepet akışını MSW ile mock'layıp test edersin. 5 dk
13
CI/CD ve izleme
4 ders · 17 dk
  1. 1 CI/CD temelleri Sürekli entegrasyon ve dağıtım akışını öğrenirsin. 4 dk
  2. 2 GitHub Actions React projesi için bir CI iş akışı yazmayı öğrenirsin. 4 dk
  3. 3 Performans izleme Lighthouse ve web vitals ile performansı izlemeyi öğrenirsin. 4 dk
  4. 4 Özet - CI/CD ve izleme Lint, test ve build adımları olan bir iş akışı yazarsın. 5 dk
14
İleri seviye finaliFinal
4 ders · 24 dk
  1. 1 Meydan okuma: Next.js API Ürünleri GET ile döndüren ve POST ile ekleyen bir API rotası yazarsın. 6 dk
  2. 2 Meydan okuma: Zustand store Bir sepet store'u yazıp iki bileşene bağlarsın. 6 dk
  3. 3 Meydan okuma: Form ve doğrulama Zod ile doğrulamalı react-hook-form kayıt formu yazarsın. 6 dk
  4. 4 Meydan okuma: Erişilebilir modal ARIA, klavye ve portal ile tam erişilebilir bir modal yazarsın. 6 dk

React Compiler, Server Components, streaming SSR, concurrent features, fiber ve custom renderer ile React'in derinliklerine inersin.

1
React Compiler
4 ders · 17 dk
  1. 1 React Compiler nedir? Yeni React Compiler'ın otomatik memoizasyon sunduğunu öğrenirsin. 4 dk
  2. 2 Otomatik memoizasyon useMemo ve useCallback'i elle yazmaya gerek kalmadığını öğrenirsin. 4 dk
  3. 3 Uyumluluk kuralları Compiler ile uyumlu kod yazmanın kurallarını öğrenirsin. 4 dk
  4. 4 Özet - React Compiler Compiler ile çalışan, manuel memo olmadan performanslı bir liste yazarsın. 5 dk
2
Server Components
4 ders · 17 dk
  1. 1 Server Components nedir? Sunucu bileşenlerinin sunucuda çizildiğini öğrenirsin. 4 dk
  2. 2 Client ve Server ayrımı 'use client' yönergesini ve ayrım kurallarını öğrenirsin. 4 dk
  3. 3 Veri çekme RSC'de Server bileşeninde doğrudan async veri çekmeyi öğrenirsin. 4 dk
  4. 4 Özet - Server Components Bir server bileşeniyle ürünleri çekip bir client bileşenine aktarırsın. 5 dk
3
Streaming SSR
4 ders · 17 dk
  1. 1 Streaming SSR nedir? Çizimin parça parça akıtılabilmesini öğrenirsin. 4 dk
  2. 2 Suspense ile akıtma Suspense sınırı ile bir bölümü geç çizmeyi öğrenirsin. 4 dk
  3. 3 Edge rendering Edge üzerinde çizim yapmanın farklarını öğrenirsin. 4 dk
  4. 4 Özet - Streaming SSR Bir sayfanın bir bölümünü Suspense ile geç yükleyen yapı kurarsın. 5 dk
4
Concurrent features
4 ders · 17 dk
  1. 1 Concurrent React nedir? Eşzamanlı React'in arka planda çizim yapabildiğini öğrenirsin. 4 dk
  2. 2 useTransition useTransition ile ağır güncellemeleri düşük öncelikli yapmayı öğrenirsin. 4 dk
  3. 3 useDeferredValue useDeferredValue ile bir değerin yeniden çizimini ertelemeyi öğrenirsin. 4 dk
  4. 4 Özet - Concurrent features Bir arama input'unda useDeferredValue ile akıcı liste yazarsın. 5 dk
5
React iç yapıları
4 ders · 17 dk
  1. 1 Reconciler nedir? Reconciler'ın diff alma yaptığını öğrenirsin. 4 dk
  2. 2 Fiber ağacı Fiber düğümlerinin çizim birimi olduğunu öğrenirsin. 4 dk
  3. 3 Commit ve çizim Çizim ve commit aşamalarını ayırt etmeyi öğrenirsin. 4 dk
  4. 4 Özet - React iç yapıları Bir fiber düğümünü elle oluşturup diff mantığını anlatan bir örnek yazarsın. 5 dk
6
Custom renderer
4 ders · 17 dk
  1. 1 Custom renderer nedir? React'ten başka bir hedefe (terminal, canvas) çizim yapabileceğini öğrenirsin. 4 dk
  2. 2 react-reconciler react-reconciler ile bir host config yazmayı öğrenirsin. 4 dk
  3. 3 Host config Temel host config fonksiyonlarını öğrenirsin. 4 dk
  4. 4 Özet - Custom renderer Konsola yazı basan küçük bir custom renderer iskeleti kurarsın. 5 dk
7
Mikro ön yüz ve tasarım sistemiProje
4 ders · 19 dk
  1. 1 Proje: Mikro ön yüz ve tasarım sistemi Mikro ön yüz ve tasarım sistemi projesinin amacını ve adımlarını gözden geçirirsin. 4 dk
  2. 2 Tasarım sistemi çekirdeği Tema ve temel bileşenleri içeren bir tasarım sistemi çekirdeği yazarsın. 5 dk
  3. 3 Server bileşenli sayfa Server bileşeniyle veri çeken bir sayfa yazarsın. 5 dk
  4. 4 Concurrent özellikler useTransition ile ağır filtrelemeyi düşük öncelikli yaparsın. 5 dk
8
Uzman seviye finaliFinal
4 ders · 24 dk
  1. 1 Meydan okuma: Server bileşenli sayfa Server bileşeniyle ürünleri çekip client bileşenine aktaran sayfa yazarsın. 6 dk
  2. 2 Meydan okuma: Concurrent arama useDeferredValue ile akıcı çalışan bir arama yazarsın. 6 dk
  3. 3 Meydan okuma: Streaming sayfa Suspense ile bir bölümü geç yükleyen bir streaming sayfa yazarsın. 6 dk
  4. 4 Meydan okuma: Custom renderer iskeleti react-reconciler ile konsola yazı basan bir iskelet yazarsın. 6 dk

Dersler ücretsiz, hesap ilerlemeni korur

Hesap açmak zorunlu değil. Açarsan kaldığın yerden devam eder, emeğini kaybetmezsin.

  • İlerlemen her cihazda kayıtlı
  • XP ve rozet kazan
  • Günlük seriyi koru
  • Kursu bitirince sertifika al
ücretsiz hesap aç

Sık sorulan sorular

React dersleri ücretsiz mi?

Evet. React kursundaki 252 dersin tamamı ücretsiz ve hesap açmadan başlayabilirsin.

Başlamak için ön bilgi gerekiyor mu?

Hayır. Başlangıç seviyesi sıfırdan anlatır; yalnızca bir tarayıcı yeterli. Konuyu biliyorsan üst seviyelerden başlayabilirsin.

Kursu bitirmek ne kadar sürer?

Dersler 2–8 dakikalık. Tüm kurs yaklaşık 19 saat; günde 15–20 dakikayla birkaç ayda bitirebilirsin.

Sertifika veriliyor mu?

Evet. Ücretsiz hesapla kursu tamamladığında adına doğrulanabilir bir sertifika oluşturulur.

Hesap açmadan ilerlemem kaybolur mu?

Hesapsız ilerlemen yalnızca kullandığın tarayıcıda tutulur. Ücretsiz hesap açtığında bu ilerleme hesabına aktarılır.

Sonraki adım Flutter

Flutter 3.x ile widget'lardan state yönetimine, Firebase ve uzman konulara kadar tüm seviyeler.