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

React Mar 4, 2023

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

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 แบบใช้ TypeScript
  • react-swc - React JavaScript ด้วย SWC
  • react-ts-swc - React TypeScript ด้วย SWC

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com