使用 React 搭配 ASP.NET Core

  • 發行項

注意

這不是這篇文章的最新版本。 如需目前版本，請參閱本文的 .NET 8 版本。

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。

如需目前版本，請參閱本文的 .NET 8 版本。

Visual Studio 提供的專案範本可根據 Angular、React 和 Vue 等具有 ASP.NET Core 後端的 JavaScript 架構來建立單頁應用程式 (SPA)。 這些範本會：

  • 建立一個包含前端專案和後端專案的 Visual Studio 解決方案。
  • 使用 Visual Studio 的 JavaScript 和 TypeScript 專案類型 (.esproj) 來開發前端專案。
  • 使用 ASP.NET Core 專案來開發後端專案。

使用 Visual Studio 範本建立的專案可在 Windows、Linux 和 macOS 上透過命令列執行。 若要執行應用程式，請使用 dotnet run --launch-profile https 執行伺服器專案。 執行伺服器專案會自動啟動前端 JavaScript 開發伺服器。 目前需要 https 啟動設定檔。

Visual Studio 教學課程

若要開始使用，請遵循 Visual Studio 文件中的使用 React 建立 ASP.NET Core 應用程式教學課程。

如需詳細資訊，請參閱 Visual Studio 中的 JavaScript 和 TypeScript

ASP.NET Core SPA 範本

Visual Studio 包含使用 JavaScript 或 TypeScript 前端建置 ASP.NET Core 應用程式的範本。 這些範本可在已安裝 ASP.NET 和 Web 開發工作負載的 Visual Studio 2022 17.8 版或更新版本中取得。

使用 JavaScript 或 TypeScript 前端建置 ASP.NET Core 應用程式的 Visual Studio 範本提供下列優點：

  • 清除前端和後端的專案區隔。
  • 隨時掌握最新的前端架構版本。
  • 整合最新的前端架構命令列工具，例如 Vite。
  • JavaScript 和 TypeScript 的範本 (僅限 TypeScript for Angular)。
  • 豐富的 JavaScript 和 TypeScript 程式碼編輯體驗。
  • 整合 JavaScript 建置工具與 .NET 組建。
  • npm 相依性管理 UI。
  • 與 Visual Studio Code 偵錯和啟動組態相容。
  • 使用 JavaScript 測試架構，在測試總管中執行前端單元測試。

舊版 ASP.NET Core SPA 範本

舊版 .NET SDK 包含使用 ASP.NET Core 建置 SPA 應用程式的舊版範本。 如需這些舊版範本的文件，請參閱 ASP.NET Core 7.0 版的 SPA 概觀 和 Angular 和 React 文章。

具有 React 專案範本的 ASP.NET Core 可利用 React 和 Create React App (CRA) 來實作功能多樣的用戶端使用者介面 (UI)，適合作為 ASP.NET Core 應用程式入門。

專案範本等同於建立 ASP.NET Core 專案作為 Web API，以及建立 CRA React 專案作為 UI。 此專案組合方便您將這兩個專案裝載於單一 ASP.NET Core 專案，而該專案可以單一單元的形式建置和發佈。

專案範本不適用於伺服器端轉譯 (SSR)。 針對具有 React 和 Node.js 的 SSR，請考慮 Next.js 或 Razzle。

建立新的應用程式

進入命令提示字元，然後在空目錄中使用 dotnet new react 命令以建立新的專案。 例如，下列命令會在 my-new-app 目錄中建立應用程式並切換到該目錄：

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

從 Visual Studio 或 .NET Core CLI 執行該應用程式：

開啟產生的 .csproj 檔案，然後在該處以一般方式來執行該應用程式。

建置程序會在首次執行時還原 npm 相依性，這可能需要幾分鐘時間才能完成。 後續建置所需的時間將會縮短。

這個專案範本會建立一個 ASP.NET Core 應用程式以及一個 React 應用程式。 ASP.NET Core 應用程式主要用於存取資料、授權以及其他伺服器端事項。 位在 ClientApp 子目錄中的 React 應用程式，是用於所有 UI 方面的作業。

新增頁面、影像、樣式、模組等等。

ClientApp 目錄是標準 CRA React 應用程式。 如需詳細資訊，請參閱官方 CRA 文件 \(英文\)。

這個範本建立的 React 應用程式以及 CRA 本身建立的應用程式，二者之間存在些微的不同，不過應用程式的功能是一樣的。 由範本所建立的應用程式包含以 Bootstrap \(英文\) 為基礎的配置，以及基本的路由範例。

安裝 npm 套件

若要安裝協力廠商 npm 套件，請在 ClientApp 子目錄中使用命令提示字元。 例如：

cd ClientApp
npm install <package_name>

發行與部署

在開發時，應用程式會以方便開發人員操作的模式執行。 例如，JavaScript 組合會包含來源對應 (以便在偵錯時，您可以看到原始程式碼)。 應用程式會監控磁碟上的 JavaScript、HTML 和 CSS 檔案變更，當發現檔案變更時，便自動重新編譯和重新載入。

在實際執行環境中，請提供具有最佳效能的應用程式版本。 這是設定為自動進行的。 當您發行時，組建組態會釋出一個經過精簡、轉譯的用戶端程式碼組建。 不同於開發組建，正式組建不需要在伺服器上安裝 Node.js。

您可以使用標準 ASP.NET Core 裝載和部署方法。

獨立執行 CRA 伺服器

專案已設定為：當 ASP.NET Core 應用程式在開發模式中啟動時，便在背景啟動它自己的 CRA 程式開發伺服器執行個體。 因為這表示您不需要手動執行不同的伺服器，所以省了不少麻煩。

此預設設定有一個缺點。 每當您修改 C# 程式碼後，需要重新啟動 ASP.NET Core 應用程式，CRA 伺服器才會重新啟動。 大約幾秒鐘時間，才會開始備份。 如果您經常編輯 C# 程式碼，且不想要等候 CRA 伺服器重新啟動，可以在外部執行 CRA 伺服器，與 ASP.NET Core 程序獨立開來。

若要在外部執行 CRA 伺服器，請在命令提示字元中切換至 ClientApp 子目錄，然後啟動 CRA 開發伺服器：

cd ClientApp
npm start

當您啟動 ASP.NET Core 應用程式，它並不會啟動 CRA 伺服器。 而是改為使用您手動啟動的執行個體。 這樣可以加快它的啟動和重新啟動速度。 不用每一次都要等候 React 應用程式來重新建置。

設定 SignalR 的 Proxy 中介軟體

如需詳細資訊，請參閱 http-proxy-middleware。

其他資源

更新的 React 專案範本可利用 React 和 create-react-app (CRA) 慣例來實作功能多樣的用戶端使用者介面 (UI)，適合作為 ASP.NET Core 應用程式入門。

這個範本相當於建立一個 ASP.NET Core 專案作為 API 後端，以及建立一個標準 CRA React 專案作為 UI，但是可以將這兩個專案裝載至單一應用程式專案中，這樣便可視為一個整體進行建置與發行。

React 專案範本不適用於伺服器端轉譯 (SSR)。 針對具有 React 和 Node.js 的 SSR，請考慮 Next.js 或 Razzle。

建立新的應用程式

進入命令提示字元，然後在空目錄中使用 dotnet new react 命令以建立新的專案。 例如，下列命令會在 my-new-app 目錄中建立應用程式並切換到該目錄：

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

從 Visual Studio 或 .NET Core CLI 執行該應用程式：

開啟產生的 .csproj 檔案，然後在該處以一般方式來執行該應用程式。

建置程序會在首次執行時還原 npm 相依性，這可能需要幾分鐘時間才能完成。 後續建置所需的時間將會縮短。

這個專案範本會建立一個 ASP.NET Core 應用程式以及一個 React 應用程式。 ASP.NET Core 應用程式主要用於存取資料、授權以及其他伺服器端事項。 位在 ClientApp 子目錄中的 React 應用程式，是用於所有 UI 方面的作業。

新增頁面、影像、樣式、模組等等。

ClientApp 目錄是標準 CRA React 應用程式。 如需詳細資訊，請參閱官方 CRA 文件 \(英文\)。

這個範本建立的 React 應用程式以及 CRA 本身建立的應用程式，二者之間存在些微的不同，不過應用程式的功能是一樣的。 由範本所建立的應用程式包含以 Bootstrap \(英文\) 為基礎的配置，以及基本的路由範例。

安裝 npm 套件

若要安裝協力廠商 npm 套件，請在 ClientApp 子目錄中使用命令提示字元。 例如：

cd ClientApp
npm install --save <package_name>

發行與部署

在開發時，應用程式會以方便開發人員操作的模式執行。 例如，JavaScript 組合會包含來源對應 (以便在偵錯時，您可以看到原始程式碼)。 應用程式會監控磁碟上的 JavaScript、HTML 和 CSS 檔案變更，當發現檔案變更時，便自動重新編譯和重新載入。

在實際執行環境中，請提供具有最佳效能的應用程式版本。 這是設定為自動進行的。 當您發行時，組建組態會釋出一個經過精簡、轉譯的用戶端程式碼組建。 不同於開發組建，正式組建不需要在伺服器上安裝 Node.js。

您可以使用標準 ASP.NET Core 裝載和部署方法。

獨立執行 CRA 伺服器

專案已設定為：當 ASP.NET Core 應用程式在開發模式中啟動時，便在背景啟動它自己的 CRA 程式開發伺服器執行個體。 因為這表示您不需要手動執行不同的伺服器，所以省了不少麻煩。

此預設設定有一個缺點。 每當您修改 C# 程式碼後，需要重新啟動 ASP.NET Core 應用程式，CRA 伺服器才會重新啟動。 大約幾秒鐘時間，才會開始備份。 如果您經常編輯 C# 程式碼，且不想要等候 CRA 伺服器重新啟動，可以在外部執行 CRA 伺服器，與 ASP.NET Core 程序獨立開來。 若要這麼做︰

  1. 使用下列設定，將 .env 檔案新增至 ClientApp 子目錄：

    BROWSER=none

    這可防止在外部啟動 CRA 伺服器時，網頁瀏覽器會開啟。

  2. 在命令提示字元中，切換至 ClientApp 子目錄，然後啟動 CRA 程式開發伺服器：

    cd ClientApp
npm start

  3. 修改您的 ASP.NET Core 應用程式來使用外部的 CRA 伺服器執行個體，而不是啟動它自己的一個執行個體。 在 Startup 類別中，將 spa.UseReactDevelopmentServer 引動過程取代為：

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

當您啟動 ASP.NET Core 應用程式，它並不會啟動 CRA 伺服器。 而是改為使用您手動啟動的執行個體。 這樣可以加快它的啟動和重新啟動速度。 不用每一次都要等候 React 應用程式來重新建置。

重要

此範本不支援「伺服器端轉譯」功能。 此範本的目標是要符合 "create-react-app" 的同位檢查。 因此，不支援 "create-react-app" 專案中未包含的案例和功能 (例如 SSR)，並會保留給使用者練習。

設定 SignalR 的 Proxy 中介軟體

如需詳細資訊，請參閱 http-proxy-middleware。

其他資源