Reaktif arayüzleri adım adım oluşturun.
Her ders bir kavram ekler. Sıfırdan başlayıp gerçek bir e-ticaret arayüzüyle bitirin — Node.js, bundler veya framework runtime gerekmez.
Temeller
Her DevinimJS geliştiricisinin bilmesi gereken temel kavramlar. 5 dakikada ilk component'inizi yazın.
Merhaba Dünya
CDN'den yükleme, HTML'e component yerleştirme, event dinleme.
Component Yaşam Döngüsü
Her component'in kullandığı altı yaşam döngüsü hook'u.
HTML Template'ler
html etiketi: interpolasyon, otomatik escaping, koşullar, listeler.
Reaktivite
Proxy tabanlı this.state, doğrudan mutasyon, toplu render.
Event'ler ve Aksiyonlar
data-on:* direktifi, klavye event'leri, this.emit().
Attribute'lar ve Veri
str(), num(), bool(), json() ile HTML'den yapılandırma.
Outlet ve Kompozisyon
this.outlet ile PHP/statik içeriği component içinde koruma.
Component Yazımı
Sıfırdan gerçek component'ler yazın. Component'ler arası iletişim ve performans pattern'leri.
Counter Yazımı
Sıfırdan dv-counter: step, min, max, state, template ve event'ler.
Tabs Yazımı
WAI-ARIA tabs pattern, klavye navigasyonu, panel state yönetimi.
Modal Yazımı
Escape ile kapatma, focus trap, Light DOM diyalog event'leri.
Component İletişimi
Parent-child event bubbling, dv:* event zincirleri.
DOM Morphing
morph() DOM güncelleme, data-key ile liste optimizasyonu.
State Yönetimi
Paylaşımlı store, async veri, form ve routing — uygulama runtime primitifleri.
Shared Store
createStore(), cross-component state paylaşımı.
Async State
createAsyncState(): idle→loading→success→error yaşam döngüsü.
Form Yönetimi
createForm(): values, errors, dirty, validasyon, submit.
Hash Router
Sunucusuz routing: :param segmentleri ve subscribe().
Gerçek Dünya Uygulaması
Mini e-ticaret arayüzü: ürün listesi, sepet, bildirimler, form ve PHP entegrasyonu.
Ürün Listesi
Data table + search + pagination async veri ile.
Alışveriş Sepeti
Sepet store, add-to-cart event zinciri, çoklu component state.
Toast ve Confirm
Bildirim kuyruğu ve iki aşamalı onay kontrolleri.
Form Validasyonu
Field component'leri, özel validator'lar, sunucu hataları.
PHP Entegrasyonu
Laravel, CodeIgniter, WordPress: backend'den data-* gönderme.
İleri Seviye ve Ekosistem
Özel store'lar, production optimizasyonu, erişilebilirlik, tema ve test.
Özel Store'lar
createReactive() ile domain store tasarımı.
Production Optimizasyonu
dist/ bundle, data-key morphing, safeUrl().
Erişilebilirlik (WCAG AA)
Klavye desteği, ARIA rolleri, axe-core testleri.
CKCSS Teması
Design token'lar, tema değişkenleri, tutarlı görsel sistem.
Component Testleri
happy-dom ile unit test, Playwright ile E2E, component sözleşmesi.
Başlamaya hazır mısınız?
Faz 1 yayında. Sizi sıfırdan composable reaktif component'ler yazmaya götüren 7 ders — hepsi tarayıcıda.
Ders 1'e başla (EN) →