วิธีการสร้างโปรเจ็ค React ด้วย Vite

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

Vite

Next Generation Frontend Tooling

Get Started

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/ ก็จะได้หน้าตาแบบนี้

หรือหากใครจะสร้างโปรเจ็คแบบใช้ 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 แบบใช้ TypeScript
• react-swc - React JavaScript ด้วย SWC
• react-ts-swc - React TypeScript ด้วย SWC