ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Appearance

Tạo và chạy dự án React trên macOS với ServBay ​

React là gì? ​

React là một thư viện JavaScript mã nguồn mở do Meta (trước đây là Facebook) cùng cộng đồng duy trì, dùng để xây dựng giao diện người dùng (UI). React tổ chức UI theo mô hình thành phần (component), giúp lập trình viên dễ dàng phát triển các Single-Page Application (SPA) hay tầng giao diện của những ứng dụng web phức tạp lớn một cách hiệu quả và dễ bảo trì. Điểm mạnh của React nằm ở phương pháp lập trình khai báo, cơ chế cập nhật virtual DOM cực kỳ tối ưu cùng hệ sinh thái cộng đồng mạnh mẽ.

Những đặc điểm nổi bật và lợi ích của React ​

  • Phát triển thành phần (Component-based): Tách UI phức tạp thành các thành phần độc lập, tái sử dụng, giúp code dễ đọc, dễ bảo trì.
  • Giao diện khai báo (Declarative UI): Chỉ cần mô tả trạng thái UI, React tự động cập nhật DOM phù hợp, đơn giản hóa logic phát triển giao diện.
  • Virtual DOM: Duy trì đại diện DOM ảo trong bộ nhớ, chỉ cập nhật phần thay đổi khi so sánh với DOM thực, tối ưu hiệu suất đáng kể.
  • Luồng dữ liệu một chiều: Dữ liệu chỉ chảy từ trên xuống, giúp việc quản lý và theo dõi trạng thái ứng dụng trở nên dễ dàng hơn.
  • JSX: Cú pháp mở rộng của JavaScript cho phép viết mã giống HTML ngay trong JS, tăng tính mạch lạc và dễ đọc cho code.
  • Hệ sinh thái mạnh: Cộng đồng đông đảo và vô số thư viện bổ trợ (như React Router, Redux/Zustand/MobX, Material UI, v.v...) phục vụ quản lý trạng thái, định tuyến, UI component…

React giúp nhà phát triển xây dựng ứng dụng web hiện đại, hiệu suất cao một cách nhanh chóng và hiệu quả hơn.

Thiết lập môi trường phát triển và sản xuất React với ServBay ​

ServBay là công cụ mạnh mẽ giúp xây dựng môi trường lập trình web local cho người dùng macOS, cung cấp sẵn nhiều gói phần mềm như Node.js. Hướng dẫn sau sẽ chỉ bạn cách tận dụng môi trường Node.js và tính năng Websites của ServBay để từng bước tạo, cấu hình và chạy dự án React, bao gồm thiết lập proxy ngược (reverse proxy) cho chế độ phát triển và triển khai tĩnh khi lên sản xuất.

Yêu cầu chuẩn bị ​

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: Đã cài đặt và khởi chạy ServBay trên macOS.
  2. Cài đặt Node.js qua ServBay: Đã cài đặt gói Node.js thông qua giao diện hoặc command-line của ServBay. Tham khảo Hướng dẫn cài Node.js qua ServBay để biết chi tiết. ServBay sẽ tự động quản lý version và biến môi trường cho Node.js.

Tạo dự án React mới ​

Chúng ta sẽ sử dụng công cụ hiện đại Vite để tạo dự án React nhanh chóng. Vite cung cấp thời gian khởi động cực nhanh và hỗ trợ Hot Module Replacement (HMR), là lựa chọn phổ biến thay thế cho create-react-app.

  1. Mở Terminal, chuyển đến thư mục gốc website

    Mở ứng dụng Terminal. Thư mục web mặc định ServBay đề xuất là /Applications/ServBay/www. Chuyển sang thư mục này:

    bash
    cd /Applications/ServBay/www

  2. Tạo dự án React mới bằng Vite

    Chạy lệnh sau để tạo dự án mới tên servbay-react-demo dùng template react thông qua create-vite:

    bash
    npx create-vite servbay-react-demo --template react
    • npx là công cụ đi kèm npm, cho phép chạy công cụ dòng lệnh từ registry mà không cần cài đặt toàn cục. Nhờ vậy luôn dùng phiên bản mới nhất.
    • create-vite là công cụ khởi tạo dự án chính thức của Vite.
    • servbay-react-demo là tên thư mục sẽ chứa dự án.
    • --template react cho biết sẽ khởi tạo cấu trúc dự án React.

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

  3. Vào thư mục dự án, cài đặt package phụ thuộc

    Đi vào thư mục dự án vừa tạo và cài dependencies bằng npm:

    bash
    cd servbay-react-demo
npm install
    • Bạn có thể dùng yarn install hoặc pnpm install nếu thích Yarn hoặc pnpm làm package manager.

Chỉnh sửa nội dung dự án React (tùy chọn) ​

Để kiểm tra mọi thứ hoạt động, ta sẽ chỉnh nhanh trang chủ hiển thị dòng chữ khác.

  1. Mở file src/App.jsx hoặc src/App.tsx

    Dùng editor yêu thích để mở file src/App.jsx (với template JS) hoặc src/App.tsx (với template TS) trong dự án của bạn.

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

    Tìm đoạn code rendering nội dung chính, sửa để hiển thị "Hello ServBay!":

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

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

export default App;

    Lưu lại file sau khi chỉnh sửa.

Chạy chế độ phát triển ​

Ở giai đoạn phát triển, ta thường chạy một server local hỗ trợ tính năng hot reload. ServBay giúp cấu hình proxy ngược để truy cập server này dễ dàng qua domain tùy chỉnh.

  1. Khởi động server phát triển trong Terminal

    Tại thư mục gốc dự án servbay-react-demo, chạy lệnh khởi động server Vite với port cụ thể (ví dụ: 8585):

    bash
    npm run dev -- --port 8585
    • npm run dev thực thi script dev trong package.json, thường là lệnh khởi động server Vite.
    • -- --port 8585 truyền tham số port cho lệnh Vite.

    Khi server chạy, terminal sẽ hiển thị địa chỉ như http://localhost:8585. Giữ nguyên cửa sổ terminal, không tắt server.

  2. Cấu hình proxy ngược trên ServBay

    Mở giao diện ServBay. Vào mục Websites. Nhấn nút Thêm để tạo website mới:

    • Tên (Name): ServBay React Dev (tên mô tả)
    • Tên miền (Domain): servbay-react-dev.servbay.demo (sử dụng domain demo của ServBay)
    • Loại site (Site Type): Chọn Reverse Proxy
    • Proxy IP: 127.0.0.1 (server chạy trên local)
    • Proxy Port: 8585 (port server vừa chạy ở bước trên)

    Lưu cấu hình lại. ServBay sẽ tự động cập nhật, thiết lập web server nội bộ (Caddy hoặc Nginx) để chuyển hướng truy vấn vào servbay-react-dev.servbay.demo tới http://127.0.0.1:8585.

    Xem hướng dẫn chi tiết về thêm website trong Tài liệu quản lý website của ServBay.

  3. Truy cập website chế độ phát triển

    Mở browser, truy cập domain bạn vừa cấu hình: https://servbay-react-dev.servbay.demo.

    • Nhờ ServBay, local site của bạn đã được cấp SSL tự động (chứng chỉ bởi ServBay User CA hoặc ServBay Public CA), có thể truy cập an toàn qua HTTPS. Tìm hiểu thêm tại Sử dụng SSL với website local.
    • Khi bạn sửa code trong editor và lưu lại, trang web sẽ tự động reload – đây chính là Hot Module Replacement (HMR).

Build bản production ​

Khi hoàn tất phát triển, bạn sẽ build ra bộ source tối ưu để triển khai sản xuất.

  1. Build sản phẩm trong Terminal

    Ở thư mục gốc 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 dùng Vite, source code của bạn sẽ được biên dịch, đóng gói và tối ưu thành files tĩnh (HTML, CSS, JS...). Kết quả thường nằm ở thư mục dist bên trong thư mục dự án. Sau khi build, terminal sẽ báo thành công.

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

    Sau khi build, thư mục dist chứa toàn bộ source sẵn sàng triển khai. Trên ServBay, tạo cấu hình website mới, trỏ tới folder này.

    Vào giao diện ServBay, mục Websites, nhấn Thêm để tạo config mới:

    • Tên (Name): ServBay React Prod (tên mô tả)
    • Domain: servbay-react.servbay.demo (domain cho môi trường production, khác domain dev)
    • Loại site: Chọn Static
    • Thư mục gốc (Website Root Directory): /Applications/ServBay/www/servbay-react-demo/dist (chính là folder build của dự án)

    Lưu để ServBay tự động setup web server phục vụ files tĩnh từ dist.

  3. Truy cập website production

    Mở trình duyệt, truy cập domain vừa cấu hình: https://servbay-react.servbay.demo.

    Bạn sẽ thấy website với giao diện đã build tối ưu. Site này cũng được bảo vệ SSL tự động nhờ ServBay.

Tổng kết ​

Với các bước trên, bạn đã tạo thành công dự án React trên macOS thông qua ServBay, cấu hình hai môi trường: dev (proxy ngược) và production (host tĩnh). ServBay giúp đơn giản hóa khâu chuẩn bị, quản lý môi trường, tích hợp Node.js, cho phép cấu hình domain và cấp chứng chỉ SSL tự động. Đây là lựa chọn lý tưởng cho lập trình viên React muốn phát triển, kiểm thử và triển khai ứng dụng một cách chuyên nghiệp ngay trên local của mình. Bạn hoàn toàn có thể tiếp tục mở rộng, phát triển và triển khai ứng dụng React trên nền tảng này.