Utiliser le modèle de projet React avec ASP.NET CoreUse the React project template with ASP.NET Core

Note

Cette documentation ne concerne pas le modèle de projet React inclus dans ASP.NET Core 2.0.This documentation isn't about the React project template included in ASP.NET Core 2.0. Elle traite du nouveau modèle React vers lequel vous pouvez effectuer une mise à jour manuellement.It's about the newer React template to which you can update manually. Par défaut, le modèle est inclus dans ASP.NET Core 2.1.The template is included in ASP.NET Core 2.1 by default.

Le modèle de projet React mis à jour fournit un point de départ pratique pour les applications ASP.NET Core utilisant les conventions React et create-react-app (CRA) pour implémenter une interface utilisateur (IU) côté client enrichie.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).

Le modèle revient à créer un projet ASP.NET Core faisant office de backend d’API et un projet React CRA standard en guise d’interface utilisateur, qu’il héberge tous deux dans un projet d’application unique pouvant être généré et publié en tant qu’unité unique.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.

Créer une applicationCreate a new app

Si vous utilisez ASP.NET Core 2.0, vérifiez que vous avez installé le modèle de projet React mis à jour.If using ASP.NET Core 2.0, ensure you've installed the updated React project template.

Si ASP.NET Core 2.1 est installé, il est inutile d’installer le modèle de projet React.If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

Créez un projet à partir d’une invite de commandes à l’aide de la commande dotnet new react dans un répertoire vide.Create a new project from a command prompt using the command dotnet new react in an empty directory. Par exemple, les commandes suivantes créent l’application dans un répertoire my-new-app et basculent vers ce répertoire :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

Exécutez l’application à partir de Visual Studio ou de CLI .NET Core :Run the app from either Visual Studio or the .NET Core CLI:

Ouvrez le fichier .csproj généré, puis exécutez l’application normalement à partir de là.Open the generated .csproj file, and run the app as normal from there.

Le processus de génération restaure les dépendances npm à la première exécution, ce qui peut prendre plusieurs minutes.The build process restores npm dependencies on the first run, which can take several minutes. Les générations suivantes sont beaucoup plus rapides.Subsequent builds are much faster.

Le modèle de projet crée une application ASP.NET Core et une application React.The project template creates an ASP.NET Core app and a React app. L’application ASP.NET Core est destinée à être utilisée pour tous les aspects liés au serveur, tels que l’accès aux données et l’autorisation.The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. L’application React, qui réside dans le sous-répertoire ClientApp, est destinée à être utilisée pour tout ce qui touche l’interface utilisateur.The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Ajouter des pages, des images, des styles, des modules, etc.Add pages, images, styles, modules, etc.

Le répertoire ClientApp est une application React CRA standard.The ClientApp directory is a standard CRA React app. Pour plus d’informations, consultez la documentation CRA officielle.See the official CRA documentation for more information.

Il existe de légères différences entre l’application React créée par ce modèle et celle créée par CRA ; toutefois, les fonctionnalités de l’application sont identiques.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. L’application créée par le modèle contient une mise en page basée sur Bootstrap et un exemple de routage de base.The app created by the template contains a Bootstrap-based layout and a basic routing example.

Installer des packages npmInstall npm packages

Pour installer des packages npm tiers, utilisez une invite de commandes dans le sous-répertoire ClientApp.To install third-party npm packages, use a command prompt in the ClientApp subdirectory. Exemple :For example:

cd ClientApp
npm install --save <package_name>

Publier et déployerPublish and deploy

Pendant le développement, l’application s’exécute en mode optimisé pour des raisons pratiques.In development, the app runs in a mode optimized for developer convenience. Par exemple, les bundles JavaScript incluent des mappages de sources (ce qui vous permet de voir votre code source d’origine pendant le débogage).For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). L’application se recompile et se recharge automatiquement en cas de modification des fichiers JavaScript, HTML et CSS sur le disque.The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

Dans un environnement de production, fournissez une version de votre application qui est optimisée pour les performances.In production, serve a version of your app that's optimized for performance. Ce comportement est configuré pour se produire automatiquement.This is configured to happen automatically. Quand vous publiez, la configuration de build émet une build transpilée réduite de votre code côté client.When you publish, the build configuration emits a minified, transpiled build of your client-side code. Contrairement à la build de développement, la build de production n’a pas besoin que Node.js soit installé sur le serveur.Unlike the development build, the production build doesn't require Node.js to be installed on the server.

Vous pouvez utiliser des méthodes d’hébergement et de déploiement ASP.NET Core standard.You can use standard ASP.NET Core hosting and deployment methods.

Exécuter le serveur CRA indépendammentRun the CRA server independently

Le projet est configuré pour démarrer sa propre instance du serveur de développement CRA en arrière-plan quand l’application ASP.NET Core démarre en mode de développement.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. Ainsi, vous n’êtes pas obligé d’exécuter un serveur distinct manuellement.This is convenient because it means you don't have to run a separate server manually.

Cette configuration par défaut présente un inconvénient.There's a drawback to this default setup. Chaque fois que vous modifiez votre code C# et que votre application ASP.NET Core doit redémarrer, le serveur CRA redémarre.Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. Quelques secondes sont nécessaires avant de démarrer la sauvegarde.A few seconds are required to start back up. Si vous apportez des modifications fréquentes au code C# et que vous ne souhaitez pas attendre que le serveur CRA redémarre, exécutez ce dernier en externe, indépendamment du processus 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. Pour ce faire :To do so:

  1. Dans une invite de commandes, basculez vers le sous-répertoire ClientApp et lancez le serveur de développement CRA :In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  2. Modifiez votre application ASP.NET Core afin qu’elle utilise l’instance de serveur CRA externe au lieu de lancer une instance propre.Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Dans votre classe Startup, remplacez l’appel spa.UseReactDevelopmentServer par ce qui suit :In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

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

Quand vous démarrez votre application ASP.NET Core, celle-ci ne lance pas un serveur CRA.When you start your ASP.NET Core app, it won't launch a CRA server. L’instance que vous avez démarrée manuellement est utilisée à la place.The instance you started manually is used instead. Cela lui permet de démarrer et de redémarrer plus rapidement.This enables it to start and restart faster. Elle n’attend plus que votre application React soit systématiquement regénérée.It's no longer waiting for your React app to rebuild each time.