Aralin 1Paghawak at pag-validate ng form (controlled vs uncontrolled, mga library: Formik, React Hook Form, VeeValidate)Ipapatupad ang matibay na paghawak at pag-validate ng form. Ikukumpara ang controlled at uncontrolled inputs, gagamitin ang mga library tulad ng Formik, React Hook Form, at VeeValidate, at ididisenyo ang validation, error messages, at submission flows para sa mga komplikadong form.
Controlled vs uncontrolled input strategiesFormik at React Hook Form sa praktisVeeValidate at Vue form patternsSynchronous at async validation rulesError messages, UX, at accessibilityAralin 2Mga library ng UI component at accessibility practices (Tailwind, Material, Chakra, ARIA roles, keyboard navigation)Matututo kang gumamit ng modernong mga library ng UI habang pinapanatili ang malakas na accessibility. Galugarin ang Tailwind, Material UI, at Chakra, pagkatapos ay ilapat ang ARIA roles, focus management, at keyboard navigation patterns upang bumuo ng inclusive, production-ready na mga interface.
Design systems gamit ang Tailwind at utility classesMaterial UI at Chakra component patternsSemantic HTML at ARIA role strategiesFocus management at keyboard navigationColor contrast, theming, at reduced motionAralin 3Pagpili ng frontend framework at katwiran (React, Vue, Svelte) at ecosystem tradeoffsI-e-evaluate at i-justify ang iyong pagpili ng frontend framework. Ikumpara ang mga arkitektura ng React, Vue, at Svelte, ecosystem maturity, performance, at learning curves upang mapili at ipagtanggol ang pinakamahusay na opsyon para sa bawat konteksto ng proyekto.
React, Vue, at Svelte core conceptsEcosystem maturity at community supportPerformance at bundle size tradeoffsTypeScript at tooling integrationDecision frameworks para sa tunay na proyektoAralin 4Build, bundling, at optimization: Webpack/Vite/Rollup, code splitting, tree-shaking, asset handlingMaster ang modernong build tooling para sa performant na mga frontend. Ikumpara ang Webpack, Vite, at Rollup, i-configure ang code splitting at tree-shaking, at i-optimize ang asset handling, caching, at source maps upang maghatid ng mabilis, maintainable na production bundles.
Pagkumpara ng Webpack, Vite, at Rollup setupsCode splitting at dynamic importsTree-shaking at dead code eliminationPag-optimize ng images, fonts, at static assetsCaching, hashes, at source map strategiesAralin 5Client-side tests: unit testing ng components, integration tests, testing library choices at examplesMag-develop ng matibay na client-side testing strategy. Matututo kang mag-unit test ng components, integration tests sa mga routes at APIs, at kung paano pumili sa pagitan ng Jest, Vitest, Cypress, at Testing Library upang lumikha ng reliable, maintainable na test suites.
Unit testing ng UI components nang mag-isaIntegration tests para sa flows at routingPaggamit ng Testing Library para sa user-centric testsPagpili ng Jest, Vitest, Cypress, o PlaywrightPag-mock ng APIs at paghawak ng flaky testsAralin 6Local dev at environment configuration: env vars, .env files, feature flags para sa frontendI-configure ang reliable na frontend environments para sa local at cloud setups. Matututo kang pamahalaan ang environment variables, .env files, build-time injection, at feature flags upang ligtas na i-toggle ang functionality sa development, staging, at production.
Pagpapatakbo ng .env files at build-time variablesPaghiwa-hiwalay ng dev, staging, at production configsRuntime configuration at environment safetyPagpapatupad ng frontend feature flagsSecrets handling at configuration pitfallsAralin 7Project structure at folder conventions para sa single-page apps (components, pages, services, hooks)Idisenyo ang scalable na project structures para sa single-page apps. Matututo kang mag-folder conventions para sa components, pages, services, at hooks, at kung paano mag-organisa ng shared utilities, tests, at styles upang panatilihin ang malalaking codebases na discoverable at maintainable.
Pag-oorganisa ng components, pages, at layoutsServices, hooks, at data access layersShared utilities, types, at constantsPag-structure ng tests at story filesPag-refactor patungo sa modular boundariesAralin 8API integration patterns: REST vs GraphQL clients, error handling, request retries, timeoutsIpapatupad ang matibay na API integration patterns sa client. Ikumpara ang REST at GraphQL clients, i-configure ang Axios o Fetch, hawakan ang errors at retries, at idisenyo ang timeouts, cancellation, at normalization para sa resilient na data fetching layers.
Pag-configure ng REST clients gamit ang Axios o FetchPaggamit ng GraphQL clients tulad ng Apollo o URQLGlobal error handling at user messagingRequest retries, backoff, at timeoutsCancellation, abort controllers, at cachingAralin 9Authentication sa frontend: pag-store ng tokens, refresh flows, at secure cookie approachesUnawain ang secure na frontend authentication patterns. Ikumpara ang localStorage, sessionStorage, at cookies, idisenyo ang refresh token flows, at ipatupad ang HttpOnly cookies, CSRF defenses, at logout strategies na nagpoprotekta sa mga user sa tunay na applications.
Token storage: localStorage vs cookiesPagpapatupad ng refresh token flows nang ligtasHttpOnly cookies at CSRF protectionPaghawak ng logout, revocation, at rotationAuth error handling at user feedbackAralin 10State management options at patterns (local component state, Context, Redux/Pinia/MobX, React Query)Ikumpara ang state management options para sa complex na frontends. Galugarin ang local state, Context, Redux, Pinia, MobX, at React Query, at matutunan ang patterns para sa caching, normalization, at pag-iwas sa hindi kinakailangang re-renders sa malalaking applications.
Local component state at lifting patternsContext API para sa cross-cutting concernsRedux, Pinia, at MobX store designServer state gamit ang React Query o SWRPerformance tuning at selector patternsAralin 11Routing at protected routes: client-side routing, route guards, lazy loadingBumuo ng reliable na client-side routing na may protected routes. Matutunan ang route configuration, nested routes, lazy loading, at route guards na nagpapatupad ng authentication at authorization habang pinapanatili ang mabilis at accessible na navigation.
Pag-configure ng client-side routers at routesNested routes at layout hierarchiesPagpapatupad ng lazy loading at code splittingAuth-based route guards at redirectsPaghawak ng 404 pages at fallback routes
