Project & Tooling

Create React App ถูก deprecated แล้ว

หลายปีที่ผ่านมา คำตอบมาตรฐานของ “เริ่ม React app ยังไง?” คือ Create React App (CRA) ยุคนั้นจบแล้ว: ทีม React deprecated CRA อย่างเป็นทางการในปี 2025 ตอนนี้ติดตั้ง CRA จะขึ้น warning ชี้ไปยังตัวเลือกปัจจุบัน อย่าเริ่มโปรเจกต์ใหม่ด้วย CRA และควรพิจารณาย้ายโปรเจกต์เดิมออก

ตัวแทนคือทางแยก: build tool สำหรับ client-side SPA หรือ framework สำหรับอะไรก็ตามที่ต้องการ routing, server rendering หรือ Server Components

Vite สำหรับ single-page app

สำหรับ SPA แบบ client-rendered Vite คือมาตรฐาน: dev server ที่เร็วทันใจ, Fast Refresh และ production build ที่เร็ว

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

template react-ts ให้ React + TypeScript ตั้งค่ามาพร้อม นั่นคือ setup ทั้งหมด — ไม่ต้องเขียน config เอง

framework สำหรับ routing, SSR และ RSC

เมื่อไรที่ต้องการ routing จริง, server-side rendering, data loading หรือ React Server Components ให้หยิบ framework มาใช้แทนการประกอบเอง คำแนะนำปัจจุบันจาก React docs:

npx create-next-app@latest        # Next.js — App Router, RSC, SSR
npx create-react-router@latest    # React Router (framework mode) — routing + SSR

flowchart TB
  q{"ต้องการ routing / SSR /
Server Components?"}
  q -->|no, client SPA| vite["Vite
(build tool)"]
  q -->|yes| fw["Framework:
Next.js or React Router"]
  cra["Create React App"] -->|deprecated| x["do not use"]

เลือกวิธีเริ่ม

framework ดูแลเรื่องที่ build tool ทิ้งให้คุณจัดการ: nested route, data fetching บน server, streaming และ RSC boundary (อยู่ในโมดูล React 19) สำหรับ SPA แบบ dashboard หลัง login Vite เพียงพอ; สำหรับ content site หรืออะไรที่เน้น SEO หรือ server-data ก็คุ้มที่จะใช้ framework

dev experience

ไม่ว่าเลือกอันไหน สิ่งเหล่านี้ทำให้การพัฒนา React สนุก:

React DevTools (browser extension) — ดู component tree, props, state และ hooks; Profiler บอกว่าทำไมและ component render บ่อยแค่ไหน (สำคัญมากในโมดูล performance)
Fast Refresh — แก้ component แล้วเห็นผลทันที โดย เก็บ state ของ component ไว้ built-in ใน Vite และ framework
JSX transform สมัยใหม่ — ไม่ต้อง import React from 'react' ที่หัวทุกไฟล์แค่เพื่อใช้ JSX อีกต่อไป; compiler inject runtime import ให้ (ยังต้อง import hooks และ API ที่ใช้)
Strict Mode — ครอบ app ด้วย <StrictMode> ใน development เพื่อจับ render ที่ไม่ pure และบั๊ก effect (การ double-invoke ที่คุณเจอใน Foundations)