Tutorial und Beispielcodes für ASP.NET 5 SPA mit React
Überblick
Gehen Sie wie folgt vor, um die Standardvorlagencodes zu erstellen.
- https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&tabs=netcore-cli
Detailliertere Erläuterungen finden Sie im Folgenden.
- https://dev.to/packt/creating-spas-using-asp-net-core-and-react-59a0
Die Ordnerstruktur ist die folgende
- my-new-app ClientApp-Ordner: Dies ist die React-App. Die Build-Ausgabe im Build-Ordner wird bereitgestellt.
- Ordner „my-new-appControllers“: Dieser enthält eine Dummy-Web-API, an die die React-App Anfragen senden kann.
- Um beliebige Daten vom Backend an das Frontend zu übergeben, sollte man die Web-API verwenden. Wenn die Daten vor der Authentifizierung benötigt werden, kann man einen API-Pfad erstellen, ohne dass eine Authentifizierung erforderlich ist, um die Daten weiterzugeben, die nicht geschützt werden müssen.
- Ordner „my-new-appPages“: Dieser enthält einige Standard-ASP.NET Razor-Seiten.
- my-new-app Program.cs: Dies ist die Standard-ASP.NET-Datei.
- my-new-app Startup.cs: Dies gibt an, dass die statischen SPA-Dateien aus dem Ordner „CilentApp build“ bereitgestellt werden. Dadurch wird auch die Web-API eingerichtet.
- my-new-app WeatherForcast.cs: Dies ist das Modell, das von der Dummy-Web-API verwendet wird.
Nachdem die App ausgeführt wurde, öffnen Sie https://localhost:5001, um die Website anzuzeigen.
GitHub-Aktionen enthalten
- DOTNET-Build und Test
- CodeQL
Nützliche Visual Studio Code-Erweiterungen
- https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp
- https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Nützliche Visual Studio Code-Referenzen
- 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/
Nützliche .NET CLI-Befehle
- (Erstellen Sie die Standardvorlage für Backend und Frontend.) Dotnet New React -o My-New-App
- (Powershell) SET ASPNETCORE_ENVIRONMENT=Entwicklung
- (im Ordner „Meine-neue-App“) dotnet build
- (im Ordner „meine-neue-App“) dotnet run
