មេរៀនរងទី 1ការគ្រប់គ្រងទម្រង់ និងការផ្ទៀងផ្ទាត់ (controlled vs uncontrolled, បណ្តាញ៖ Formik, React Hook Form, VeeValidate)អនុវត្តការគ្រប់គ្រងទម្រង់ និងការផ្ទៀងផ្ទាត់ដ៏រឹងមាំ។ ប្រៀបធៀប controlled និង uncontrolled inputs ប្រើបណ្តាញដូចជា Formik, React Hook Form, និង VeeValidate និងរចនាការផ្ទៀងផ្ទាត់ សារកំហុស និងលំហូរដាក់ស្នើសម្រាប់ទម្រង់ស្មុគស្មាញ។
យុទ្ធសាស្ត្របញ្ចូល controlled vs uncontrolledFormik និង React Hook Form ក្នុងការអនុវត្តVeeValidate និង Vue form patternsច្បាប់ផ្ទៀងផ្ទាត់ synchronous និង asyncសារកំហុស, UX, និងការចូលប្រើបានមេរៀនរងទី 2បណ្តាញសមាសភាគ UI និងការអនុវត្ត accessibility (Tailwind, Material, Chakra, ARIA roles, keyboard navigation)រៀនប្រើបណ្តាញ UI ទំនើបដោយរក្សាការចូលប្រើបានខ្លាំង។ ស្វែងយល់ Tailwind, Material UI, និង Chakra បន្ទាប់មកអនុវត្ត ARIA roles, ការគ្រប់គ្រង focus, និង keyboard navigation patterns ដើម្បីសាងសម្ព័ន្ធ inclusive និង production-ready។
ប្រព័ន្ធរចនាបទជាមួយ Tailwind និង utility classesMaterial UI និង Chakra component patternsSemantic HTML និង ARIA role strategiesការគ្រប់គ្រង focus និង keyboard navigationពណ៌ contrast, theming, និង reduced motionមេរៀនរងទី 3ការជ្រើសរើស frontend framework និងការពន្យល់ (React, Vue, Svelte) និង tradeoffs នៃ ecosystemវាយតម្លៃ និងពន្យល់ការជ្រើសរើស frontend framework របស់អ្នក។ ប្រៀបធៀប React, Vue, និង Svelte architectures, ecosystem maturity, performance, និង learning curves ដើម្បីជ្រើសរើស និងការពារជម្រើសល្អបំផុតសម្រាប់បរិបទគម្រោងនីមួយៗ។
គំនិតគ្រឹះ React, Vue, និង SvelteEcosystem maturity និងការគាំទ្រសហគមន៍Performance និង bundle size tradeoffsTypeScript និង tooling integrationDecision frameworks សម្រាប់គម្រោងពិតប្រាកដមេរៀនរងទី 4ការបង្កើត, bundling, និង optimization៖ Webpack/Vite/Rollup, code splitting, tree-shaking, asset handlingគ្រប់គ្រង build tooling ទំនើបសម្រាប់ frontends ដែលមានការអនុវត្តល្អ។ ប្រៀបធៀប Webpack, Vite, និង Rollup, កំណត់ code splitting និង tree-shaking, និងបង្កើនការគ្រប់គ្រង asset, caching, និង source maps ដើម្បីដឹកជញ្ជូន production bundles លឿន និងរក្សាបាន។
ប្រៀបធៀប Webpack, Vite, និង Rollup setupsCode splitting និង dynamic importsTree-shaking និង dead code eliminationបង្កើនរូបភាព, អក្សរ, និង static assetsCaching, hashes, និង source map strategiesមេរៀនរងទី 5ការសាកល្បងផ្នែក client៖ unit testing components, integration tests, ជម្រើស testing library និងឧទាហរណ៍អភិវឌ្ឍយុទ្ធសាស្ត្រសាកល្បងផ្នែក client ដ៏រឹងមាំ។ រៀន unit testing សម្រាប់ components, integration tests ឆ្លងវេន routes និង APIs, និងរបៀបជ្រើសរើសរវាង Jest, Vitest, Cypress, និង Testing Library ដើម្បីបង្កើត test suites ដែលអាចទុកចិត្ត និងរក្សាបាន។
Unit testing UI components ក្នុងការដាច់ដោយឡែកIntegration tests សម្រាប់ flows និង routingប្រើ Testing Library សម្រាប់ user-centric testsជ្រើសរើស Jest, Vitest, Cypress, ឬ PlaywrightMocking APIs និង handling flaky testsមេរៀនរងទី 6ការអភិវឌ្ឍ local និងការកំណត់បរិស្ថាន៖ env vars, .env files, feature flags សម្រាប់ frontendកំណត់បរិស្ថាន frontend ដែលអាចទុកចិត្តសម្រាប់ local និង cloud setups។ រៀនគ្រប់គ្រង environment variables, .env files, build-time injection, និង feature flags ដើម្បីប្តូរមុខងារដោយសុវត្ថិភាពឆ្លងវេន development, staging, និង production។
គ្រប់គ្រង .env files និង build-time variablesបំ-separate dev, staging, និង production configsRuntime configuration និង environment safetyអនុវត្ត frontend feature flagsSecrets handling និង configuration pitfallsមេរៀនរងទី 7រចនាសម្ព័ន្ធគម្រោង និងការកំណត់ថតសម្រាប់ single-page apps (components, pages, services, hooks)រចនា project structures ដែលអាចពង្រីកបានសម្រាប់ single-page apps។ រៀន folder conventions សម្រាប់ components, pages, services, និង hooks, និងរបៀបរៀបចំ shared utilities, tests, និង styles ដើម្បីរក្សា codebases ធំៗឱ្យងាយស្រួលរក និងរក្សាបាន។
រៀបចំ components, pages, និង layoutsServices, hooks, និង data access layersShared utilities, types, និង constantsរចនា tests និង story filesRefactoring ឆ្ពោះទៅ modular boundariesមេរៀនរងទី 8API integration patterns៖ REST vs GraphQL clients, error handling, request retries, timeoutsអនុវត្ត API integration patterns ដ៏រឹងមាំនៅផ្នែក client។ ប្រៀបធៀប REST និង GraphQL clients, កំណត់ Axios ឬ Fetch, គ្រប់គ្រងកំហុស និង retries, និងរចនា timeouts, cancellation, និង normalization សម្រាប់ data fetching layers ដែលអាចទ្របាន។
កំណត់ REST clients ជាមួយ Axios ឬ Fetchប្រើ GraphQL clients ដូចជា Apollo ឬ URQLGlobal error handling និង user messagingRequest retries, backoff, និង timeoutsCancellation, abort controllers, និង cachingមេរៀនរងទី 9ការផ្ទៀងផ្ទាត់នៅ frontend៖ រក្សាទុក tokens, refresh flows, និង secure cookie approachesយល់ដឹងពី frontend authentication patterns ដែលសុវត្ថិភាព។ ប្រៀបធៀប localStorage, sessionStorage, និង cookies, រចនា refresh token flows, និងអនុវត្ត HttpOnly cookies, CSRF defenses, និង logout strategies ដែលការពារអ្នកប្រើក្នុងកម្មវិធីពិតប្រាកដ។
Token storage៖ localStorage vs cookiesអនុវត្ត refresh token flows ដោយសុវត្ថិភាពHttpOnly cookies និង CSRF protectionគ្រប់គ្រង logout, revocation, និង rotationAuth error handling និង user feedbackមេរៀនរងទី 10ជម្រើស និង patterns គ្រប់គ្រងស្ថានភាព (local component state, Context, Redux/Pinia/MobX, React Query)ប្រៀបធៀប state management options សម្រាប់ frontends ស្មុគស្មាញ។ ស្វែងយល់ local state, Context, Redux, Pinia, MobX, និង React Query, និងរៀន patterns សម្រាប់ caching, normalization, និងជៀសវាង re-rendersមិនចាំបាច់ក្នុងកម្មវិធីធំៗ។
Local component state និង lifting patternsContext API សម្រាប់ cross-cutting concernsRedux, Pinia, និង MobX store designServer state ជាមួយ React Query ឬ SWRPerformance tuning និង selector patternsមេរៀនរងទី 11Routing និង protected routes៖ client-side routing, route guards, lazy loadingសាង client-side routing ដែលអាចទុកចិត្តបានជាមួយ protected routes។ រៀន route configuration, nested routes, lazy loading, និង route guards ដែលអនុវត្ត authentication និង authorization ខណៈរក្សា navigation លឿន និងចូលប្រើបាន។
កំណត់ client-side routers និង routesNested routes និង layout hierarchiesអនុវត្ត lazy loading និង code splittingAuth-based route guards និង redirectsគ្រប់គ្រង 404 pages និង fallback routes
