ใช้ Vite สร้าง Project React แบบเร็วทะลุโลก

สรุปสั้น ๆ

คือต้องบอกว่า โลกก่อนหน้านี้เวลาเราจะสร้าง Project ของ React เราจะต้องใช้ create-react-app ซึ่งก็เป็นวิธีดั้งเดิมที่ใช้กันมาตลอด แต่ถึงปัจจุบันเหล่า Dev ของเราได้ให้ความสนใจกับ Vite (อ่านว่า วีด ไม่ใช่ไวท์) ที่ทำให้เราสามารถสร้างโปรเจกต์ รวมถึง ทำงานต่าง ๆ ได้รวดเร็วขึ้น ไม่ต้องนั่งรอนานแบบเดิมแล้วว

เตรียมตัวก่อนใช้งาน Vite

Step 1 : ก่อนอื่นเราต้องติดตั้ง Node.js กันก่อน โดย version ที่เราจะใช้ในบทความนี้จะเป็น Node.js 18.16.0 LTS คู่กับโปรแกรม Visual Studio Code ที่ใช้ในการเขียน Code นั่นเอง

Step 2 : เมื่อทำการติดตั้งเสร็จแล้วให้เราทำการเปิดโฟลเดอร์หลักขึ้นมา (กดเมนูด้านบน File > Open Folder) โดยเป็นโฟลเดอร์ที่เราจะสร้าง Project React ของเราได้เลย

Step 3 : คลิกเมนู Terminal ด้านบน แล้วกด New Terminal (ใน Windows กด Ctrl + Shift + ` ได้เลย)

Step 4 : เมื่อได้หน้าต่าง Terminal มาแล้ว ให้พิมพ์คำสั่งเพื่อสร้างโปรเจกต์ตามนี้ได้เลยย

สำหรับใน Windows และ ระบบทั่วไปที่ไม่ได้ติดสิทธิ์อะไร

npm create vite@latest

สำหรับใครที่ใช้ Mac หรือ ติดสิทธิ์ ตัว npm ไม่สามารถเขียนไฟล์ได้ ก็ใช้ sudo ด้านหน้า แล้วพิมพ์รหัสได้เลย

sudo npm create vite@latest

Step 5 : โปรแกรมจะทำการสร้างโปรเจกต์ให้เรา โดยจะถามว่าเป็น Package นี้ โอเคไหม ตรงนี้เราจะทราบชื่อรุ่น กับ package ถ้าโอเค แค่เราก็กด y แล้ว enter ได้เลย

Step 6 : ต่อมาเขาจะถามชื่อโปรเจกต์ (รวมถึงชื่อ Package) แล้วต่อมาจะถามว่าเราจะสร้าง Framework (library) อะไร ในที่นี้มี Vue และ Svelte ให้เลือกด้วย แต่ถ้าเราจะใช้ React ให้เลือกเป็น React ได้เลย

Step 7 : ต่อมาเลือก Variant คือตัวภาษา กับ เครื่องมือต่าง ๆ ก็สามารถเลือกได้เลยว่าเราจะใช้ TypeScript หรือ JavaScript ส่วน SWC ที่เป็นตัว Web Compiler จะเลือกหรือไม่ก็ได้ ขึ้นกับโปรเจกต์ของเรา

Step 8 : เมื่อเรียบร้อยก็จะพบว่ามีโฟลเดอร์ของโปรเจกต์เราขึ้นมาในโฟลเดอร์โปรเจกต์ ให้เราทำการ Open Folder ดังกล่าวที่ถูกสร้างขึ้นมาใหม่

Step 9 : เมื่อเข้ามาเรียบร้อยจะอยู่ใน Path หลักลักษณะนี้

Step 10 : ให้เราเปิด Teriminal และ พิมพ์คำสั่ง

สำหรับใน Windows และ ระบบทั่วไปที่ไม่ได้ติดสิทธิ์อะไร

npm install vite

สำหรับใครที่ใช้ Mac หรือ ติดสิทธิ์ ตัว npm ไม่สามารถเขียนไฟล์ได้ ก็ใช้ sudo ด้านหน้า แล้วพิมพ์รหัสได้เลย

sudo npm install vite

Step 11 : เมื่อเรียบร้อยแล้ว ถือว่าเสร็จสิ้น ให้เราสามารถพิมพ์คำสั่ง เพื่อทำการ Run Web App ของเราที่สร้างขึ้นได้เลย

สำหรับใน Windows และ ระบบทั่วไปที่ไม่ได้ติดสิทธิ์อะไร

npm run dev

สำหรับใครที่ใช้ Mac หรือ ติดสิทธิ์ ตัว npm ไม่สามารถเขียนไฟล์ได้ ก็ใช้ sudo ด้านหน้า แล้วพิมพ์รหัสได้เลย

sudo npm run dev

หากทุกอย่างเรียบร้อยจะขึ้นหน้าจอลักษณะนี้ ตัว Vite จะทำการสร้างตัวทดสอบเว็บเราใน Localhost ให้ โดยเราสามารถเข้าไปที่ลิงก์ดังกล่าวเพื่อทดสอบเว็บเราได้เลย

และ เมื่อทดสอบเรียบร้อยก็จะขึ้นมาในลักษณะนี้นั่นเองงง รวดเร็วจัดดด !! (ทั้งนี้หน้าตา Demo อาจจะขึ้นกับ Theme ของ OS / Version ของ Vite และ React ที่อาจจะมีการเปลี่ยนแปลงในอนาคต) เราสามารถคลิกปุ่ม “count is 0” เพื่อทดสอบการทำงานได้ด้วยนะ !

สรุปจบสั้น ๆ

แม้ว่าทั้งหมดจะมี 10 ขั้นตอน แต่ว่า แต่ละขั้นตอนใช้เวลาประมาณไม่ถึง 10 วินาที ดังนั้นถ้าหากเราสร้างจนชินอาจจะใช้เวลาเพียง 1 นาทีในการสร้างโปรเจกต์ จนสามารถทดสอบได้เลย

ข้อดีเพียว ๆ ไม่ว่าจะเป็นเรื่องสั่งให้ Server ทำงานได้เร็วจัด, การที่มี HMR ที่ทำให้แก้ไขโค้ดเสร็จ ผลลัพธ์ก็ออกมาบนหน้าจอได้ทันที ไม่ต้องติดตั้งอะไรเพิ่ม, การตั้ง Configuration ต่าง ๆ ทั้ง TS, JS (และ CSS) มีมาให้เราเรียบร้อย และ สุดท้ายคือพร้อมใช้กับงานใน Production เลยนั่นเอง

และ สุดท้ายหากใครเจอ Tutorial ไหนใช้ create-react-app ก็ไม่ต้องไปตกใจ เพราะเราสามารถใช้วิธีนี้ที่สดใหม่กว่าได้เช่นกันจ้าา