วิธีการสร้างโปรเจ็ค React ด้วย Vite
บทความแนะนำ Frontend Tooling ตัวที่ชื่อว่า Vite (อ่านว่า วีด) ซึ่งเจ้า Vite เค้านิยามตัวเองว่าเป็น Next Generation Frontend Tooling

TLDR;
แบบ Prompt:
npm create vite@latest
# หรือ Yarn
yarn create vite@latest
แบบใช้ Options
npm create vite@latest hello-react -- --template react
# แบบ TypeScript
npm create vite@latest hello-react -- --template react-ts
Features เด่นๆ คือ
- Instant Server Start - สั่งรัน Server ได้เร็วมากๆ
- Lightning Fast HMR - แก้ไขโค๊ดปุ๊บ เห็นผลลัพธ์โดยไม่ต้อง Refresh
- Rich Features - ตั้งค่า TypeScript, JSX, CSS ให้เราหมดแล้ว
- Optimized Build - รวมถึงพร้อม Build และ Deploy Production
เริ่มสร้างโปรเจ็ค
เราสามารถสร้างโปรเจ็ค React ด้วย Vite ได้ทั้ง JavaScript และ TypeScript ผ่านหน้า Wizard ใน Command Line ได้เลย
ด้วยการใช้ NPM
npm create vite@latest
หรือใช้ Yarn
yarn create vite
จากนั้นจะมี Prompt ขึ้นมาให้ถามเรา ให้เราเลือก Template / ภาษาที่จะใช้ได้เลย เช่น JavaScript หรือ TypeScript และจะใช้ SWC หรือไม่ก็เลือกได้เช่นกัน

เมื่อทำการเลือกเสร็จแล้ว ก็ทำตามที่หน้าจอบอก คือ เข้าไปโฟลเดอร์ที่เราเพิ่งสร้าง และก็ติดตั้ง dependencies สุดท้าย start ด้วยคำสั่ง yarn dev
cd hello-vite
yarn
yarn dev
เมื่อเปิดหน้าเว็บ http://localhost:5173/ ก็จะได้หน้าตาแบบนี้

yarn dev
หรือหากใครจะสร้างโปรเจ็คแบบใช้ Option ด้วยคำสั่งเดียวเลย ก็สามารถเลือก template ได้แบบนี้
npm create vite@latest hello-react -- --template react
# แบบ TypeScript
npm create vite@latest hello-react -- --template react-ts
ตัว Template ของ React ได้แก่
react
- React แบบ JavaScript ธรรมดาreact-ts
- React แบบใช้ TypeScriptreact-swc
- React JavaScript ด้วย SWCreact-ts-swc
- React TypeScript ด้วย SWC