เวลาสร้างแอป React คนนิยมใช้ Create React App (CRA) แต่ตอนนี้มันเลิกพัฒนาแล้ว คนเลยสับสนว่าจะเริ่มต้นยังไง
วันนี้เราจะมาดูวิธีสร้างแอป React แบบใหม่ ที่เร็วกว่า CRA พร้อมทั้งเปรียบเทียบข้อดีของมัน และอธิบายว่าทำไมบางครั้งถึงควรใช้ framework เสริม
วิธีสร้างแอป React แบบใหม่
- ใช้ Vite: เครื่องมือสร้างแอปตัวใหม่ที่เร็วกว่า CRA เยอะ! เพราะฉะนั้น เวลาปรับแต่งโค้ด แอปจะรันเร็วขึ้น
- ตั้งค่าเองได้: Vite ให้คุณเลือกไลบรารีเสริมเอง ไม่ว่าจะเป็นการจัดการข้อมูล การกำหนดเส้นทาง (routing) หรือทดสอบ (testing)
- เหมาะกับคนเริ่มต้น: แม้ว่าจะมีอิสระในการเลือกเครื่องมือ แต่ Vite ก็ไม่ทำให้คุณหลงทาง เพราะยังคงเน้นพื้นฐานของ React
เตรียมพร้อมสำหรับการเขียน React ครับ สิ่งที่ต้องมีคือ
- VS Code - ตัว Text Editor สำหรับเขียนโค๊ด
- Prettier - เป็น Extension ของ VS Code เอาไว้ช่วย format โค๊ดของเรา
- Node / npm - เพื่อใช้ในการติดตั้ง React หรือ JavaScript library ต่างๆ
- Terminal - มี Command Line Tool หรือจะใช้ built-in ใน VS Code ก็ได้
- TypeScript / JavaScript - แนะนำ TypeScript น่ะครับมันดีกว่า 🚀
Hello World
- เริ่มต้น React ด้วยการใช้เครื่องมือที่ชื่อว่า
npm create vite@latestโดยตัวอย่าง เราจะทำการสร้างโปรเจ็ค โดยตั้งชื่อว่า hello-app
npm create vite@latest- โปรแกรมจะทำการสร้างโปรเจกต์ให้เรา โดยจะถามว่า
- Project name ชื่อโปรเจค (hello-world)
- framework เป็น React
- variant ภาษาในการพัฒนาก็เป็น TypeScript
- เข้าไปในโฟลเดอร์ของโปรเจค:
cd hello-world- รันคำสั่งติดตั้ง dependencies:
npm install- เมื่อติดตั้งเสร็จสิ้น ให้รันคำสั่งเพื่อเริ่มการพัฒนา:
npm run devโปรเจคของคุณจะถูกเริ่มต้นและเปิดใช้งานที่ http://localhost:5173 เราสามารถแก้ไขโค้ดที่อยู่ในโฟลเดอร์ "src"
- สำหรับการ build ให้ใช้คำสั่ง:
npm run buildนี่คือขั้นตอนพื้นฐานเพื่อเริ่มต้นโปรเจค React ด้วย Vite หลังจากที่คุณติดตั้งและสร้างโปรเจคไว้แล้ว คุณสามารถเริ่มพัฒนาแอปพลิเคชัน React ของคุณได้ตามปกติโดยใช้ Vite ในการให้คุณมีประสิทธิภาพที่ดีและการสร้างที่รวดเร็วในระหว่างการพัฒนา.
สรุป
Vite เป็นตัวเลือกที่ดีสำหรับการสร้างแอป React แบบใหม่ เพราะเร็วและยืดหยุ่น แต่ถ้าแอปของคุณซับซ้อน framework ก็อาจจะช่วยได้!