สร้างและรันโปรเจกต์ React ในสภาพแวดล้อมโลคัลบน macOS ด้วย ServBay

React คืออะไร?

React คือไลบรารี JavaScript แบบโอเพ่นซอร์สที่ดูแลโดยบริษัท Meta (หรือ Facebook เดิม) ร่วมกับคอมมูนิตี้ ถูกออกแบบมาเพื่อสร้างส่วนติดต่อผู้ใช้ (UI) ด้วยแนวคิดแบบคอมโพเนนต์ สามารถสร้าง UI แบบอินเทอร์แอคทีฟที่ซับซ้อนได้อย่างมีประสิทธิภาพ เหมาะมากสำหรับการสร้าง Single Page Application (SPA) หรือเว็บแอปขนาดใหญ่ จุดแข็งหลักของ React คืออีโคซิสเต็มชุมชนที่ใหญ่ แนวคิดการเขียนโค้ดแบบ declarative และกลไก Virtual DOM ที่ช่วยรีเฟรช UI ได้อย่างรวดเร็ว

จุดเด่นและข้อดีหลักของ React

การพัฒนาแบบคอมโพเนนต์: แยก UI ที่ซับซ้อนออกเป็นคอมโพเนนต์ย่อย ๆ ที่นำกลับมาใช้ซ้ำและดูแลรักษาง่าย
มุมมองแบบประกาศ (Declarative): อธิบายสถานะของ UI อย่างง่าย React จะจัดการอัปเดต DOM ให้ตรงกับสถานะนั้นโดยอัตโนมัติ ลดความซับซ้อนของการเขียน UI
Virtual DOM: สร้าง DOM เสมือนในหน่วยความจำ เปรียบเทียบความแตกต่างก่อนอัปเดต DOM จริง ส่งผลให้ประสิทธิภาพเร็วขึ้น
ข้อมูลไหลทางเดียว (One-way Data Flow): ทำให้การเปลี่ยนแปลงสถานะหรือข้อมูลของแอปติดตามได้ง่าย
JSX: ซินแท็กซ์เฉพาะของ JavaScript ที่ช่วยให้เขียน HTML ในไฟล์ JS ได้ ทำให้โค้ดอ่านง่าย
อีโคซิสเต็มแข็งแกร่ง: มีคอมมูนิตี้ขนาดใหญ่และไลบรารีเสริมมากมาย (เช่น React Router, Redux/Zustand/MobX, Material UI ฯลฯ) ครอบคลุมทุกความต้องการ การจัดการสถานะ การกำหนดเส้นทาง UI ฯลฯ

React จึงช่วยให้นักพัฒนาสร้างเว็บแอปรูปแบบใหม่ ๆ ที่ล้ำสมัยและประสิทธิภาพสูงได้ในเวลารวดเร็ว

ตั้งค่า React Development & Production บน ServBay

ServBay คือสภาพแวดล้อมพัฒนาเว็บโลคัลที่ทรงพลังสำหรับ macOS มีซอฟต์แวร์ครบทั้ง Node.js และเครื่องมืออื่น ๆ คู่มือนี้จะแนะนำการใช้งาน Node.js และ Website ของ ServBay สำหรับสร้าง กำหนดค่า และรันโปรเจกต์ React ทีละขั้น ทั้งในโหมดนักพัฒนา (Dev) ด้วยรีเวิร์สพร็อกซี และโหมดโปรดักชัน (Production) ด้วยบริการไฟล์สเตติก

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณได้เตรียมสิ่งเหล่านี้แล้ว:

ติดตั้ง ServBay: คุณติดตั้งและรัน ServBay เรียบร้อยแล้วใน macOS
ติดตั้ง Node.js: ติดตั้ง Node.js ผ่านแอป ServBay หรือคำสั่ง CLI สามารถดูขั้นตอนละเอียดใน คู่มือการติดตั้ง Node.js ด้วย ServBay ServBay จะจัดการเวอร์ชันและ environment ให้อัตโนมัติ

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

เราจะใช้ Vite ซึ่งเป็น build tool รุ่นใหม่ที่นิยมในการสร้างโปรเจกต์ React ในปัจจุบัน เพราะสปีดเร็วมากและรองรับ HMR (Hot Module Replacement) เรียลไทม์ เหมาะแทนที่ create-react-app เดิม

เปิด Terminal และเข้าไปที่เว็บรูท
เปิด Terminal ของคุณ เส้นทางรูทของเว็บไซต์ที่ ServBay แนะนำคือ /Applications/ServBay/www เลือกเข้าไปดังนี้:
bash
```
cd /Applications/ServBay/www
```
1
สร้างโปรเจกต์ React ใหม่ด้วย Vite
ใช้คำสั่งด้านล่างเพื่อสร้างโปรเจกต์ชื่อ servbay-react-demo ด้วยเทมเพลต React:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx คือคำสั่งรัน npm package แบบชั่วคราว ใช้เวอร์ชันล่าสุดโดยไม่ต้องติดตั้งทั้งระบบ
- create-vite คือ scaffold ทางการของ Vite สำหรับสร้างโปรเจกต์
- servbay-react-demo คือชื่อโฟลเดอร์โปรเจกต์ใหม่ของคุณ
- --template react สั่งให้ Vite สร้างโปรเจกต์แบบ React ตั้งแต่แรก
ทำตามขั้นตอนที่คำสั่งแจ้งในหน้าจอจนครบ
เข้าโปรเจกต์และติดตั้ง dependency
เข้าโฟลเดอร์โปรเจกต์และสั่งติดตั้ง dependency:
bash
```
cd servbay-react-demo
npm install
```
1
2
- คุณสามารถใช้ yarn install หรือ pnpm install ได้หากต้องการ

แก้ไขหน้าแรก React (ไม่บังคับ)

เราจะลองแก้ไขหน้าแรกของโปรเจกต์เพื่อทดสอบว่า Setup สำเร็จหรือไม่

เปิดไฟล์ src/App.jsx หรือ src/App.tsx
ใช้ editor ที่คุณชอบเปิดไฟล์ src/App.jsx (ถ้าเลือก JavaScript) หรือ src/App.tsx (ถ้าเลือก TypeScript)

แก้ไขเนื้อหา

ค้นหาส่วนที่ render หน้า UI หลัก แล้วเปลี่ยนเป็นโชว์ "Hello ServBay!":

javascript

// ... other imports ...
import './App.css';

function App() {
  // ... other code ...
  return (
    <>
      {/* ... องค์ประกอบอื่น ... */}
      <h1>Hello ServBay!</h1>
      {/* ... องค์ประกอบอื่น ... */}
    </>
  );
}

export default App;

แล้วบันทึกไฟล์

โหมดพัฒนา (Development Mode)

ระหว่างพัฒนา จะใช้ local dev server ที่รองรับ hot reload อย่าง HMR เพื่อสะดวกในการปรับโค้ด ServBay สามารถใช้รีเวิร์สพร็อกซีเพื่อส่งต่อการเรียกใช้งานจากเว็บไปยังเซิร์ฟเวอร์ Dev

เริ่ม dev server ใน Terminal
จากโฟลเดอร์โปรเจกต์ servbay-react-demo รันคำสั่งเปิด Vite dev server ระบุพอร์ต (ตัวอย่างนี้ใช้ 8585):
bash
```
npm run dev -- --port 8585
```
1
- npm run dev จะรันสคริปต์ dev (ปกติคือเปิด Vite server)
- -- --port 8585 ระบุพอร์ตที่ต้องการ
เมื่อ server เปิดสำเร็จ Terminal จะแจ้ง URL เช่น http://localhost:8585 ต้องเปิด Terminal ไว้ห้ามปิด
ตั้งค่าการรีเวิร์สพร็อกซีใน ServBay
เปิดแอป ServBay ไปที่เมนู Websites จากนั้นกดเพิ่มเว็บไซต์ใหม่:
- ชื่อ (Name): ServBay React Dev (ชื่ออธิบาย)
- โดเมน (Domain): servbay-react-dev.servbay.demo (ทดสอบด้วยโดเมนสาธิตแบรนด์ ServBay)
- ประเภทเว็บไซต์ (Site Type): เลือก Reverse Proxy (รีเวิร์สพร็อกซี)
- Proxy IP: 127.0.0.1 (คือ Localhost)
- Proxy Port: 8585 (ต้องตรงกับพอร์ต dev server)
กดบันทึก ServBay จะอัปเดตและตั้งค่า Web Server (Caddy หรือ Nginx) ให้อัตโนมัติ รับ request จาก servbay-react-dev.servbay.demo แล้วส่งต่อไปที่ http://127.0.0.1:8585
ดูรายละเอียดขั้นตอนเพิ่มเว็บไซต์ในคู่มือ จัดการ Website บน ServBay
เข้าเว็บ Dev ที่สร้างไว้
เปิดเบราว์เซอร์ เข้าโดเมนที่เพิ่งตั้งไว้: https://servbay-react-dev.servbay.demo
- เนื่องจาก ServBay ตั้งใบรับรอง SSL อัตโนมัติ (จาก ServBay User CA หรือ Public CA) คุณสามารถเข้าผ่าน HTTPS ได้อย่างปลอดภัย ศึกษาเพิ่มเติมที่ SSL กับ ServBay
- เมื่อแก้ไขโค้ดใน editor แล้วบันทึก ไซต์จะรีเฟรชอัตโนมัติด้วย HMR

สร้างโปรดักชันบิลด์ (Production Build)

เมื่อพัฒนาเสร็จและพร้อมเผยแพร่โปรเจกต์ ให้คอมไพล์และแพ็คโค้ดเป็นไฟล์สเตติกสำหรับเซิฟเวอร์

สั่ง build โปรเจกต์ผ่าน Terminal
จากโฟลเดอร์โปรเจกต์ servbay-react-demo สั่ง:
bash
```
npm run build
```
1
คำสั่งนี้จะรันสคริปต์ build (ใน Vite คือแปลง source code ให้เป็นไฟล์ HTML, CSS, JS และไฟล์ asset ทั้งหมดอยู่ในโฟลเดอร์ dist) เสร็จแล้ว terminal จะแจ้งความสำเร็จ
ตั้งค่า Static File Serving ใน ServBay
ไฟล์ใน dist พร้อมที่จะเสิร์ฟแบบ static แล้ว ใน ServBay ให้เพิ่มเว็บไซต์ใหม่แบบ Static:
- ชื่อ (Name): ServBay React Prod
- โดเมน (Domain): servbay-react.servbay.demo (ตั้งชื่อให้ต่างจาก dev)
- ประเภทเว็บไซต์ (Site Type): Static
- Website Root Directory: /Applications/ServBay/www/servbay-react-demo/dist
บันทึก ServBay จะตั้ง web server ให้เสิร์ฟไฟล์จากโฟลเดอร์นี้ทันที
เข้าเว็บไซต์โปรดักชัน
เปิดเบราว์เซอร์ เข้า https://servbay-react.servbay.demo
ตอนนี้คุณก็จะได้เห็นเว็บไซต์เวอร์ชันโปรดักชันที่ถูก optimize แบบเต็มที่ พร้อม SSL อัตโนมัติ

สรุป

หลังจากตามขั้นตอนนี้ คุณจะสามารถสร้าง รัน และ deploy เว็บแอป React ของคุณในสภาพแวดล้อมโลคัล macOS กับ ServBay ได้ครบถ้วน ทั้ง dev mode แบบรีเวิร์สพร็อกซีและ production mode แบบ static ServBay ช่วยให้การตั้งค่า dev environment ง่ายขึ้นมาก ด้วย Node.js ในตัว ระบบจัดการเว็บไซต์ที่ยืดหยุ่น (proxy–static) และ SSL อัตโนมัติ เหมาะอย่างยิ่งสำหรับนักพัฒนา React ให้คุณโฟกัสไปกับโค้ด ทดสอบ และเปิดตัวแอปได้อย่างมั่นใจ

สร้างและรันโปรเจกต์ React ในสภาพแวดล้อมโลคัลบน macOS ด้วย ServBay ​

React คืออะไร? ​

จุดเด่นและข้อดีหลักของ React ​

ตั้งค่า React Development & Production บน ServBay ​

ข้อกำหนดเบื้องต้น ​

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

แก้ไขหน้าแรก React (ไม่บังคับ) ​

โหมดพัฒนา (Development Mode) ​

สร้างโปรดักชันบิลด์ (Production Build) ​

สรุป ​