Bài học 1Xử lý form và validation (controlled vs uncontrolled, thư viện: Formik, React Hook Form, VeeValidate)Triển khai xử lý form và validation mạnh mẽ. So sánh input controlled và uncontrolled, sử dụng thư viện như Formik, React Hook Form, và VeeValidate, thiết kế validation, thông báo lỗi, và luồng submit cho các form phức tạp.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityBài học 2Thư viện component UI và thực hành accessibility (Tailwind, Material, Chakra, ARIA roles, điều hướng bàn phím)Học sử dụng thư viện UI hiện đại trong khi duy trì tính tiếp cận mạnh mẽ. Khám phá Tailwind, Material UI, và Chakra, sau đó áp dụng ARIA roles, quản lý focus, và pattern điều hướng bàn phím để xây dựng giao diện inclusive, sẵn sàng production.
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 motionBài học 3Chọn framework frontend và lý do (React, Vue, Svelte) cùng tradeoffs ecosystemĐánh giá và biện minh lựa chọn framework frontend. So sánh kiến trúc React, Vue, và Svelte, độ chín ecosystem, hiệu suất, và đường cong học tập để chọn và bảo vệ lựa chọn tốt nhất cho từng ngữ cảnh dự án.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsBài học 4Build, bundling, và tối ưu hóa: Webpack/Vite/Rollup, code splitting, tree-shaking, xử lý assetLàm chủ công cụ build hiện đại cho frontend hiệu suất cao. So sánh Webpack, Vite, và Rollup, cấu hình code splitting và tree-shaking, tối ưu hóa xử lý asset, caching, và source maps để cung cấp bundle production nhanh, dễ bảo trì.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesBài học 5Test client-side: unit testing component, integration tests, lựa chọn testing library và ví dụPhát triển chiến lược testing client-side mạnh mẽ. Học unit testing cho component, integration tests qua routes và API, và cách chọn giữa Jest, Vitest, Cypress, Testing Library để tạo test suite đáng tin cậy, dễ bảo trì.
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 testsBài học 6Cấu hình dev local và môi trường: env vars, file .env, feature flags cho frontendCấu hình môi trường frontend đáng tin cậy cho local và cloud. Học quản lý environment variables, file .env, build-time injection, và feature flags để toggle chức năng an toàn qua development, staging, và production.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsBài học 7Cấu trúc dự án và convention folder cho single-page apps (component, pages, services, hooks)Thiết kế cấu trúc dự án scalable cho single-page apps. Học convention folder cho component, pages, services, hooks, và cách tổ chức shared utilities, tests, styles để giữ codebase lớn dễ khám phá và bảo trì.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesBài học 8Pattern tích hợp API: REST vs GraphQL clients, xử lý lỗi, request retries, timeoutsTriển khai pattern tích hợp API mạnh mẽ trên client. So sánh REST và GraphQL clients, cấu hình Axios hoặc Fetch, xử lý lỗi và retries, thiết kế timeouts, cancellation, normalization cho data fetching layer resilient.
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 cachingBài học 9Authentication frontend: lưu token, refresh flows, cách tiếp cận secure cookieHiểu pattern authentication frontend an toàn. So sánh localStorage, sessionStorage, cookies, thiết kế refresh token flows, triển khai HttpOnly cookies, CSRF defenses, logout strategies bảo vệ user trong ứng dụng thực tế.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackBài học 10Lựa chọn và pattern state management (local component state, Context, Redux/Pinia/MobX, React Query)So sánh lựa chọn state management cho frontend phức tạp. Khám phá local state, Context, Redux, Pinia, MobX, React Query, học pattern caching, normalization, tránh re-renders không cần thiết trong ứng dụng lớn.
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 patternsBài học 11Routing và protected routes: client-side routing, route guards, lazy loadingXây dựng client-side routing đáng tin cậy với protected routes. Học cấu hình route, nested routes, lazy loading, route guards enforce authentication và authorization trong khi giữ navigation nhanh và accessible.
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
