React — ภาพรวม
หมวดนี้ตามรูปแบบเดียวกับ Go (Golang) ซึ่งเป็น template หลักของเว็บไซต์ Tech Stack Playbook — เนื้อหาเขียนแบบ bilingual ต่อหัวข้อ: อธิบายเป็นภาษาไทยในเนื้อหาหลัก (อ่านง่าย เข้าใจเร็ว) และปิดท้ายแต่ละไฟล์ด้วยกล่อง English Summary สำหรับฝึกตอบสัมภาษณ์เป็น ภาษาอังกฤษ
ใครควรอ่านหมวดนี้
- Engineer ที่ใช้ React ในงานประจำวัน ต้องการ refresh fundamentals + best practice
- คนที่กำลังเตรียมสัมภาษณ์งานที่ใช้ React เป็นหลัก (ทั้งแบบ conceptual และ live coding)
- คนที่ต้องรีวิวโค้ด React ของทีม และอยากมี checklist อ้างอิง
โครงสร้างเนื้อหา
| หัวข้อ | เนื้อหา |
|---|---|
| Fundamentals | JSX, component, props, state, conditional rendering, list & key |
| Hooks | useState, useEffect, useRef, useMemo/useCallback, custom hooks, rules of hooks |
| Component Patterns | Composition, lifting state up, Context, children/render props/compound components |
| Performance | Reconciliation, React.memo, useMemo/useCallback caveats, code-splitting, Suspense |
| Best Practices | Project structure, naming, testing philosophy, code review checklist |
| Interview Prep | คำถามสัมภาษณ์ที่พบบ่อย พร้อมแนวคำตอบ (ไทย/อังกฤษ) |
| Live Coding | โจทย์ live coding ตัวอย่าง + วิธีคิด + เทคนิคตอนสัมภาษณ์ |
วิธีใช้งานหมวดนี้
- ถ้าใช้ React อยู่แล้ว ข้ามไป Best Practices และ Interview Prep ได้เลย
- ถ้าเพิ่งเริ่ม ไล่อ่านตามลำดับตั้งแต่ Fundamentals
- ก่อนสัมภาษณ์ 1-2 วัน ให้ซ้อมทำโจทย์ใน Live Coding แบบจับเวลา พูดออกเสียงไปด้วย
English Summary
This section follows the Go section's template: bilingual content with Thai prose for the main explanation, and an English Summary callout at the end of each file — useful for rehearsing technical interview answers in English. It covers JSX/components/props/state fundamentals, hooks, component composition patterns, performance (reconciliation, memoization, code splitting), best practices, interview prep, and live-coding drills.