การสร้างและรันโปรเจ็กต์ 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:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
สร้างโปรเจ็กต์ React ใหม่ด้วย Vite
ใช้คำสั่งนี้เพื่อ bootstrap โปรเจ็กต์ใหม่ชื่อ servbay-react-demo โดยใช้เทมเพลตแบบ react
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx คือเครื่องมือของ npm ที่รันแพ็กเกจแบบชั่วคราว ไม่ต้องติดตั้งทั่วระบบ ทำให้ได้เวอร์ชันล่าสุดทุกครั้ง
- create-vite เป็นสคริปต์ทางการสำหรับสร้างโปรเจ็กต์ของ Vite
- servbay-react-demo คือชื่อโฟลเดอร์สำหรับโปรเจ็กต์
- --template react คือระบุให้เริ่มด้วยโครงสร้าง react
ทำตามข้อความแนะนำบนหน้าจอเพื่อสร้างโปรเจ็กต์ให้เสร็จสมบูรณ์
เข้าโฟลเดอร์และติดตั้ง dependencies
ไปยังโฟลเดอร์โปรเจ็กต์ใหม่และติดตั้ง dependencies ด้วย npm
bash
```
cd 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;

บันทึกไฟล์

เข้าสู่โหมดพัฒนา (Development Mode)

ในระหว่างการพัฒนา จะรัน local dev server เพื่อรับฟีเจอร์ HMR และความสะดวกอื่น ๆ ServBay รองรับการตั้งค่า reverse proxy ไปยัง dev server

เริ่ม dev server จาก Terminal
อยู่ในโฟลเดอร์โปรเจ็กต์ servbay-react-demo รัน Vite dev server กำหนดพอร์ต (เช่น 8585)
bash
```
npm run dev -- --port 8585
```
1
- npm 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 คู่มือเว็บไซต์
เข้าเว็บไซต์โหมดพัฒนา
เปิดเบราว์เซอร์ ไปยังโดเมนที่ตั้งไว้: 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 ใช้คำสั่งนี้
bash
```
npm 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
บันทึกข้อมูล ServBay จะตั้งค่าระบบ Web server ให้ชี้ไฟล์ static ในโฟลเดอร์นี้
ทดสอบเว็บไซต์ 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 ได้ทันที

การสร้างและรันโปรเจ็กต์ React ด้วย ServBay ​

React คืออะไร? ​

คุณสมบัติและข้อดีหลักของ React ​

การตั้งค่า ServBay สำหรับพัฒนาและรัน React ​

ข้อควรมีเบื้องต้น ​

สร้างโปรเจ็กต์ React ​

การแก้ไขหน้าแรกของโปรเจ็กต์ (ทางเลือก) ​

เข้าสู่โหมดพัฒนา (Development Mode) ​

สร้างเวอร์ชั่นสำหรับ Production ​

สรุป ​