Verwenden der React-Projektvorlage mit ASP.NET CoreUse the React project template with ASP.NET Core

Die aktualisierte React-Projektvorlage stellt einen geeigneten Anfangspunkt für ASP.NET Core-Apps dar, die React und CRA-Konventionen (create-react-app) für die Implementierung einer umfangreichen, clientseitigen Benutzerschnittstelle (User Interface, UI) verwenden.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).

Mit der Vorlage können ein ASP.NET Core-Projekt, das als API-Back-End fungieren soll, und ein CRA React-Projekt, das als Benutzeroberfläche fungieren soll, erstellt werden. Sie bietet jedoch den Komfort, dass beide Projekte in einem einzigen App-Projekt gehostet werden, das als eine Einheit erstellt und veröffentlicht werden kann.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.

Die React-Projektvorlage ist nicht für serverseitiges Rendering (SSR) vorgesehen.The React project template isn't meant for server-side rendering (SSR). Für SSR mit React und Node.js sollten Sie Next.js oder Razzle in Erwägung ziehen.For SSR with React and Node.js, consider Next.js or Razzle.

Erstellen einer neuen AppCreate a new app

Wenn ASP.NET Core 2.1 auf Ihrem Computer installiert ist, müssen Sie die Vorlage für React-Projekte nicht installieren.If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

Erstellen Sie über eine Eingabeaufforderung mit dem Befehl dotnet new react in einem leeren Verzeichnis ein neues Projekt.Create a new project from a command prompt using the command dotnet new react in an empty directory. Mit den folgenden Befehlen wird die App beispielsweise im Verzeichnis my-new-app erstellt und zu diesem Verzeichnis gewechselt: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

Führen Sie die App über Visual Studio oder die .NET Core CLI aus:Run the app from either Visual Studio or the .NET Core CLI:

Öffnen Sie die generierte CSPROJ-Datei, und führen Sie die App von dort wie gewohnt aus.Open the generated .csproj file, and run the app as normal from there.

Während der Erstellung werden bei der ersten Ausführung npm-Abhängigkeiten wiederhergestellt. Dies kann einige Minuten dauern.The build process restores npm dependencies on the first run, which can take several minutes. Nachfolgende Builds sind wesentlich schneller.Subsequent builds are much faster.

Mit der Projektvorlage werden eine ASP.NET Core-App und eine React-App erstellt.The project template creates an ASP.NET Core app and a React app. Die ASP.NET Core-App ist für die Verwendung für den Datenzugriff, die Autorisierung und weitere serverseitige Belange vorgesehen.The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. Die React-App, die sich im Unterverzeichnis ClientApp befindet, ist für sämtliche Belange der Benutzeroberfläche vorgesehen.The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Hinzufügen von Seiten, Images, Formatvorlagen, Modulen usw.Add pages, images, styles, modules, etc.

Das Verzeichnis ClientApp ist eine CRA-React-Standard-App.The ClientApp directory is a standard CRA React app. Weitere Informationen finden Sie in der offiziellen CRA-Dokumentation.See the official CRA documentation for more information.

Zwischen der React-App, die mit dieser Vorlage erstellt wurde, und der App, die von CRA selbst erstellt wurde, gibt es jedoch leichte Unterschiede; die Funktionen der App sind jedoch unverändert.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. Die mit der Vorlage erstellte App enthält ein auf Bootstrap basiertes Layout und ein Beispiel für grundlegendes Routing.The app created by the template contains a Bootstrap-based layout and a basic routing example.

NPM-Pakete installierenInstall npm packages

Verwenden Sie für die Installation von npm-Paketen von Drittanbietern eine Eingabeaufforderung im Unterverzeichnis ClientApp.To install third-party npm packages, use a command prompt in the ClientApp subdirectory. Zum Beispiel:For example:

cd ClientApp
npm install --save <package_name>

Veröffentlichen und BereitstellenPublish and deploy

Bei der Entwicklung wird die App in einem für Entwickler optimierten Modus ausgeführt.In development, the app runs in a mode optimized for developer convenience. JavaScript-Pakete enthalten beispielsweise Quellzuordnungen (damit Sie beim Debuggen Ihren ursprünglichen Quellcode anzeigen können).For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). Die App überwacht JavaScript-, HTML- und CSS-Dateiänderungen auf dem Datenträger und führt bei Feststellung dieser Dateiänderungen automatisch eine Neukompilierung und ein erneutes Laden durch.The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

Stellen Sie bei der Produktion eine für Leistung optimierte Version Ihrer App bereit.In production, serve a version of your app that's optimized for performance. Dies erfolgt gemäß der Konfiguration automatisch.This is configured to happen automatically. Beim Veröffentlichen gibt die Buildkonfiguration einen verkleinerten, transpilierten Build Ihres clientseitigen Codes aus.When you publish, the build configuration emits a minified, transpiled build of your client-side code. Im Gegensatz zum Entwicklungsbuild muss Node.js beim Produktionsbuild nicht auf dem Server installiert sein.Unlike the development build, the production build doesn't require Node.js to be installed on the server.

Sie können ASP.NET Core-Standardhosting- und -bereitstellungsmethoden verwenden.You can use standard ASP.NET Core hosting and deployment methods.

Unabhängiges Ausführen des CRA-ServersRun the CRA server independently

Das Projekt ist so konfiguriert, dass die eigene Instanz des CRA-Entwicklungsservers im Hintergrund gestartet wird, wenn die ASP.NET Core-App im Entwicklungsmodus gestartet wird.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. Dies ist nützlich, da es bedeutet, dass Sie keinen separaten Server manuell ausführen müssen.This is convenient because it means you don't have to run a separate server manually.

Bei diesem Standardsetup gibt es einen Nachteil.There's a drawback to this default setup. Jedes Mal, wenn Sie Ihren C#-Code ändern und Ihre ASP.NET Core-App neu gestartet werden muss, wird auch der CRA-Server neu gestartet.Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. Es dauert einige Sekunden, bis der Sicherungsvorgang gestartet wird.A few seconds are required to start back up. Wenn Sie Ihren C#-Code häufig bearbeiten und nicht warten möchten, bis der CRA-Server neu gestartet wurde, können Sie den CRA-Server extern ausführen, unabhängig vom ASP.NET Core-Prozess.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. Gehen Sie hierzu wie folgt vor:To do so:

  1. Fügen Sie dem Unterverzeichnis ClientApp eine ENV-Datei mit der folgenden Einstellung hinzu:Add a .env file to the ClientApp subdirectory with the following setting:

    BROWSER=none
    

    Dadurch wird verhindert, dass der Webbrowser geöffnet wird, wenn der CRA-Server extern gestartet wird.This will prevent your web browser from opening when starting the CRA server externally.

  2. Wechseln Sie in einer Eingabeaufforderung zu dem Unterverzeichnis ClientApp, und starten Sie den CRA-Bereitstellungsserver:In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  3. Ändern Sie Ihre ASP.NET Core-App so, dass die externe CRA-Serverinstanz verwendet wird, statt eine eigene Instanz zu starten.Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Ersetzen Sie den spa.UseReactDevelopmentServer-Aufruf in Ihrer Startklasse durch Folgendes:In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

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

Wenn Sie Ihre ASP.NET Core-App starten, wird kein CRA-Server gestartet.When you start your ASP.NET Core app, it won't launch a CRA server. Stattdessen wird die Instanz verwendet, die Sie manuell gestartet haben.The instance you started manually is used instead. Dadurch kann sie schneller gestartet und neu gestartet werden.This enables it to start and restart faster. So müssen Sie nicht mehr jedes Mal warten, bis Ihre React-App neu erstellt wurde.It's no longer waiting for your React app to rebuild each time.

Wichtig

„Serverseitiges Rendering“ ist kein unterstütztes Feature dieser Vorlage."Server-side rendering" is not a supported feature of this template. Unser Ziel hinsichtlich dieser Vorlage ist es, die Parität mit „create-react-app“ zu erfüllen.Our goal with this template is to meet parity with "create-react-app". Daher werden Szenarios und Features, die nicht in einem „create-react-app“-Projekt (wie SSR) enthalten sind, nicht unterstützt und stehen als Übung für die Benutzer zur Verfügung.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.

Zusätzliche RessourcenAdditional resources