Nguon: Microsoft Learn · .NET 8.0

Sử dụng React với ASP.NET Core

Nguồn: Use React with ASP.NET Core

Visual Studio cung cấp các project template (mẫu dự án) để tạo các ứng dụng trang đơn (SPA - Single Page App) dựa trên các công nghệ JavaScript, chẳng hạn như Angular, React, và Vue, có backend ASP.NET Core. Các template này:

Các dự án được tạo bằng Visual Studio template có thể chạy từ dòng lệnh trên Windows, Linux và macOS. Để chạy ứng dụng, hãy dùng dotnet run --launch-profile https để chạy server project. Việc chạy server project sẽ tự động khởi động frontend JavaScript development server. Launch profile https hiện là bắt buộc.

Hướng dẫn Visual Studio

Để bắt đầu, hãy làm theo hướng dẫn Tạo ứng dụng ASP.NET Core với React trong tài liệu Visual Studio.

Để biết thêm thông tin, xem JavaScript and TypeScript in Visual Studio.

ASP.NET Core SPA templates

Visual Studio bao gồm các template để xây dựng ứng dụng ASP.NET Core với frontend JavaScript hoặc TypeScript. Các template này có sẵn trong Visual Studio 2022 phiên bản 17.8 trở lên với workload ASP.NET and web development được cài đặt.

Các Visual Studio template mang lại những lợi ích sau:

Legacy ASP.NET Core SPA templates (Template cũ)

Các phiên bản trước của .NET SDK bao gồm những gì bây giờ là các template cũ để xây dựng ứng dụng SPA với ASP.NET Core. Để xem tài liệu về các template cũ hơn này, hãy xem phiên bản .NET 7 của SPA overview và các bài viết Angular và React.

Phiên bản .NET 6/7: ASP.NET Core với React project template

ASP.NET Core with React project template cung cấp điểm khởi đầu thuận tiện cho các ứng dụng ASP.NET Core sử dụng React và Create React App (CRA) để triển khai giao diện người dùng (UI) phong phú phía client.

Project template tương đương với việc tạo cả một dự án ASP.NET Core để hoạt động như web API và một dự án CRA React để hoạt động như UI. Sự kết hợp dự án này cung cấp sự tiện lợi khi lưu trữ cả hai dự án trong một dự án ASP.NET Core duy nhất có thể được build và xuất bản như một đơn vị duy nhất.

Project template không dành cho server-side rendering (SSR - kết xuất phía máy chủ). Đối với SSR với React và Node.js, hãy xem xét Next.js hoặc Razzle.

Tạo ứng dụng mới

Tạo dự án mới từ command prompt bằng lệnh dotnet new react trong một thư mục trống. Ví dụ: các lệnh sau tạo ứng dụng trong thư mục my-new-app và chuyển đến thư mục đó:

dotnetcli
dotnet new react -o my-new-app
cd my-new-app

Chạy ứng dụng từ Visual Studio hoặc .NET CLI:

Visual Studio: Mở tệp .csproj được tạo ra và chạy ứng dụng bình thường từ đó. Quá trình build sẽ khôi phục các phụ thuộc npm trong lần chạy đầu tiên, có thể mất vài phút. Các lần build tiếp theo sẽ nhanh hơn nhiều.

.NET CLI: Đảm bảo bạn có biến môi trường ASPNETCORE_ENVIRONMENT với giá trị Development. Trên Windows (trong non-PowerShell prompts), chạy SET ASPNETCORE_ENVIRONMENT=Development. Trên Linux hoặc macOS, chạy export ASPNETCORE_ENVIRONMENT=Development.

Chạy dotnet build để xác minh ứng dụng build thành công. Chạy dotnet run để khởi động ứng dụng.

Project template tạo ra một ứng dụng ASP.NET Core và một ứng dụng React. Ứng dụng ASP.NET Core được sử dụng cho truy cập dữ liệu, ủy quyền và các mối quan tâm phía máy chủ khác. Ứng dụng React, nằm trong thư mục con ClientApp, được sử dụng cho tất cả các mối quan tâm về UI.

Thêm trang, hình ảnh, style, module, v.v.

Thư mục ClientApp là một ứng dụng CRA React tiêu chuẩn. Xem tài liệu CRA chính thức để biết thêm thông tin.

Có một số khác biệt nhỏ giữa ứng dụng React được tạo bởi template này và ứng dụng được tạo bởi CRA; tuy nhiên, khả năng của ứng dụng không thay đổi. Ứng dụng được tạo bởi template chứa một layout dựa trên Bootstrap và một ví dụ routing cơ bản.

Cài đặt các gói npm

Để cài đặt các gói npm của bên thứ ba, hãy sử dụng command prompt trong thư mục con ClientApp. Ví dụ:

console
cd ClientApp
npm install <package_name>

Xuất bản và triển khai (Publish and deploy)

Trong quá trình phát triển, ứng dụng chạy ở chế độ được tối ưu hóa cho sự tiện lợi của nhà phát triển. Ví dụ: các JavaScript bundle bao gồm source map (bản đồ nguồn) (để khi gỡ lỗi, bạn có thể thấy mã nguồn gốc của mình). Ứng dụng theo dõi các thay đổi tệp JavaScript, HTML và CSS trên đĩa và tự động biên dịch và tải lại khi thấy các tệp đó thay đổi.

Trong môi trường production, phục vụ phiên bản ứng dụng được tối ưu hóa cho hiệu suất. Điều này được cấu hình tự động. Khi bạn xuất bản, cấu hình build tạo ra một bản build client-side được thu nhỏ (minified) và đã transpiled. Không giống build phát triển, build production không yêu cầu Node.js được cài đặt trên máy chủ.

Bạn có thể sử dụng các phương thức hosting và deployment chuẩn của ASP.NET Core.

Chạy CRA server độc lập

Dự án được cấu hình để khởi động phiên bản CRA development server riêng trong nền khi ứng dụng ASP.NET Core khởi động ở chế độ phát triển. Điều này tiện lợi vì bạn không phải chạy một máy chủ riêng theo cách thủ công.

Nhược điểm của thiết lập mặc định này là mỗi khi bạn sửa đổi mã C# và ứng dụng ASP.NET Core cần khởi động lại, CRA server cũng khởi động lại. Cần vài giây để khởi động lại. Nếu bạn thường xuyên chỉnh sửa mã C# và không muốn chờ CRA server khởi động lại, hãy chạy CRA server bên ngoài, độc lập với tiến trình ASP.NET Core.

Để chạy CRA server bên ngoài, hãy chuyển đến thư mục con ClientApp trong command prompt và khởi chạy CRA development server:

console
cd ClientApp
npm start

Khi bạn khởi động ứng dụng ASP.NET Core, nó sẽ không khởi chạy CRA server. Thay vào đó, phiên bản bạn đã khởi động thủ công được sử dụng. Điều này cho phép nó khởi động và khởi động lại nhanh hơn. Nó không còn chờ ứng dụng React của bạn build lại mỗi lần nữa.

Cấu hình proxy middleware cho SignalR

Để biết thêm thông tin, xem http-proxy-middleware.

Tài nguyên bổ sung