การสร้างและรันโปรเจ็กต์ React ด้วย ServBay
React คืออะไร?
React เป็นไลบรารี JavaScript แบบโอเพนซอร์สที่ดูแลโดย Meta (ชื่อเดิม Facebook) และชุมชน เหมาะสำหรับการสร้างอินเทอร์เฟซผู้ใช้ (UI) React ช่วยให้พัฒนา UI แบบอินเตอร์แอคทีฟได้ง่ายขึ้นด้วยแนวคิด component-based ส่งผลให้นักพัฒนาสามารถสร้างแอปพลิเคชันหน้าเดียว (SPA) หรือเว็บแอปลักษณะใหญ่ได้อย่างมีประสิทธิภาพและดูแลรักษาง่าย จุดเด่นของ React คือวิธีเขียนแบบ declarative, การอัปเดต DOM ด้วย Virtual DOM ที่รวดเร็ว และอีโคซิสเต็มที่แข็งแกร่งจากชุมชน
คุณสมบัติและข้อดีหลักของ React
- Component-based development: แบ่ง UI ที่ซับซ้อนออกเป็นคอมโพเนนท์ที่แยกกันและนำกลับมาใช้ใหม่ ช่วยให้โค้ดดูแลรักษาและ reuse ได้ง่าย
- Declarative views: อธิบายสถานะของ UI แบบตรงไปตรงมา React จะจัดการอัปเดต DOM ให้ตรงตามนั้น ลดความยุ่งยากใน logic ของ UI
- Virtual DOM: สร้างตัวแทน DOM ในหน่วยความจำ เปรียบเทียบความแตกต่างและลดการเปลี่ยนแปลง DOM จริง เพิ่มประสิทธิภาพ
- One-way data flow: ข้อมูลไหลจากบนลงล่าง ทำให้ติดตามและเข้าใจการเปลี่ยนแปลงสถานะได้ง่ายขึ้น
- JSX: ส่วนขยาย syntax JavaScript ที่เขียนโครงสร้างคล้าย HTML ในโค้ด JS เพิ่มความอ่านง่าย
- Ecosystem ที่แข็งแกร่ง: ชุมชนขนาดใหญ่และไลบรารีเสริมมากมาย เช่น React Router, Redux/Zustand/MobX, Material UI ครอบคลุมเรื่อง state, routing, UI components ฯลฯ
การเลือกใช้ React จะช่วยให้นักพัฒนาสร้างเว็บแอปลักษณะทันสมัยและมีประสิทธิภาพได้รวดเร็วยิ่งขึ้น
การตั้งค่า ServBay สำหรับพัฒนาและรัน React
ServBay เป็นสภาพแวดล้อมสำหรับพัฒนาเว็บบนเครื่องที่ทรงพลัง รองรับ macOS และ Windows ซึ่งรวมถึงการติดตั้ง Node.js ไว้ให้ คู่มือนี้จะสาธิตการใช้ Node.js ของ ServBay และฟีเจอร์ "Websites" สร้าง, ตั้งค่า และรันโปรเจ็กต์ React ตั้งแต่ reverse proxy สำหรับ dev ไปจนถึง static file server สำหรับ production
ข้อควรมีเบื้องต้น
ก่อนเริ่มต้น ต้องเตรียมสิ่งต่อไปนี้ให้เรียบร้อย:
- ติดตั้ง ServBay: ตรวจสอบให้แน่ใจว่าติดตั้งและรัน ServBay บนเครื่องแล้ว
- ติดตั้ง Node.js ด้วย ServBay: ติดตั้ง Node.js ผ่านอินเทอร์เฟซหรือ Terminal ของ ServBay ตามคู่มือ วิธีติดตั้ง Node.js ด้วย ServBay ServBay จะดูแลเรื่องเวอร์ชันและ environment variables ให้อัตโนมัติ
สร้างโปรเจ็กต์ React
เราจะใช้เครื่องมือสร้างโปรเจ็กต์สมัยใหม่ Vite ที่ให้ความเร็วสูงและรองรับ hot module replacement (HMR) เพื่อสร้าง React project (Vite ได้รับความนิยมแทนที่ create-react-app
)
เปิด Terminal และเข้าไปยังโฟลเดอร์เว็บไซต์
เปิดโปรแกรม Terminal โดยตำแหน่ง root directory ที่แนะนำโดย ServBay คือ
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1สร้างโปรเจ็กต์ React ใหม่ด้วย Vite
ใช้คำสั่งนี้เพื่อ bootstrap โปรเจ็กต์ใหม่ชื่อ
servbay-react-demo
โดยใช้เทมเพลตแบบ reactbashnpx create-vite servbay-react-demo --template react
1npx
คือเครื่องมือของ npm ที่รันแพ็กเกจแบบชั่วคราว ไม่ต้องติดตั้งทั่วระบบ ทำให้ได้เวอร์ชันล่าสุดทุกครั้งcreate-vite
เป็นสคริปต์ทางการสำหรับสร้างโปรเจ็กต์ของ Viteservbay-react-demo
คือชื่อโฟลเดอร์สำหรับโปรเจ็กต์--template react
คือระบุให้เริ่มด้วยโครงสร้าง react
ทำตามข้อความแนะนำบนหน้าจอเพื่อสร้างโปรเจ็กต์ให้เสร็จสมบูรณ์
เข้าโฟลเดอร์และติดตั้ง dependencies
ไปยังโฟลเดอร์โปรเจ็กต์ใหม่และติดตั้ง dependencies ด้วย npm
bashcd servbay-react-demo npm install
1
2- สามารถใช้
yarn install
หรือpnpm install
หากชอบ yarn หรือ pnpm
- สามารถใช้
การแก้ไขหน้าแรกของโปรเจ็กต์ (ทางเลือก)
เพื่อทดสอบว่าการตั้งค่าทำงานได้ถูกต้อง สามารถแก้ไขหน้าหลักของเว็บให้แสดงข้อความง่าย ๆ
เปิดไฟล์
src/App.jsx
หรือsrc/App.tsx
ใช้ code editor ที่ชื่นชอบ เปิดไฟล์ภายในโฟลเดอร์โปรเจ็กต์
src/App.jsx
(ถ้าเป็นเทมเพลต JS) หรือsrc/App.tsx
(ถ้าใช้ TypeScript)ปรับแก้เนื้อหา
หาส่วนที่ render ข้อความหลัก แล้วเปลี่ยนเป็น "Hello ServBay!"
javascript// ... imports อื่น ๆ ... import './App.css'; function App() { // ... โค้ดอื่น ๆ ... return ( <> {/* ... อิลิเมนต์อื่น ... */} <h1>Hello ServBay!</h1> {/* ... อิลิเมนต์อื่น ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15บันทึกไฟล์
เข้าสู่โหมดพัฒนา (Development Mode)
ในระหว่างการพัฒนา จะรัน local dev server เพื่อรับฟีเจอร์ HMR และความสะดวกอื่น ๆ ServBay รองรับการตั้งค่า reverse proxy ไปยัง dev server
เริ่ม dev server จาก Terminal
อยู่ในโฟลเดอร์โปรเจ็กต์
servbay-react-demo
รัน Vite dev server กำหนดพอร์ต (เช่น 8585)bashnpm run dev -- --port 8585
1npm run dev
คือรันสคริปต์dev
ที่ตั้งไว้ในpackage.json
(โดยปกติคือ Vite dev server)-- --port 8585
คือระบุพอร์ตที่ต้องการให้ dev server ใช้งาน
รอ dev server สตาร์ท จะเห็น URL เช่น
http://localhost:8585
ใน terminal อย่าปิดหน้าต่าง terminal นี้ตั้งค่า reverse proxy ใน ServBay
เปิดแอปพลิเคชัน ServBay ไปที่เมนู Websites กดเพิ่มเว็บไซต์ใหม่:
- ชื่อ (Name):
ServBay React Dev
(ชื่อแบบอธิบาย) - โดเมน (Domain):
servbay-react-dev.servbay.demo
(โดเมนสำหรับ dev) - ประเภทเว็บไซต์ (Site Type): เลือก
Reverse Proxy
- IP ที่ proxy (Proxy IP):
127.0.0.1
(dev server อยู่ในเครื่อง) - Proxy port (Proxy Port):
8585
(ตามพอร์ตที่ตั้งตอน start)
บันทึกข้อมูล ServBay จะตัดต่อ Web server (ใช้ Caddy หรือ Nginx) ให้ชี้โดเมน
servbay-react-dev.servbay.demo
ไปที่http://127.0.0.1:8585
ดูขั้นตอนละเอียดใน ServBay คู่มือเว็บไซต์
- ชื่อ (Name):
เข้าเว็บไซต์โหมดพัฒนา
เปิดเบราว์เซอร์ ไปยังโดเมนที่ตั้งไว้:
https://servbay-react-dev.servbay.demo
- ServBay จะขอ SSL certificate ให้อัตโนมัติ (จาก ServBay User CA หรือ Public CA) ดังนั้นสามารถเข้าเว็บแบบ HTTPS ได้เลย รายละเอียดเพิ่มเติมอยู่ใน ใช้ SSL ป้องกันเว็บคุณ
- ทันทีที่แก้โค้ดแล้วบันทึก หน้าในเบราว์เซอร์จะอัปเดตอัตโนมัติ นี่คือระบบ HMR (Hot Module Replacement)
สร้างเวอร์ชั่นสำหรับ Production
เมื่อพัฒนาเสร็จและพร้อม deploy ให้ build โปรเจ็กต์สำหรับการใช้งานจริง
สร้าง production build จาก Terminal
อยู่ในโฟลเดอร์โปรเจ็กต์
servbay-react-demo
ใช้คำสั่งนี้bashnpm run build
1คำสั่งนี้จะรันสคริปต์
build
ตามpackage.json
สำหรับโปรเจ็กต์ React ที่ใช้ Vite จะ compile, bundle และ optimize โค้ดทั้งหมดเป็น static files (HTML, CSS, JS, resources ฯลฯ) ผลลัพธ์อยู่ในโฟลเดอร์dist
ที่อยู่ใน root ของโปรเจ็กต์ หลังสร้างเสร็จจะมีข้อความแจ้งสำเร็จใน terminalตั้งค่า static file serving ใน ServBay
โฟลเดอร์
dist
ที่ได้มาเหมาะสำหรับใช้กับ Web server โดยตรง สามารถตั้งค่าเว็บไซต์แบบ static ใน ServBay เช่นนี้:เปิด ServBay ไปที่เมนู Websites กดเพิ่มเว็บไซต์ใหม่:
- ชื่อ (Name):
ServBay React Prod
(ชื่อแบบระบุชัด) - โดเมน (Domain):
servbay-react.servbay.demo
(โดเมนสำหรับ production) - ประเภทเว็บไซต์ (Site Type): เลือก
Static
- Website root directory: ชี้ไปยัง
dist
ที่ได้จากการ build- macOS:
/Applications/ServBay/www/servbay-react-demo/dist
- Windows:
C:\ServBay\www\servbay-react-demo\dist
- macOS:
บันทึกข้อมูล ServBay จะตั้งค่าระบบ Web server ให้ชี้ไฟล์ static ในโฟลเดอร์นี้
- ชื่อ (Name):
ทดสอบเว็บไซต์ production
เปิดเบราว์เซอร์ เข้าโดเมน:
https://servbay-react.servbay.demo
จะเห็นหน้าเว็บ production ที่ build ไว้ และรองรับ SSL ด้วย
สรุป
ด้วยขั้นตอนข้างต้น คุณสามารถใช้ ServBay บนเครื่องเพื่อตั้งค่า, สร้าง และรันโปรเจ็กต์ React ได้อย่างครบวงจร ตั้งแต่ reverse proxy สำหรับ dev ไปจนถึง static file serving ใน production ServBay ช่วยให้นักพัฒนา React บน macOS หรือ Windows สะดวกขึ้น ด้วย Node.js ที่ติดตั้งง่าย, ฟีเจอร์เว็บไซต์ที่ปรับแต่งได้ และ SSL อัตโนมัติ เตรียมพร้อมสำหรับงานพัฒนา, ทดสอบ และ deploy แอป React ได้ทันที