Usare il modello di progetto per React con ASP.NET CoreUse the React project template with ASP.NET Core

Il modello di progetto aggiornato per React fornisce un ottimo punto di partenza per le app ASP.NET Core che usano le convenzioni React e create-react-app (CRA) per implementare un'interfaccia utente avanzata sul lato client.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).

Il modello è equivalente alla creazione di un progetto ASP.NET Core che opera come un back-end API e un progetto React CRA standard che opera come un'interfaccia utente, ma con la praticità di ospitare entrambi in un singolo progetto di app, che può essere creato e pubblicato come una singola unità.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.

Il modello di progetto React non è progettato per il rendering lato server (SSR).The React project template isn't meant for server-side rendering (SSR). Per SSR con React e node. js, prendere in considerazione Next. js o Razzle.For SSR with React and Node.js, consider Next.js or Razzle.

Creare una nuova appCreate a new app

Se ASP.NET Core 2.1 è installato, non è necessario installare il modello di progetto React.If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

Creare un nuovo progetto da un prompt dei comandi usando il comando dotnet new react in una directory vuota.Create a new project from a command prompt using the command dotnet new react in an empty directory. Ad esempio, i comandi seguenti creano l'app in una directory my-new-app e passano a tale directory: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

Eseguire l'app da Visual Studio o dall'interfaccia della riga di comando di .NET Core:Run the app from either Visual Studio or the .NET Core CLI:

Aprire il file con estensione csproj generato ed eseguire l'app come di consueto da tale posizione.Open the generated .csproj file, and run the app as normal from there.

Alla prima esecuzione, il processo di compilazione ripristina le dipendenze di npm. Tale operazione può richiedere alcuni minuti.The build process restores npm dependencies on the first run, which can take several minutes. Le compilazioni successive sono molto più veloci.Subsequent builds are much faster.

Il modello di progetto crea un'app ASP.NET Core e un'app React.The project template creates an ASP.NET Core app and a React app. L'app ASP.NET Core è destinata all'uso per l'accesso ai dati, l'autorizzazione e altri elementi sul lato server.The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. L'app React, disponibile nella sottodirectory ClientApp, è destinata all'uso per tutti gli aspetti relativi all'interfaccia utente.The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Aggiungere pagine, immagini, stili, moduli e così via.Add pages, images, styles, modules, etc.

La directory ClientApp è un'app React CRA standard.The ClientApp directory is a standard CRA React app. Per altre informazioni, vedere la documentazione ufficiale di CRA.See the official CRA documentation for more information.

Vi sono piccole differenze tra l'app React creata tramite questo modello e quella creata tramite CRA stesso. Le funzionalità dell'app restano comunque invariate.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'app creata tramite il modello contiene un layout basato su bootstrap e un esempio di routing di base.The app created by the template contains a Bootstrap-based layout and a basic routing example.

Installa nuovi pacchetti npmInstall npm packages

Per installare i pacchetti npm di terze parti, usare un prompt dei comandi nella sottodirectory ClientApp.To install third-party npm packages, use a command prompt in the ClientApp subdirectory. Esempio:For example:

cd ClientApp
npm install --save <package_name>

Pubblicare e distribuirePublish and deploy

In fase di sviluppo, l'app viene eseguita in una modalità ottimizzata per gli sviluppatori.In development, the app runs in a mode optimized for developer convenience. Ad esempio, i bundle JavaScript includono il mapping di origine, in modo da poter visualizzare il codice sorgente originale durante il debug.For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). L'app controlla le modifiche dei file JavaScript, HTML e CSS su disco, quindi esegue automaticamente la ricompilazione e il ricaricamento quando rileva modifiche dei file.The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

Nell'ambiente di produzione usare una versione dell'app ottimizzata per le prestazioni.In production, serve a version of your app that's optimized for performance. Questo comportamento è configurato per l'esecuzione automatica.This is configured to happen automatically. Quando si esegue la pubblicazione, la configurazione della build genera una compilazione minimizzata con transpile del codice sul lato client.When you publish, the build configuration emits a minified, transpiled build of your client-side code. A differenza della build di sviluppo, la build di produzione non richiede l'installazione di Node.js nel server.Unlike the development build, the production build doesn't require Node.js to be installed on the server.

È possibile usare i metodi standard di hosting e distribuzione di ASP.NET Core.You can use standard ASP.NET Core hosting and deployment methods.

Eseguire il server CRA in modo indipendenteRun the CRA server independently

Il progetto è configurato in modo da avviare la propria istanza del server di sviluppo CRA in background all'avvio dell'app ASP.NET Core in modalità di sviluppo.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. Ciò risulta utile in quanto evita di dover eseguire manualmente un server distinto.This is convenient because it means you don't have to run a separate server manually.

Questa configurazione predefinita presenta tuttavia uno svantaggio.There's a drawback to this default setup. Ogni volta che si modifica il codice C# ed è necessario riavviare l'app ASP.NET Core, il server CRA viene riavviato.Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. Per avviare il backup sono necessari alcuni secondi.A few seconds are required to start back up. Se si apportano frequentemente modifiche al codice C# e non si vuole attendere il riavvio del server CRA, eseguire il server CRA esternamente, in modo indipendente dal processo 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. A tale scopo:To do so:

  1. Aggiungere un file con estensione ENV alla sottodirectory ClientApp con l'impostazione seguente:Add a .env file to the ClientApp subdirectory with the following setting:

    BROWSER=none
    

    In questo modo si impedisce l'apertura del Web browser all'avvio esterno del server CRA.This will prevent your web browser from opening when starting the CRA server externally.

  2. In un prompt dei comandi passare alla sottodirectory ClientApp e avviare il server di sviluppo CRA:In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  3. Modificare l'app ASP.NET Core in modo da usare l'istanza del server CRA esterno anziché avviarne una autonomamente.Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Nella classe Startup sostituire la chiamata spa.UseReactDevelopmentServer con quanto segue:In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

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

All'avvio dell'app ASP.NET Core, questa non avvierà un server CRA.When you start your ASP.NET Core app, it won't launch a CRA server. Verrà invece usata l'istanza che è stata avviata manualmente.The instance you started manually is used instead. Ciò consente di velocizzare l'avvio e il riavvio.This enables it to start and restart faster. Non è più necessario attendere che l'app React venga ricompilata ogni volta.It's no longer waiting for your React app to rebuild each time.

Importante

"Il rendering lato server" non è una funzionalità supportata di questo modello."Server-side rendering" is not a supported feature of this template. L'obiettivo di questo modello è soddisfare la parità con "create-React-app".Our goal with this template is to meet parity with "create-react-app". Di conseguenza, gli scenari e le funzionalità non inclusi in un progetto "create-React-app" (ad esempio, SSR) non sono supportati e vengono lasciati come esercizio per l'utente.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.

Risorse aggiuntiveAdditional resources