ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Tạo và Chạy Dự Án React với ServBay ​

React là gì? ​

React là một thư viện mã nguồn mở JavaScript được xây dựng và duy trì bởi Meta (trước đây là Facebook) cùng cộng đồng. Nó tập trung vào việc xây dựng giao diện người dùng (UI) với cách tiếp cận theo mô-đun (component), cho phép các nhà phát triển xây dựng các ứng dụng web một trang (SPA) hoặc các hệ thống UI lớn một cách linh hoạt và dễ bảo trì. Những ưu điểm nổi bật của React bao gồm lập trình khai báo, cập nhật DOM ảo hiệu quả, và một hệ sinh thái mạnh mẽ từ cộng đồng.

Những tính năng và lợi ích chính của React ​

  • Phát triển theo mô-đun: Chia nhỏ giao diện phức tạp thành các thành phần độc lập, dễ tái sử dụng, giúp cải thiện khả năng bảo trì và mở rộng code.
  • View khai báo: Đơn giản hóa logic phát triển UI bằng cách chỉ cần mô tả trạng thái UI, mọi cập nhật DOM sẽ được React tự động thực hiện.
  • Virtual DOM (DOM ảo): Bảo trì một bản mô phỏng DOM trong bộ nhớ để tối ưu hóa các thao tác DOM thực, giúp cải thiện hiệu năng rõ rệt.
  • Luồng dữ liệu một chiều: Dòng dữ liệu luôn đi từ trên xuống, giúp việc quản lý trạng thái ứng dụng rõ ràng và dễ kiểm soát hơn.
  • JSX: Mở rộng cú pháp JavaScript cho phép chèn trực tiếp cấu trúc HTML trong code, tăng khả năng đọc hiểu mã nguồn.
  • Hệ sinh thái mạnh mẽ: Sở hữu cộng đồng đông đảo cùng nhiều thư viện hỗ trợ như React Router, Redux/Zustand/MobX, Material UI… cho quản lý trạng thái, routing, component UI và hơn thế nữa.

Với React, các nhà phát triển web có thể tạo ra ứng dụng hiện đại, hiệu năng cao một cách nhanh chóng và dễ dàng.

Xây Dựng Môi Trường Phát Triển và Sản Xuất React với ServBay ​

ServBay cung cấp môi trường phát triển web mạnh mẽ trên macOS và Windows, tích hợp nhiều gói phần mềm quan trọng như Node.js. Bài hướng dẫn này sẽ chỉ bạn cách tận dụng Node.js cũng như tính năng quản lý Websites của ServBay để tạo, cấu hình và chạy dự án React từ bước đầu tiên, bao gồm thiết lập reverse proxy chế độ phát triển và website tĩnh chế độ sản xuất.

Yêu cầu trước khi bắt đầu ​

Trước khi bắt đầu, hãy đảm bảo bạn đã hoàn thành các bước sau:

  1. Cài đặt ServBay: ServBay đã được cài và chạy thành công trên hệ thống của bạn.
  2. Cài đặt Node.js: Thông qua giao diện hoặc dòng lệnh của ServBay, bạn đã cài Node.js. Tham khảo hướng dẫn cài đặt Node.js trên ServBay để biết chi tiết. ServBay tự động quản lý phiên bản và biến môi trường Node.js cho bạn.

Tạo Dự Án React ​

Chúng ta sẽ sử dụng công cụ hiện đại Vite để khởi tạo dự án React một cách nhanh chóng. Vite nổi bật với tốc độ khởi động siêu nhanh và tính năng HMR (hot module replacement), trở thành lựa chọn hàng đầu cho dự án React mới (thay thế cho create-react-app truyền thống).

  1. Mở terminal và di chuyển vào thư mục gốc websites

    Mở ứng dụng terminal bạn ưa thích. Thư mục gốc website được ServBay đề xuất là:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Khởi tạo dự án React mới với Vite

    Chạy lệnh sau để tạo dự án mới tên servbay-react-demo với template React bằng create-vite:

    bash
    npx create-vite servbay-react-demo --template react
    • npx là công cụ đi kèm npm giúp chạy các CLI tool trực tiếp mà không cần cài đặt toàn cầu, đảm bảo bạn luôn dùng bản mới nhất của create-vite.
    • create-vite là trình khởi tạo dự án chính thức của Vite.
    • servbay-react-demo sẽ là tên thư mục dự án của bạn.
    • --template react chỉ định sử dụng template React lúc khởi tạo.

    Thực hiện theo hướng dẫn trên màn hình để hoàn tất quá trình tạo dự án.

  3. Vào thư mục dự án và cài đặt dependencies

    Di chuyển vào thư mục vừa tạo, sau đó dùng npm để cài dependencies:

    bash
    cd servbay-react-demo
npm install
    • Nếu thích, bạn có thể dùng yarn install hoặc pnpm install cho các hệ quản lý gói khác phù hợp thói quen.

Tùy Chỉnh Nội Dung Dự Án React (tùy chọn) ​

Để kiểm tra cài đặt thành công, hãy thử sửa nội dung trang chủ đơn giản.

  1. Mở file src/App.jsx hoặc src/App.tsx trong dự án

    Dùng code editor bạn yêu thích, mở file src/App.jsx (nếu dùng template JavaScript) hoặc src/App.tsx (nếu dùng TypeScript).

  2. Chỉnh sửa nội dung

    Định vị phần code render nội dung chính, đổi thành câu "Hello ServBay!":

    javascript
    // ... Các import khác ...
import './App.css';

function App() {
  // ... Các đoạn code khác ...
  return (
    <>
      {/* ... Các thành phần khác ... */}
      <h1>Hello ServBay!</h1>
      {/* ... Các thành phần khác ... */}
    </>
  );
}

export default App;

    Lưu lại file.

Chuyển Sang Chế Độ Phát Triển ​

Giai đoạn phát triển thường sử dụng server cục bộ hỗ trợ HMR để tối ưu trải nghiệm. ServBay cho phép truy cập server này bằng reverse proxy.

  1. Khởi động server phát triển trên terminal

    Tại thư mục dự án servbay-react-demo, chạy lệnh sau để bật Vite server trên cổng 8585:

    bash
    npm run dev -- --port 8585
    • npm run dev chạy script dev trong package.json để khởi động Vite server.
    • -- --port 8585 dùng để chỉ định cổng truy cập.

    Sau khi khởi động thành công, bạn sẽ thấy địa chỉ truy cập thường là http://localhost:8585. Giữ terminal này mở xuyên suốt quá trình phát triển.

  2. Cấu hình reverse proxy trong ServBay

    Mở giao diện ServBay, chuyển đến phần Websites. Nhấn nút thêm website mới:

    • Tên (Name): ServBay React Dev (tên dễ nhận biết)
    • Tên miền (Domain): servbay-react-dev.servbay.demo (tên miền demo đề xuất)
    • Loại Website (Site Type): chọn Reverse Proxy
    • Proxy IP: 127.0.0.1 (server chạy cục bộ)
    • Proxy Port: 8585 (trùng với cổng server bạn vừa chạy)

    Nhấn lưu. ServBay sẽ tự cấu hình web server (Caddy hoặc Nginx) để chuyển hướng truy cập từ servbay-react-dev.servbay.demo đến http://127.0.0.1:8585.

    Xem chi tiết từng bước trong hướng dẫn quản lý website bằng ServBay.

  3. Truy cập website phát triển trên trình duyệt

    Mở trình duyệt, truy cập tên miền bạn vừa cấu hình: https://servbay-react-dev.servbay.demo.

    • Nhờ ServBay, website phát triển cục bộ đã được cấp chứng chỉ SSL bởi ServBay User CA hoặc ServBay Public CA, giúp bạn truy cập an toàn qua HTTPS. Tham khảo thêm về SSL tại Bảo vệ Website bằng SSL trên ServBay.
    • Giờ đây, mỗi khi bạn sửa file dự án và lưu lại, trang web sẽ tự động cập nhật nội dung nhờ tính năng HMR.

Build Sản Xuất ​

Khi hoàn thiện phát triển, bạn cần tạo bản build tối ưu để triển khai.

  1. Tạo bản build sản xuất trên terminal

    Tại thư mục dự án servbay-react-demo, chạy:

    bash
    npm run build

    Lệnh này sẽ chạy script build trong package.json. Đối với dự án React sử dụng Vite, toàn bộ mã nguồn sẽ được biên dịch, đóng gói và tối ưu thành các file tĩnh (HTML, CSS, JS, resource…) trong thư mục dist. Khi xong, terminal báo build thành công.

  2. Cấu hình website tĩnh trên ServBay

    Thư mục dist là nơi chứa các file tĩnh có thể phục vụ trực tiếp website. Trong ServBay, tạo một website mới trỏ về thư mục này:

    Mở giao diện ServBay, chuyển đến Websites, nhấn nút thêm mới:

    • Tên (Name): ServBay React Prod (tên nhận biết chế độ sản xuất)
    • Tên miền (Domain): servbay-react.servbay.demo (phân biệt với domain phát triển)
    • Loại website (Site Type): chọn Static
    • Thư mục gốc website (Website Root Directory): trỏ đến thư mục build:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Lưu lại. ServBay sẽ tự cấu hình web server phục vụ file tĩnh từ thư mục dist.

  3. Trải nghiệm website sản xuất

    Mở trình duyệt, truy cập domain bạn vừa tạo: https://servbay-react.servbay.demo.

    Bạn sẽ thấy giao diện website với bản build sản xuất đã được tối ưu hóa và bảo mật bằng SSL tự động.

Tổng Kết ​

Bằng các bước trên, bạn đã tạo thành công dự án React trên môi trường cục bộ với ServBay, từ phát triển với reverse proxy đến build sản xuất với website tĩnh. ServBay giúp tối giản việc thiết lập môi trường, hỗ trợ cả macOS và Windows, đặc biệt với Node.js tích hợp, cấu hình website linh hoạt (reverse proxy, static) và tự động cấp SSL. Tất cả mở ra một quy trình phát triển React thuận tiện, bảo mật và năng suất cao ngay trên máy cá nhân. Hãy tiếp tục phát triển, kiểm thử và xuất bản ứng dụng React của bạn trên nền tảng này!