บทเรียนที่ 1การจัดการฟอร์มและการตรวจสอบความถูกต้อง (Controlled vs Uncontrolled, ไลบรารี: Formik, React Hook Form, VeeValidate)นำการจัดการฟอร์มและการตรวจสอบความถูกต้องที่แข็งแกร่งไปใช้งาน เปรียบเทียบ Controlled และ Uncontrolled Inputs ใช้ไลบรารีเช่น Formik, React Hook Form และ VeeValidate ออกแบบการตรวจสอบข้อผิดพลาด และกระบวนการส่งข้อมูลสำหรับฟอร์มที่ซับซ้อน
กลยุทธ์ Controlled vs Uncontrolled InputFormik และ React Hook Form ในทางปฏิบัติVeeValidate และรูปแบบฟอร์ม Vueกฎการตรวจสอบแบบ Synchronous และ Asyncข้อความผิดพลาด UX และความเข้าถึงบทเรียนที่ 2ไลบรารีคอมโพเนนต์ UI และแนวปฏิบัติด้านความเข้าถึง (Tailwind, Material, Chakra, ARIA roles, การนำทางด้วยคีย์บอร์ด)เรียนรู้การใช้ไลบรารี UI สมัยใหม่โดยรักษาความเข้าถึงที่แข็งแกร่ง สำรวจ Tailwind, Material UI และ Chakra จากนั้นนำ ARIA roles การจัดการ Focus และรูปแบบการนำทางด้วยคีย์บอร์ดไปใช้ในการสร้างอินเทอร์เฟซที่ครอบคลุมและพร้อมใช้งานจริง
ระบบออกแบบด้วย Tailwind และ Utility Classesรูปแบบคอมโพเนนต์ Material UI และ Chakraกลยุทธ์ Semantic HTML และ ARIA Rolesการจัดการ Focus และการนำทางด้วยคีย์บอร์ดการตัดกันของสี การกำหนดธีม และการลดการเคลื่อนไหวบทเรียนที่ 3การเลือก Framework Frontend และการอธิบายเหตุผล (React, Vue, Svelte) และการประนีประนอมของ Ecosystemประเมินและอธิบายเหตุผลในการเลือก Framework Frontend เปรียบเทียบสถาปัตยกรรม React, Vue และ Svelte ความสมบูรณ์ของ Ecosystem ประสิทธิภาพ และเส้นโค้งการเรียนรู้ เพื่อเลือกและปกป้องตัวเลือกที่ดีที่สุดสำหรับบริบทโปรเจกต์แต่ละประเภท
แนวคิดหลัก React, Vue และ Svelteความสมบูรณ์ของ Ecosystem และการสนับสนุนจากชุมชนการประนีประนอมด้านประสิทธิภาพและขนาด Bundleการรวม TypeScript และเครื่องมือกรอบการตัดสินใจสำหรับโปรเจกต์จริงบทเรียนที่ 4Build, Bundling และการปรับแต่ง: Webpack/Vite/Rollup, Code Splitting, Tree-shaking, การจัดการ Assetsเชี่ยวชาญเครื่องมือ Build สมัยใหม่สำหรับ Frontend ที่มีประสิทธิภาพ เปรียบเทียบ Webpack, Vite และ Rollup ตั้งค่า Code Splitting และ Tree-shaking และปรับแต่งการจัดการ Assets การแคช และ Source Maps เพื่อส่งมอบ Bundle การผลิตที่รวดเร็วและดูแลรักษาได้
เปรียบเทียบการตั้งค่า Webpack, Vite และ RollupCode Splitting และ Dynamic ImportsTree-shaking และการกำจัด Dead Codeการปรับแต่งรูปภาพ ฟอนต์ และ Static Assetsกลยุทธ์การแคช Hashes และ Source Mapsบทเรียนที่ 5การทดสอบฝั่ง Client: Unit Testing คอมโพเนนต์, Integration Tests, การเลือก Testing Library และตัวอย่างพัฒนากลยุทธ์การทดสอบฝั่ง Client ที่แข็งแกร่ง เรียนรู้ Unit Testing สำหรับคอมโพเนนต์ Integration Tests ข้าม Routes และ APIs และวิธีเลือก Jest, Vitest, Cypress และ Testing Library เพื่อสร้างชุดทดสอบที่เชื่อถือได้และดูแลรักษาได้
Unit Testing UI Components ในแบบแยกIntegration Tests สำหรับ Flows และ Routingการใช้ Testing Library สำหรับการทดสอบที่เน้นผู้ใช้การเลือก Jest, Vitest, Cypress หรือ Playwrightการ Mock APIs และการจัดการ Flaky Testsบทเรียนที่ 6การตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่น: Env Vars, ไฟล์ .env, Feature Flags สำหรับ Frontendตั้งค่าสภาพแวดล้อม Frontend ที่เชื่อถือได้สำหรับการตั้งค่าท้องถิ่นและ Cloud เรียนรู้การจัดการ Environment Variables ไฟล์ .env การฉีด Build-time และ Feature Flags เพื่อสลับฟังก์ชันการทำงานได้อย่างปลอดภัยข้าม Development, Staging และ Production
การจัดการไฟล์ .env และ Build-time Variablesการแยก Configs สำหรับ Dev, Staging และ ProductionRuntime Configuration และความปลอดภัยของสภาพแวดล้อมการนำ Feature Flags สำหรับ Frontend ไปใช้การจัดการ Secrets และปัญหาการตั้งค่าบทเรียนที่ 7โครงสร้างโปรเจกต์และ Folder Conventions สำหรับ Single-Page Apps (Components, Pages, Services, Hooks)ออกแบบโครงสร้างโปรเจกต์ที่ปรับขนาดได้สำหรับ Single-Page Apps เรียนรู้ Folder Conventions สำหรับ Components, Pages, Services และ Hooks และวิธีจัดระเบียบ Shared Utilities, Tests และ Styles เพื่อให้ Codebase ขนาดใหญ่ค้นหาและดูแลรักษาได้
การจัดระเบียบ Components, Pages และ LayoutsServices, Hooks และ Data Access LayersShared Utilities, Types และ Constantsการจัดโครงสร้าง Tests และ Story Filesการ Refactor สู่ Modular Boundariesบทเรียนที่ 8รูปแบบการรวม API: REST vs GraphQL Clients, การจัดการข้อผิดพลาด, Request Retries, Timeoutsนำรูปแบบการรวม API ที่แข็งแกร่งไปใช้งานฝั่ง 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: การเก็บ Token, Refresh Flows และแนวทาง Cookie ที่ปลอดภัยเข้าใจรูปแบบการรับรองตัวตน Frontend ที่ปลอดภัย เปรียบเทียบ localStorage, sessionStorage และ Cookies ออกแบบ Refresh Token Flows และนำ HttpOnly Cookies, CSRF Defenses และ Logout Strategies ไปใช้เพื่อปกป้องผู้ใช้ในแอปพลิเคชันจริง
การเก็บ Token: localStorage vs Cookiesการนำ Refresh Token Flows ไปใช้อย่างปลอดภัยHttpOnly Cookies และ CSRF Protectionการจัดการ Logout, Revocation และ RotationAuth Error Handling และ User Feedbackบทเรียนที่ 10ตัวเลือกและรูปแบบการจัดการ State (Local Component State, Context, Redux/Pinia/MobX, React Query)เปรียบเทียบตัวเลือกการจัดการ State สำหรับ Frontend ที่ซับซ้อน สำรวจ Local State, Context, Redux, Pinia, MobX และ React Query และเรียนรู้รูปแบบสำหรับ Caching, Normalization และหลีกเลี่ยง Re-renders ที่ไม่จำเป็นในแอปพลิเคชันขนาดใหญ่
Local Component State และ Lifting PatternsContext API สำหรับ Cross-cutting Concernsการออกแบบ Store Redux, Pinia และ MobXServer State ด้วย React Query หรือ SWRPerformance Tuning และ Selector Patternsบทเรียนที่ 11Routing และ Protected Routes: Client-side Routing, Route Guards, Lazy Loadingสร้าง Client-side Routing ที่เชื่อถือได้พร้อม Protected Routes เรียนรู้การตั้งค่า Routes, Nested Routes, Lazy Loading และ Route Guards ที่บังคับ Authentication และ Authorization ในขณะที่รักษาความเร็วและความเข้าถึงในการนำทาง
การตั้งค่า Client-side Routers และ RoutesNested Routes และ Layout Hierarchiesการนำ Lazy Loading และ Code Splitting ไปใช้Auth-based Route Guards และ Redirectsการจัดการ 404 Pages และ Fallback Routes