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 ​

React là gì? ​

React là một thư viện JavaScript mã nguồn mở được duy trì bởi Facebook để xây dựng giao diện người dùng. Nó tập trung vào việc xây dựng lớp nhìn và cho phép các nhà phát triển xây dựng giao diện người dùng phức tạp một cách hiệu quả thông qua cách tiếp cận qua các thành phần. Ý tưởng cốt lõi của React là thành phần và luồng dữ liệu một chiều, giúp mã dễ hiểu và bảo trì hơn.

Các đặc điểm và lợi ích chính của React ​

  • Thành phần hóa: Xây dựng giao diện người dùng qua các thành phần, giúp mã modul hóa và tái sử dụng hơn.
  • DOM ảo: React sử dụng DOM ảo để tối ưu hóa hiệu suất, chỉ cập nhật DOM thật khi cần thiết.
  • Luồng dữ liệu một chiều: Dữ liệu lưu thông một chiều giữa các thành phần, quản lý trạng thái của ứng dụng rõ ràng và dự đoán được.
  • Cộng đồng mạnh mẽ và hệ sinh thái phong phú: React có một cộng đồng lớn và nhiều thư viện hỗ trợ của bên thứ ba, giúp phát triển dễ dàng hơn.

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

Sử dụng ServBay để tạo và chạy dự án React ​

Trong bài viết này, chúng ta sẽ sử dụng môi trường Node.js được cung cấp bởi ServBay để tạo và chạy một dự án React. Chúng ta sẽ sử dụng tính năng 'máy chủ' của ServBay để thiết lập máy chủ web và sử dụng proxy ngược và dịch vụ tệp tĩnh để truy cập dự án.

Tạo dự án React ​

  1. Khởi tạo dự án

    Trước tiên, đảm bảo rằng bạn đã cài đặt môi trường Node.js được cung cấp bởi ServBay. Sau đó, sử dụng lệnh sau để khởi tạo một dự án React mới:

    bash
    cd /Applications/ServBay/www
npx create-react-app servbay-react-app

  2. Cài đặt phụ thuộc

    Truy cập vào thư mục dự án và cài đặt các phụ thuộc:

    bash
    cd servbay-react-app
npm install

Chỉnh sửa nội dung đầu ra của dự án React ​

  1. Chỉnh sửa tệp src/App.js

    Mở tệp src/App.js, sửa nội dung để trang web hiển thị "Hello ServBay!":

    javascript
    import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello ServBay!</h1>
      </header>
    </div>
  );
}

export default App;

Chuyển sang chế độ phát triển ​

  1. Chạy máy chủ phát triển

    Khởi động máy chủ phát triển và chỉ định cổng (ví dụ: 8585):

    bash
    npm start -- --port 8585

    Điều này sẽ khởi động một máy chủ phát triển cục bộ và mở cổng 8585.

  2. Cấu hình proxy ngược của ServBay

    Sử dụng tính năng 'máy chủ' của ServBay để truy cập vào máy chủ phát triển thông qua proxy ngược. Trong cài đặt 'máy chủ' của ServBay, thêm một proxy ngược mới:

    • Tên: My first React dev site
    • Tên miền: servbay-react-test.dev
    • Loại máy chủ: Proxy ngược
    • IP: 127.0.0.1
    • Cổng: 8585

    Chi tiết các bước cài đặt, vui lòng tham khảo thêm trang web phát triển Nodejs.

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

    Mở trình duyệt, truy cập https://servbay-react-test.dev để xem dự án theo thời gian thực. ServBay hỗ trợ tên miền tuỳ chỉnh và chứng chỉ SSL miễn phí, bạn sẽ có bảo mật cao hơn.

Xây dựng phiên bản sản xuất ​

  1. Xây dựng phiên bản sản xuất

    Khi đã hoàn thành phát triển, sử dụng lệnh sau để xây dựng phiên bản sản xuất:

    bash
    npm run build

    Sau khi xây dựng hoàn tất, các tệp tĩnh sẽ nằm trong thư mục build.

  2. Thiết lập dịch vụ tệp tĩnh

    Sử dụng tính năng 'máy chủ' của ServBay để truy cập phiên bản sản xuất qua dịch vụ tệp tĩnh. Trong cài đặt 'máy chủ' của ServBay, thêm một trang web tĩnh mới:

    • Tên: My first React production site
    • Tên miền: servbay-react-test.prod
    • Loại máy chủ: Tĩnh
    • Thư mục gốc của trang web: /Applications/ServBay/www/servbay-react-app/build

  3. Truy cập chế độ sản xuất

    Mở trình duyệt, truy cập https://servbay-react-test.prod để xem phiên bản sản xuất đã xây dựng. Với tên miền tuỳ chỉnh và chứng chỉ SSL miễn phí của ServBay, trang web của bạn sẽ có bảo mật và độ tin cậy cao hơn.

Thông qua các bước trên, bạn đã tạo và chạy thành công một dự án React và sử dụng các tính năng mà ServBay cung cấp để quản lý và truy cập dự án của mình.