React 專案範本與 ASP.NET Core 搭配使用Use the React project template with ASP.NET Core

更新的 React 專案範本可利用 React 和 create-react-app (CRA) 慣例來實作功能多樣的用戶端使用者介面 (UI),適合作為 ASP.NET Core 應用程式入門。The updated React project template provides a convenient starting point for ASP.NET Core apps using React and create-react-app (CRA) conventions to implement a rich, client-side user interface (UI).

這個範本相當於建立一個 ASP.NET Core 專案作為 API 後端,以及建立一個標準 CRA React 專案作為 UI,但是可以將這兩個專案裝載至單一應用程式專案中,這樣便可視為一個整體進行建置與發行。The template is equivalent to creating both an ASP.NET Core project to act as an API backend, and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit.

建立新的應用程式Create a new app

如已安裝 ASP.NET Core 2.1,就沒有必要安裝 React 專案範本。If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

進入命令提示字元,然後在空目錄中使用 dotnet new react 命令以建立新的專案。Create a new project from a command prompt using the command dotnet new react in an empty directory. 例如,下列命令會在 my-new-app 目錄中建立應用程式並切換到該目錄:For example, the following commands create the app in a my-new-app directory and switch to that directory:

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

從 Visual Studio 或 .NET Core CLI 執行該應用程式:Run the app from either Visual Studio or the .NET Core CLI:

開啟產生的 .csproj 檔案,然後在該處以一般方式來執行該應用程式。Open the generated .csproj file, and run the app as normal from there.

建置程序會在首次執行時還原 npm 相依性,這可能需要幾分鐘時間才能完成。The build process restores npm dependencies on the first run, which can take several minutes. 後續建置所需的時間將會縮短。Subsequent builds are much faster.

這個專案範本會建立一個 ASP.NET Core 應用程式以及一個 React 應用程式。The project template creates an ASP.NET Core app and a React app. ASP.NET Core 應用程式主要用於存取資料、授權以及其他伺服器端事項。The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. 位在 ClientApp 子目錄中的 React 應用程式,是用於所有 UI 方面的作業。The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

新增頁面、影像、樣式、模組等等。Add pages, images, styles, modules, etc.

ClientApp 目錄是標準 CRA React 應用程式。The ClientApp directory is a standard CRA React app. 如需詳細資訊,請參閱官方 CRA 文件 (英文)。See the official CRA documentation for more information.

這個範本建立的 React 應用程式以及 CRA 本身建立的應用程式,二者之間存在些微的不同,不過應用程式的功能是一樣的。There are slight differences between the React app created by this template and the one created by CRA itself; however, the app's capabilities are unchanged. 由範本所建立的應用程式包含以 Bootstrap (英文) 為基礎的配置,以及基本的路由範例。The app created by the template contains a Bootstrap-based layout and a basic routing example.

安裝 npm 套件Install npm packages

若要安裝協力廠商 npm 套件,請在 ClientApp 子目錄中使用命令提示字元。To install third-party npm packages, use a command prompt in the ClientApp subdirectory. 例如: For example:

cd ClientApp
npm install --save <package_name>

發行與部署Publish and deploy

在開發時,應用程式會以方便開發人員操作的模式執行。In development, the app runs in a mode optimized for developer convenience. 例如,JavaScript 組合會包含來源對應 (以便在偵錯時,您可以看到原始程式碼)。For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). 應用程式會監控磁碟上的 JavaScript、HTML 和 CSS 檔案變更,當發現檔案變更時,便自動重新編譯和重新載入。The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

在實際執行環境中,請提供具有最佳效能的應用程式版本。In production, serve a version of your app that's optimized for performance. 這是設定為自動進行的。This is configured to happen automatically. 當您發行時,組建組態會釋出一個經過精簡、轉譯的用戶端程式碼組建。When you publish, the build configuration emits a minified, transpiled build of your client-side code. 不同於開發組建,正式組建不需要在伺服器上安裝 Node.js。Unlike the development build, the production build doesn't require Node.js to be installed on the server.

您可以使用標準 ASP.NET Core 裝載和部署方法You can use standard ASP.NET Core hosting and deployment methods.

獨立執行 CRA 伺服器Run the CRA server independently

專案已設定為:當 ASP.NET Core 應用程式在開發模式中啟動時,便在背景啟動它自己的 CRA 程式開發伺服器執行個體。The project is configured to start its own instance of the CRA development server in the background when the ASP.NET Core app starts in development mode. 因為這表示您不需要手動執行不同的伺服器,所以省了不少麻煩。This is convenient because it means you don't have to run a separate server manually.

此預設設定有一個缺點。There's a drawback to this default setup. 每當您修改 C# 程式碼後,需要重新啟動 ASP.NET Core 應用程式,CRA 伺服器才會重新啟動。Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. 大約幾秒鐘時間,才會開始備份。A few seconds are required to start back up. 如果您經常編輯 C# 程式碼,且不想要等候 CRA 伺服器重新啟動,可以在外部執行 CRA 伺服器,與 ASP.NET Core 程序獨立開來。If you're making frequent C# code edits and don't want to wait for the CRA server to restart, run the CRA server externally, independently of the ASP.NET Core process. 方法如下:To do so:

  1. 新增 .env的檔案ClientApp子目錄,使用下列設定:Add a .env file to the ClientApp subdirectory with the following setting:

    BROWSER=none
    

    啟動 CRA 伺服器外部時,這會導致無法開啟網頁瀏覽器。This will prevent your web browser from opening when starting the CRA server externally.

  2. 在命令提示字元中,切換至 ClientApp 子目錄,然後啟動 CRA 程式開發伺服器:In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  3. 修改您的 ASP.NET Core 應用程式來使用外部的 CRA 伺服器執行個體,而不是啟動它自己的一個執行個體。Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Startup 類別中,將 spa.UseReactDevelopmentServer 引動過程取代為:In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

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

當您啟動 ASP.NET Core 應用程式,它並不會啟動 CRA 伺服器。When you start your ASP.NET Core app, it won't launch a CRA server. 而是改為使用您手動啟動的執行個體。The instance you started manually is used instead. 這樣可以加快它的啟動和重新啟動速度。This enables it to start and restart faster. 不用每一次都要等候 React 應用程式來重新建置。It's no longer waiting for your React app to rebuild each time.

重要

「 伺服器端轉譯 」 不支援的功能,此範本。"Server-side rendering" is not a supported feature of this template. 我們使用此範本的目標是符合 「 建立 react-應用程式 」 使用的同位檢查。Our goal with this template is to meet parity with "create-react-app". 因此,案例和功能不包含在 「 建立 react-應用程式 」 專案 (例如 SSR) 中不支援,而且會留給您作為練習使用者。As such, scenarios and features not included in a "create-react-app" project (such as SSR) are not supported and are left as an exercise for the user.

其他資源Additional resources