สวัสดีครับ! วันนี้ผมจะมานำเสนอวิธีสร้างโปรคเจค ReatJS อย่างง่าย ด้วยเครื่องมือที่ชื่อว่า Vite
โครงสร้างโปรเจค
my-react-app/ ├── node_modules/ ├── public/ │ ├── favicon.ico │ └── index.html ├── src/ │ ├── App.jsx │ ├── index.css │ └── main.jsx ├── .gitignore ├── index.html ├── package.json ├── README.md ├── vite.config.js └── yarn.lock (หรือ package-lock.json)
ขั้นตอนที่ 1 ติดตั้ง NodeJS ก่อนเลยนะครับ ดาวน์โหลด
ขั้นตอนที่ 2 เปิด terminal และรันคำสั่งต่อไปนี้เพื่อสร้างโปรเจกต์ใหม่ได้เลยครับ
npm create vite@latest
ขั้นตอนที่ 3 ระบบจะถามชื่อโปรเจกต์และให้เลือกเฟรมเวิร์ก ให้เลือก React นะครับ
Project name: » my-react-app (ตั้งชื่อโปรเจคตามที่ต้องการ) Select a framework: » React Select a variant: » JavaScript or TypeScript (เลือกตามที่ต้องการ)
ขั้นตอนที่ 4 เข้าไปในโฟลเดอร์โปรเจค
cd my-react-app
ขั้นตอนที่ 5 รันคำสั่งต่อไปนี้เพื่อติดตั้ง dependencies ที่จำเป็น
npm install
ขั้นตอนที่ 6 รันโปรเจคด้วยคำสั่ง
npm run dev
เปิด Browser แล้วเปิด URL : http://localhost:5173 เพียงเท่านี้เราก็จะได้โปรเจค React ของเราแล้วครับ
