Tooling, Testing & Production

จาก code สู่ app ที่ ship จริง

คุณเข้าใจแล้วว่า React render อย่างไรและ hooks ทำงานอย่างไร โมดูลนี้ว่าด้วยทุกอย่างรอบ ๆ code: เริ่มโปรเจกต์วันนี้อย่างไร, test component อย่างไร, type อย่างไร และใช้อะไรตอน production

จุดสำคัญเรื่อง currency: Create React App ถูก deprecated แล้ว (sunset อย่างเป็นทางการในปี 2025) React ปัจจุบันเริ่มด้วย Vite สำหรับ SPA หรือ framework (Next.js, React Router) สำหรับอะไรก็ตามที่ต้องการ routing, SSR หรือ Server Components

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Project & tooling	Vite เทียบกับ framework, DevTools, Fast Refresh — และทำไมไม่ใช้ CRA
Testing	React Testing Library บน Vitest, test behavior ไม่ใช่ internal
TypeScript with React	type props, hooks, event — และ `ref` เป็น prop ใน React 19
Production & ecosystem	code-splitting และ library ที่คุณจะใช้จริง

หน้าตาของ React setup สมัยใหม่

flowchart TB
  build["Build tool
(Vite) or framework
(Next.js / React Router)"] --> app["React app ของคุณ"]
  ts["TypeScript"] --> app
  test["Testing Library + Vitest"] --> app
  eco["Ecosystem:
routing, data, forms, state"] --> app

สิ่งที่อยู่รอบ ๆ component ในโปรเจกต์จริง

ไม่มีอันไหนเป็นตัว React เอง — React ตั้งใจเป็น library ไม่ใช่ framework คุณจึงประกอบส่วนที่เหลือเอง การรู้ตัวเลือกมาตรฐานช่วยให้ไม่ต้องคิดใหม่เอง