net5 react tutorial

使用 React 的 ASP.NET 5 SPA 教學課程和範例程式碼

概述

請依照下列步驟建立預設模板程式碼。

• https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&tabs=netcore-cli

您可以查看以下內容以取得更詳細的說明。

• https://dev.to/packt/creating-spas-using-asp-net-core-and-react-59a0

資料夾結構如下

• my-new-app ClientApp 資料夾：這是 React 應用程式。將提供建置資料夾中的建置輸出。
• my-new-app Controllers 資料夾：其中有一個虛擬 Web API，React 應用程式可以向其發送請求。
  • 要將任何資料從後端傳遞到前端，應該使用 Web API。如果在認證之前需要數據，那麼可以建立一個無需認證的API路徑來傳遞不需要保護的數據。
• my-new-app Pages 資料夾：其中包含一些標準 ASP.NET Razor 頁面。
• my-new-app Program.cs：這是標準的 ASP.NET 檔案。
• my-new-app Startup.cs：這指定它正在為 CilentApp build 資料夾中的 SPA 靜態檔案提供服務。這也設定了 Web API。
• my-new-app WeatherForcast.cs：這具有虛擬 Web API 使用的模型。

應用程式運行後，打開 https://localhost:5001 以查看網站。

包含 GitHub 操作

• DOTNET 建置與測試
• 代碼QL

有用的 Visual Studio Code 擴充功能

• https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp
• https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

有用的 Visual Studio Code 參考

• https://docs.microsoft.com/en-us/dotnet/core/tutorials/with-visual-studio-code#debug
• https://docs.microsoft.com/en-us/dotnet/core/tools/
• https://stackoverflow.com/questions/34275209/xml-auto-commenting-c-sharp-in-visual-studio-code
• https://stackoverflow.com/questions/47995468/vscode-c-sharp-go-to-definition-f12-not-working
• https://www.strathweb.com/2019/04/roslyn-analyzers-in-code-fixes-in-omnisharp-and-vs-code/

有用的 .NET CLI 指令

• （為後端和前端建立預設模板） dotnet new React -o my-new-app
• (Powershell) SET ASPNETCORE_ENVIRONMENT=開發
• （在 my-new-app 資料夾中）dotnet build
• （在 my-new-app 資料夾中） dotnet run