Mastery: Frontend React
13 notes in this topic.
A focused collection of notes and references on Mastery: Frontend React.
React Fundamental: รากฐานที่แข็งแกร่งสู่การเป็น Pro
เข้าใจแนวคิด React พื้นฐานผ่านการเปรียบเทียบกับชีวิตจริง: State vs Props ต่างกันอย่างไร? และวิธีใช้ Hooks แบบมือโปร
Modern Data Fetching: ทิ้ง Redux แล้วมาซบอก React Query
รู้จัก TanStack Query (React Query) อาวุธลับในการจัดการ Server State ที่จะทำให้โค้ด data fetching หายไป 90% พร้อมเทคนิคการจัดการ Cache และ Invalidation ขั้นเซียน
State Management Philosophy: จริงๆ แล้วคุณอาจไม่ต้องใช้ Redux/Zustand
พอกันทีกับการเก็บทุุกอย่างไว้ใน Store กลาง! เจาะลึกแนวคิดการใช้ URL เป็นแหล่งความจริงสูงสุด (Single Source of Truth) และการแยกแยะระหว่าง Server State กับ Client State อย่างมืออาชีพ
Client-Side Data Fetching: เทคนิคการดึงข้อมูลอย่างมืออาชีพ
เลิกใช้ useEffect ดึงข้อมูลได้แล้ว! เจาะลึกกลยุทธ์การจัดการ Client-side State, การจัดการ Cache ด้วย SWR และการทำ Versioning ให้ LocalStorage เพื่อความมั่นคงของระบบ
Advanced React Architecture: เขียนโค้ดให้เพื่อนร่วมทีมรัก
ยกระดับการเขียน React สู่ระดับมืออาชีพ เจาะลึกเทคนิคการจัดการ App Initialization, การรักษา Immutability ขั้นสูง และการแก้ปัญหา Stale Closure ด้วย Pattern ที่ Senior เลือกใช้
Advanced React Performance: ปรับแต่งเว็บให้ลื่นระดับ Senior
ปราบ Re-render ให้อยู่หมัดด้วยเทคนิคที่มากกว่าแค่การใช้ useMemo เจาะลึกความผิดพลาดที่จูเนียร์มักจะทำและการออกแบบ State ที่ประหยัดทรัพยากรที่สุด
React Composition Patterns: พอกันทีกับ Boolean Props ที่รกสายตา
เจาะลึกศิลปะการประกอบร่างหน้าจอ (Composition) เลิกเขียน Component แบบ Monolith ที่รับ Props มหาศาล แล้วเปลี่ยนมาใช้ Compound Components ที่ยืดหยุ่นและดูแลรักษาง่ายขึ้น 10 เท่า
React Core Mastery: เข้าใจไส้ในที่คุณต้องรู้เพื่อเป็น Senior
เจาะลึกการทำงานของ React ตั้งแต่ปัญหาของ Real DOM ไปจนถึงการ Diffing Algorithm พร้อมเปรียบเทียบชีวิตจริงและตาราง Trade-off
React Hooks Mastery: เข้าใจกลไกและไขความลับระดับ Senior
ไม่ได้เป็นแค่ฟังก์ชัน! เจาะลึกกลไก Linked List เบื้องหลัง Hooks, วิธีแก้ปัญหา Stale Closure ที่ทำให้จูเนียร์กุมขมับ และการใช้ Memoization อย่างมีกลยุทธ์
Scalable React Architecture: จัดโครงสร้าง Folder ยังไงไม่ให้โปรเจกต์ระเบิด
เลิกกองทุุกอย่างไว้ที่ components/! เจาะลึกโครงสร้างแบบ Feature-based, เทคนิค Colocation และการออกแบบระบบให้พร้อมเติบโตได้เป็นเวลา 10 ปีโดยไม่เป็นภาระของลูกหลาน
React Rendering Mastery: เทคนิคเสกเว็บให้ลื่นระดับ 60 FPS
ไม่ได้มีแค่ useMemo! เจาะลึกกลไก Rendering Pipeline ของ Browser, เทคนิคใช้ GPU เร่งความเร็วการวาดหน้าจอ และการทำ Zero-Flicker UI ที่จะทำให้เว็บของคุณรู้สึกพรีเมียมที่สุด
React Testing Library: เลิก Test รายละเอียดโค้ด แล้วมา Test ความรู้สึก User
เขียน Test ให้เหมือนคนใช้งานจริง! เจาะลึกปรัชญาการเขียน Test ที่ทนทานต่อการ Refactor เลิกหา Component ด้วย ClassName และเปลี่ยนมาใช้ระบบ Accessibility Role แทน
React Under the Hood: Virtual DOM และ Reconciliation ทำงานยังไง?
ไม่ได้มีไว้ท่องจำ! เจาะลึกกลไกภายในของ React เข้าใจ Diffing Algorithm และ Fiber Architecture ว่าทำไม React ถึงเป็น Framework ที่ครองโลก พร้อมวิธีเขียนโค้ดให้สอดคล้องกับเครื่องยนต์หลัก