1-darsForma ishlov berish va tekshirish (boshqariladigan vs boshqarilmaydigan, kutubxonalar: Formik, React Hook Form, VeeValidate)Mustahkam forma ishlov berish va tekshirishni amalga oshiring. Boshqariladigan va boshqarilmaydigan kirishlarni solishtiring, Formik, React Hook Form va VeeValidate kabi kutubxonalardan foydalaning va murakkab formalarda tekshirish, xato xabarlari va yuborish oqimlarini loyihalang.
Boshqariladigan vs boshqarilmaydigan kirish strategiyalariFormik va React Hook Form amaliyotdaVeeValidate va Vue forma naqshlariSinxron va asinxron tekshirish qoidalariXato xabarlari, UX va kirish imkoniyati2-darsUI komponent kutubxonalari va kirish imkoniyati amaliyotlari (Tailwind, Material, Chakra, ARIA rollari, klaviatura navigatsiyasi)Zamonaviy UI kutubxonalaridan foydalanishni o'rganing, shu bilan birga kuchli kirish imkoniyatini saqlang. Tailwind, Material UI va Chakra-ni o'rganing, keyin ARIA rollari, fokus boshqaruvi va klaviatura navigatsiyasi naqshlarini qo'llang, inklyuziv, ishlab chiqarishga tayyor interfeyslarni yarating.
Tailwind va utility klasslar bilan dizayn tizimlariMaterial UI va Chakra komponent naqshlariSemantik HTML va ARIA rollari strategiyalariFokus boshqaruvi va klaviatura navigatsiyasiRang kontrasti, theming va kam harakat3-darsFrontend frameworkini tanlash va asoslash (React, Vue, Svelte) va ekotizim savdo-offsFrontend frameworkingiz tanlovini baholang va asoslang. React, Vue va Svelte arxitekturalarini, ekotizim yetukligini, ishlash va o'rganish egri chiziqlarini solishtiring, har bir loyiha kontekstida eng yaxshi variantni tanlang va himoya qiling.
React, Vue va Svelte asosiy tushunchalariEkotizim yetukligi va jamoa qo'llab-quvvatlashiIshlash va bundle hajmi savdo-offsTypeScript va asboblar integratsiyasiHaqiqiy loyihalar uchun qaror qabul qilish frameworklari4-darsQurish, bundling va optimizatsiya: Webpack/Vite/Rollup, kod bo'linishi, tree-shaking, aktiv boshqaruviIshlashli frontendlar uchun zamonaviy qurish asboblarini egallang. Webpack, Vite va Rollup-ni solishtiring, kod bo'linishi va tree-shaking-ni sozlang va aktiv boshqaruvi, keshlash va manba xaritalarini optimallashtiring, tez, boshqariladigan ishlab chiqarish bundllarini yetkazing.
Webpack, Vite va Rollup sozlamalarini solishtirishKod bo'linishi va dinamik importlarTree-shaking va o'lik kodni yo'q qilishRasmlar, shriftlar va statik aktivlarni optimallashtirishKeshlash, hashlar va manba xarita strategiyalari5-darsMijoz tomonidagi sinovlar: komponentlar uchun unit sinovlar, integratsiya sinovlari, sinov kutubxoni tanlovi va misollarMustahkam mijoz tomonidagi sinov strategiyasini ishlab chiqing. Komponentlar uchun unit sinovlarni, marshrutlar va API'lar bo'ylab integratsiya sinovlarini o'rganing va Jest, Vitest, Cypress va Testing Library o'rtasida tanlov qilishni o'rganing, ishonchli, boshqariladigan sinov to'plamlarini yarating.
UI komponentlarini izolyatsiyada unit sinov qilishOqimlar va marshrutlash uchun integratsiya sinovlariFoydalanuvchi markazli sinovlar uchun Testing Library-dan foydalanishJest, Vitest, Cypress yoki Playwright tanlashAPI'larni masxara qilish va beqaror sinovlarni boshqarish6-darsMahalliy rivojlanish va muhit sozlamalari: env o'zgaruvchilari, .env fayllari, frontend uchun xususiyat bayroqlariMahalliy va bulut sozlamalari uchun ishonchli frontend muhitlarini sozlang. Muhit o'zgaruvchilarini, .env fayllarini, qurish vaqtidagi in'ektsiyani va xususiyat bayroqlarini boshqarishni o'rganing, rivojlanish, staging va ishlab chiqarish bo'ylab funksionallikni xavfsiz almashtirishingiz mumkin.
.env fayllari va qurish vaqtidagi o'zgaruvchilarni boshqarishDev, staging va ishlab chiqarish konfiguratsiyalarini ajratishIsh vaqtidagi konfiguratsiya va muhit xavfsizligiFrontend xususiyat bayroqlarini amalga oshirishMaxfiy ma'lumotlarni boshqarish va konfiguratsiya xatolari7-darsYakka sahifali ilovalar uchun loyiha tuzilishi va papka konventsiyalari (komponentlar, sahifalar, xizmatlar, hooklar)Yakka sahifali ilovalar uchun masshtablanadigan loyiha tuzilmalarini loyihalang. Komponentlar, sahifalar, xizmatlar va hooklar uchun papka konventsiyalarini o'rganing va katta kod bazalarini topish mumkin va boshqarish mumkin bo'lgan umumiy yordamchilar, sinovlar va uslublarni tartibga soling.
Komponentlar, sahifalar va layoutlarni tartibga solishXizmatlar, hooklar va ma'lumotlarga kirish qatlamlariUmumiy yordamchilar, turlar va konstantalarSinovlar va hikoya fayllarini tuzishModulli chegaralarga qayta ishlash8-darsAPI integratsiya naqshlari: REST vs GraphQL mijozlari, xato boshqaruvi, so'rov qayta urinishlari, timeoutlarMijozda mustahkam API integratsiya naqshlarini amalga oshiring. REST va GraphQL mijozlarini solishtiring, Axios yoki Fetch-ni sozlang, xatolar va qayta urinishlarni boshqaring va chidamli ma'lumot olish qatlamlari uchun timeoutlar, bekor qilish va normalizatsiyani loyihalang.
Axios yoki Fetch bilan REST mijozlarini sozlashApollo yoki URQL kabi GraphQL mijozlaridan foydalanishGlobal xato boshqaruvi va foydalanuvchi xabarlariSo'rov qayta urinishlari, backoff va timeoutlarBekor qilish, abort kontrollerlari va keshlash9-darsFrontendda autentifikatsiya: tokenlarni saqlash, yangilash oqimlari va xavfsiz cookie yondashuvlariXavfsiz frontend autentifikatsiya naqshlarini tushuning. localStorage, sessionStorage va cookielarni solishtiring, yangilash token oqimlarini loyihalang va haqiqiy ilovalarda foydalanuvchilarni himoya qiladigan HttpOnly cookielar, CSRF himoyalari va chiqish strategiyalarini amalga oshiring.
Token saqlash: localStorage vs cookielarYangilash token oqimlarini xavfsiz amalga oshirishHttpOnly cookielar va CSRF himoyasiChiqish, bekor qilish va aylantirishni boshqarishAutentifikatsiya xato boshqaruvi va foydalanuvchi fikri10-darsHolat boshqaruvi variantlari va naqshlari (mahalliy komponent holati, Context, Redux/Pinia/MobX, React Query)Murakkab frontendlar uchun holat boshqaruvi variantlarini solishtiring. Mahalliy holat, Context, Redux, Pinia, MobX va React Query-ni o'rganing va katta ilovalarda keshlash, normalizatsiya va keraksiz qayta chizishlarni oldini olish naqshlarini o'rganing.
Mahalliy komponent holati va ko'tarish naqshlariKesishgan masalalar uchun Context APIRedux, Pinia va MobX do'kon dizayniReact Query yoki SWR bilan server holatiIshlashni sozlash va selektor naqshlari11-darsMarshrutlash va himoyalangan marshrutlar: mijoz tomonidagi marshrutlash, marshrut qo'riqchilari, lazy yuklashHimoyalangan marshrutlar bilan ishonchli mijoz tomonidagi marshrutlashni yarating. Marshrut sozlamalari, ichma-ich marshrutlar, lazy yuklash va autentifikatsiya va avtorizatsiyani majburlovchi marshrut qo'riqchilarini o'rganing, navigatsiyani tez va kirish mumkin qiling.
Mijoz tomonidagi routerlar va marshrutlarni sozlashIchma-ich marshrutlar va layout ierarxiyalariLazy yuklash va kod bo'linishini amalga oshirishAutentifikatsiya asosidagi marshrut qo'riqchilari va yo'naltirishlar404 sahifalar va zaxira marshrutlarini boshqarish