İçeriğe geç
Codary
Bileşen Tabanlı Arayüz Müfredatı

React ile Modern Arayüz Geliştirme

Dünyanın en popüler arayüz kütüphanesi React'i öğrenin: JSX, bileşenler, props, state, olaylar, liste render, koşullu render, hook'lar, formlar ve uygulamalı projeler.

Orta - İleri 6 modül 21 ders 21 quiz 3 proje Tarayıcıda çalışır

React Kurs Müfredatı

Zorluk dağılımı: Kolay · 4 Orta · 7 Zor · 10
Başlamadan önce oku React nedir, bu kurs nasıl işler?

React, Facebook'un (Meta) geliştirdiği ve dünyada en çok kullanılan arayüz kütüphanesidir. Instagram, Netflix, Airbnb ve WhatsApp Web'in arayüzleri React ile yapılır. React'te sayfayı bileşenlere (components) bölersin: bir buton, bir kart, bir menü... Her bileşen kendi görünümünü ve verisini yönetir. Veri değişince React sayfanın sadece değişen kısmını kendiliğinden günceller.

Önce ne bilmelisin?

Bu kurs HTML, CSS ve özellikle JavaScript bildiğini varsayar: fonksiyonlar, arrow function'lar, diziler (map, filter), nesneler ve destructuring. Bu konularda kendini rahat hissetmiyorsan önce JavaScript kursunu bitirmeni öneririz.

Bir ders nasıl işler?

  • Anlatım: Önce kavramın ne olduğunu ve neden gerektiğini günlük hayattan bir örnekle anlatıyoruz.
  • Örnek kod: Ardından küçük bir örneği satır satır inceliyoruz. Örnek kodlar kopyalanamaz; kendi elinle yazmak öğrenmenin en hızlı yoludur.
  • Görev: Sağdaki editöre görevi kendin yazarsın. Takılırsan İpucu al butonu ipuçlarını tek tek açar; tüm ipuçlarını açıp en az 3 kez denedikten sonra istersen örnek çözümü görebilirsin.
  • Zorluk: Her dersin yanında Kolay, Orta veya Zor etiketi vardır. Zor dersleri acele etmeden, ipuçlarını kullanarak çöz.

Kodun nasıl kontrol edilir?

Editörde yazdığın bileşen gerçekten çalıştırılır ve önizlemede görünür. Görevi tamamlamak için ekranda görünen yazının görevde istenenle aynı olması ve kodunda dersin konusunu (bileşen, props, state, hook vb.) kullanmış olman gerekir. Önizlemedeki butonlara tıklayarak bileşenini deneyebilirsin.

1 Modül 1 · 0/3 ders Modül 1: React'e Giriş ve JSX React nedir, bileşen kavramı, JSX kuralları ve ifadeler

1.1 React Nedir? İlk Bileşen

1.2 JSX Kuralları

1.3 JSX İçinde JavaScript İfadeleri

Modül tekrarı 3 soru · Modül sonunda çözmeni öneririz
2 Modül 2 · 0/4 ders Modül 2: Bileşenler ve Props Bileşen oluşturma, props ile veri aktarma, children ve bileşen kompozisyonu

2.1 Bileşenleri Birleştirmek

2.2 Props ile Veri Aktarmak

2.3 children Prop'u ile Sarmalayıcı Bileşenler

2.4 Hatayı Bul: Kart Ekranda Görünmüyor

Modül tekrarı 4 soru · Modül sonunda çözmeni öneririz
3 Modül 3 · 0/4 ders Modül 3: State ve Olaylar useState, olay yöneticileri, state güncelleme kuralları ve nesne/dizi state'leri

3.1 useState ile Sayaç

3.2 Olay Yönetimi (Event Handling)

3.3 Nesne ve Dizi State'lerini Güncellemek

3.4 Hatayı Bul: Sonsuz Render Döngüsü

Modül tekrarı 4 soru · Modül sonunda çözmeni öneririz
4 Modül 4 · 0/3 ders Modül 4: Listeler, Koşullu Render ve Formlar map ile liste, key prop, koşullu render ve form yönetimi

4.1 Liste Render ve key

4.2 Koşullu Render

4.3 Formlar ve onSubmit

Modül tekrarı 3 soru · Modül sonunda çözmeni öneririz
5 Modül 5 · 0/4 ders Modül 5: Hook'lar ve İleri Konular useEffect, useRef, useMemo, özel hook'lar ve state'i yukarı taşıma

5.1 useEffect ile Yan Etkiler

5.2 useRef ve useMemo

5.3 Özel Hook Yazmak

5.4 State'i Yukarı Taşımak (Lifting State Up)

Modül tekrarı 4 soru · Modül sonunda çözmeni öneririz
6 Modül 6 · 0/3 ders Modül 6: Uygulamalı React Projeleri To-do uygulaması, ürün kataloğu ve alışveriş sepeti

6.1 Proje 1: To-Do Uygulaması

PROJE

6.2 Proje 2: Filtrelenebilir Ürün Kataloğu

PROJE

6.3 Proje 3: Alışveriş Sepeti

PROJE
Modül tekrarı 3 soru · Modül sonunda çözmeni öneririz