Ders 1Form işleme ve doğrulama (kontrollü vs kontrolsüz, kütüphaneler: Formik, React Hook Form, VeeValidate)Sağlam form işleme ve doğrulama uygulayın. Kontrollü ve kontrolsüz girdileri karşılaştırın, Formik, React Hook Form ve VeeValidate gibi kütüphaneleri kullanın ve karmaşık formlar için doğrulama, hata mesajları ve gönderme akışlarını tasarlayın.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityDers 2UI bileşen kütüphaneleri ve erişilebilirlik uygulamaları (Tailwind, Material, Chakra, ARIA rolleri, klavye gezinme)Güçlü erişilebilirliği korurken modern UI kütüphanelerini kullanmayı öğrenin. Tailwind, Material UI ve Chakra'yı keşfedin, ardından kapsayıcı, üretim hazır arayüzler oluşturmak için ARIA rolleri, odak yönetimi ve klavye gezinme desenlerini uygulayın.
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionDers 3Frontend framework seçimi ve gerekçelendirme (React, Vue, Svelte) ve ekosistem ödünleşimleriFrontend framework seçiminizi değerlendirin ve gerekçelendirin. React, Vue ve Svelte mimarilerini, ekosistem olgunluğunu, performansı ve öğrenme eğrilerini karşılaştırarak her proje bağlamı için en iyi seçeneği seçip savunabileceksiniz.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsDers 4Derleme, bundling ve optimizasyon: Webpack/Vite/Rollup, kod bölme, tree-shaking, varlık işlemePerformanslı frontend'ler için modern derleme araçlarını ustalaşın. Webpack, Vite ve Rollup'u karşılaştırın, kod bölme ve tree-shaking'i yapılandırın ve hızlı, sürdürülebilir üretim bundle'ları sunmak için varlık işleme, önbellekleme ve source map'leri optimize edin.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesDers 5İstemci tarafı testler: birim test bileşenleri, entegrasyon testleri, test kütüphanesi seçimleri ve örneklerSağlam istemci tarafı test stratejisi geliştirin. Bileşenler için birim testi, rotalar ve API'ler arasında entegrasyon testleri öğrenin ve güvenilir, sürdürülebilir test suite'leri oluşturmak için Jest, Vitest, Cypress ve Testing Library arasında seçim yapmayı öğrenin.
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsDers 6Yerel geliştirme ve ortam yapılandırması: ortam değişkenleri, .env dosyaları, frontend için özellik bayraklarıYerel ve bulut kurulumları için güvenilir frontend ortamları yapılandırın. Ortam değişkenlerini, .env dosyalarını, derleme zamanı enjeksiyonunu ve özellik bayraklarını yönetmeyi öğrenin, böylece geliştirme, sahnelenme ve üretim arasında işlevselliği güvenli bir şekilde değiştirebilirsiniz.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsDers 7Tek sayfa uygulamaları için proje yapısı ve klasör kuralları (bileşenler, sayfalar, servisler, hook'lar)Tek sayfa uygulamaları için ölçeklenebilir proje yapıları tasarlayın. Bileşenler, sayfalar, servisler ve hook'lar için klasör kurallarını öğrenin ve büyük kod tabanlarını keşfedilebilir ve sürdürülebilir tutmak için paylaşılan araçları, testleri ve stilleri nasıl organize edeceğinizi öğrenin.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesDers 8API entegrasyon desenleri: REST vs GraphQL istemcileri, hata eleme, istek yeniden denemeleri, zaman aşımıİstemcide sağlam API entegrasyon desenleri uygulayın. REST ve GraphQL istemcilerini karşılaştırın, Axios veya Fetch'i yapılandırın, hataları ve yeniden denemeleri ele alın ve dayanıklı veri çekme katmanları için zaman aşımı, iptal ve normalizasyon tasarlayın.
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingDers 9Frontend'de kimlik doğrulama: token depolama, yenileme akışları ve güvenli çerez yaklaşımlarıGüvenli frontend kimlik doğrulama desenlerini anlayın. localStorage, sessionStorage ve çerezleri karşılaştırın, yenileme token akışlarını tasarlayın ve gerçek uygulamalarda kullanıcıları koruyan HttpOnly çerezleri, CSRF savunmaları ve çıkış stratejilerini uygulayın.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackDers 10Durum yönetimi seçenekleri ve desenleri (yerel bileşen durumu, Context, Redux/Pinia/MobX, React Query)Karmaşık frontend'ler için durum yönetimi seçeneklerini karşılaştırın. Yerel durum, Context, Redux, Pinia, MobX ve React Query'yi keşfedin ve büyük uygulamalarda önbellekleme, normalizasyon ve gereksiz yeniden render'ları önleme desenlerini öğrenin.
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsDers 11Yönlendirme ve korunan rotalar: istemci tarafı yönlendirme, rota muhafızları, tembel yüklemeKorunan rotalarla güvenilir istemci tarafı yönlendirme oluşturun. Rota yapılandırması, iç içe rotalar, tembel yükleme ve kimlik doğrulamayı zorlayan rota muhafızlarını öğrenin, gezinmeyi hızlı ve erişilebilir tutarken.
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes
