Delen via

React gebruiken met ASP.NET Core

  • Artikel

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Visual Studio biedt projectsjablonen voor het maken van apps met één pagina (SPA's) op basis van JavaScript-frameworks zoals Angular-, Reacten Vue- met een ASP.NET Core-back-end. Deze sjablonen:

  • Maak een Visual Studio-oplossing met een front-endproject en een back-endproject.
  • Gebruik het Visual Studio-projecttype voor JavaScript en TypeScript (.esproj) voor de front-end.
  • Gebruik een ASP.NET Core-project voor de back-end.

Projecten die zijn gemaakt met behulp van de Visual Studio-sjablonen kunnen worden uitgevoerd vanaf de opdrachtregel in Windows, Linux en macOS. Als u de app wilt uitvoeren, gebruikt u dotnet run --launch-profile https om het serverproject uit te voeren. Als u het serverproject uitvoert, wordt de front-end JavaScript-ontwikkelserver automatisch gestart. Het https startprofiel is momenteel vereist.

Visual Studio-zelfstudie

Om aan de slag te gaan, volg de Handleiding Een ASP.NET Core-app maken met React in de Visual Studio-documentatie.

Zie JavaScript en TypeScript in Visual Studio voor meer informatie

ASP.NET Core SPA-sjablonen

Visual Studio bevat sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end. Deze sjablonen zijn beschikbaar in Visual Studio 2022 versie 17.8 of hoger met de ASP.NET en webontwikkeling workload geïnstalleerd.

De Visual Studio-sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end bieden de volgende voordelen:

  • Schone projectscheiding voor de front-end en back-end.
  • Blijf up-to-up-to-date met de nieuwste front-end frameworkversies.
  • Integreer met de nieuwste command-linetools voor frontend-frameworks, zoals Vite.
  • Sjablonen voor zowel JavaScript & TypeScript (alleen TypeScript voor Angular).
  • Uitgebreide bewerkingservaring voor JavaScript- en TypeScript-code.
  • Integreer JavaScript-buildhulpprogramma's met de .NET-build.
  • gebruikersinterface voor npm-afhankelijkheidsbeheer.
  • Compatibel met foutopsporing en startconfiguratie van Visual Studio Code.
  • Voer frontend-unittests uit in Test Explorer met behulp van JavaScript-testframeworks.

Verouderde ASP.NET Core SPA-sjablonen

Eerdere versies van de .NET SDK bevatten wat nu verouderde sjablonen zijn voor het bouwen van SPA-apps met ASP.NET Core. Zie de ASP.NET Core 7.0-versie van het SPA-overzicht en de artikelen Angular en React voor documentatie over deze oudere sjablonen.

De ASP.NET Core met React-projectsjabloon biedt een handig startpunt voor ASP.NET Core-apps met React en React App (CRA) maken om een uitgebreide gebruikersinterface (UI) aan de clientzijde te implementeren.

De projectsjabloon is gelijk aan het maken van zowel een ASP.NET Core-project als een web-API en een CRA React-project om te fungeren als een gebruikersinterface. Deze projectcombinatie biedt het gemak van het hosten van beide projecten in één ASP.NET Core-project dat als één eenheid kan worden gebouwd en gepubliceerd.

De projectsjabloon is niet bedoeld voor server-side rendering (SSR). Voor SSR met React en Node.jskunt u Next.js of Razzleoverwegen.

Een nieuwe app maken

Maak een nieuw project vanaf een opdrachtprompt met behulp van de opdracht dotnet new react in een lege map. Met de volgende opdrachten maakt u de app bijvoorbeeld in een my-new-app map en schakelt u over naar die map:

dotnet new react -o my-new-app
cd my-new-app

Voer de app uit vanuit Visual Studio of de .NET CLI:

Open het gegenereerde .csproj-bestand en voer de app daar normaal uit.

Het buildproces herstelt npm-afhankelijkheden van de eerste uitvoering, wat enkele minuten kan duren. Volgende builds zijn veel sneller.

De projectsjabloon maakt een ASP.NET Core-app en een React-app. De ASP.NET Core-app is bedoeld om te worden gebruikt voor gegevenstoegang, autorisatie en andere problemen aan de serverzijde. De React-app, die zich in de submap ClientApp bevindt, is bedoeld om te worden gebruikt voor alle problemen met de gebruikersinterface.

Pagina's, afbeeldingen, stijlen, modules, enzovoort toevoegen.

De ClientApp directory is een standaard CRA React-app. Zie de officiële documentatie van CRA voor meer informatie.

Er zijn kleine verschillen tussen de React-app die door deze sjabloon is gemaakt en de app die door CRA zelf is gemaakt; de mogelijkheden van de app zijn echter ongewijzigd. De app die door de sjabloon is gemaakt, bevat een Bootstrap-indeling-indeling en een eenvoudig routeringsvoorbeeld.

NPM-pakketten installeren

Als u npm-pakketten van derden wilt installeren, gebruikt u een opdrachtprompt in de submap ClientApp. Bijvoorbeeld:

cd ClientApp
npm install <package_name>

Publiceren en implementeren

In ontwikkeling wordt de app uitgevoerd in een modus die is geoptimaliseerd voor het gemak van ontwikkelaars. JavaScript-bundels bevatten bijvoorbeeld bronkaarten (zodat u bij foutopsporing de oorspronkelijke broncode kunt zien). De app bekijkt wijzigingen in JavaScript-, HTML- en CSS-bestanden op schijf en worden automatisch opnieuw gecompileert en opnieuw geladen wanneer deze bestanden worden gewijzigd.

In de productieomgeving serveert u een versie van uw app die geoptimaliseerd is voor de prestaties. Dit wordt automatisch geconfigureerd. Wanneer u publiceert, genereert de buildconfiguratie een geminimaliseerde en getranspileerde build van uw client-side code. In tegenstelling tot de ontwikkelingsbuild hoeft de productie-build niet Node.js op de server te worden geïnstalleerd.

U kunt standaard-ASP.NET Core-hosting- en implementatiemethodengebruiken.

De CRA-server onafhankelijk uitvoeren

Het project is geconfigureerd om een eigen exemplaar van de CRA-ontwikkelingsserver op de achtergrond te starten wanneer de ASP.NET Core-app in de ontwikkelingsmodus wordt gestart. Dit is handig omdat dit betekent dat u geen afzonderlijke server handmatig hoeft uit te voeren.

Er is een nadeel van deze standaardinstelling. Telkens wanneer u uw C#-code wijzigt en uw ASP.NET Core-app opnieuw moet worden opgestart, wordt de CRA-server opnieuw opgestart. Er zijn een paar seconden nodig om weer op te starten. Als u regelmatig C#-codebewerkingen uitvoert en niet wilt wachten totdat de CRA-server opnieuw is opgestart, voert u de CRA-server extern uit, onafhankelijk van het ASP.NET Core-proces.

Als u de CRA-server extern wilt uitvoeren, schakelt u over naar de submap ClientApp in een opdrachtprompt en start u de CRA-ontwikkelingsserver:

cd ClientApp
npm start

Wanneer u uw ASP.NET Core-app start, wordt er geen CRA-server gestart. Het exemplaar dat u handmatig hebt gestart, wordt in plaats daarvan gebruikt. Hierdoor kan het sneller worden gestart en opnieuw opgestart. Er wordt niet langer gewacht totdat uw React-app elke keer opnieuw wordt opgebouwd.

Proxy-middleware configureren voor SignalR

Zie http-proxy-middlewarevoor meer informatie.

Aanvullende informatiebronnen

De bijgewerkte React-projectsjabloon biedt een handig startpunt voor ASP.NET Core-apps met React en maken-react-app-conventies (CRA) om een uitgebreide gebruikersinterface (UI) aan de clientzijde te implementeren.

De sjabloon is gelijk aan het maken van zowel een ASP.NET Core-project als een API-back-end en een standaard CRA React-project om te fungeren als een gebruikersinterface, maar met het gemak van het hosten van beide in één app-project dat als één eenheid kan worden gebouwd en gepubliceerd.

De React-projectsjabloon is niet bedoeld voor server-side rendering (SSR). Voor SSR met React en Node.jskunt u Next.js of Razzleoverwegen.

Een nieuwe app maken

Maak een nieuw project vanaf een opdrachtprompt met behulp van de opdracht dotnet new react in een lege map. Met de volgende opdrachten maakt u de app bijvoorbeeld in een my-new-app map en schakelt u over naar die map:

dotnet new react -o my-new-app
cd my-new-app

Voer de app uit vanuit Visual Studio of de .NET CLI:

Open het gegenereerde .csproj-bestand en voer de app daar normaal uit.

Het buildproces herstelt npm-afhankelijkheden van de eerste uitvoering, wat enkele minuten kan duren. Volgende builds zijn veel sneller.

De projectsjabloon maakt een ASP.NET Core-app en een React-app. De ASP.NET Core-app is bedoeld om te worden gebruikt voor gegevenstoegang, autorisatie en andere problemen aan de serverzijde. De React-app, die zich in de submap ClientApp bevindt, is bedoeld om te worden gebruikt voor alle problemen met de gebruikersinterface.

Pagina's, afbeeldingen, stijlen, modules, enzovoort toevoegen.

De ClientApp directory is een standaard CRA React-app. Zie de officiële documentatie van CRA voor meer informatie.

Er zijn kleine verschillen tussen de React-app die door deze sjabloon is gemaakt en de app die door CRA zelf is gemaakt; de mogelijkheden van de app zijn echter ongewijzigd. De app die door de sjabloon is gemaakt, bevat een Bootstrap-indeling-indeling en een eenvoudig routeringsvoorbeeld.

NPM-pakketten installeren

Als u npm-pakketten van derden wilt installeren, gebruikt u een opdrachtprompt in de submap ClientApp. Bijvoorbeeld:

cd ClientApp
npm install --save <package_name>

Publiceren en implementeren

In ontwikkeling wordt de app uitgevoerd in een modus die is geoptimaliseerd voor het gemak van ontwikkelaars. JavaScript-bundels bevatten bijvoorbeeld bronkaarten (zodat u bij foutopsporing de oorspronkelijke broncode kunt zien). De app bekijkt wijzigingen in JavaScript-, HTML- en CSS-bestanden op schijf en worden automatisch opnieuw gecompileert en opnieuw geladen wanneer deze bestanden worden gewijzigd.

In productie zorgt u voor een versie van uw app die geoptimaliseerd is voor prestaties. Dit wordt automatisch geconfigureerd. Wanneer u publiceert, produceert de buildconfiguratie een verkleinde, getranspileerde build van uw client-side code. In tegenstelling tot de ontwikkelingsbuild, vereist de productiebouw niet dat Node.js op de server wordt geïnstalleerd.

U kunt standaard-ASP.NET Core-hosting- en implementatiemethodengebruiken.

De CRA-server onafhankelijk uitvoeren

Het project is geconfigureerd om een eigen exemplaar van de CRA-ontwikkelingsserver op de achtergrond te starten wanneer de ASP.NET Core-app in de ontwikkelingsmodus wordt gestart. Dit is handig omdat dit betekent dat u geen afzonderlijke server handmatig hoeft uit te voeren.

Er is een nadeel van deze standaardinstelling. Telkens wanneer u uw C#-code wijzigt en uw ASP.NET Core-app opnieuw moet worden opgestart, wordt de CRA-server opnieuw opgestart. Een paar seconden zijn nodig om opnieuw op te starten. Als u regelmatig C#-codebewerkingen uitvoert en niet wilt wachten totdat de CRA-server opnieuw is opgestart, voert u de CRA-server extern uit, onafhankelijk van het ASP.NET Core-proces. Ga hiervoor als volgt te werk:

  1. Voeg een .env-bestand toe aan de submap ClientApp met de volgende instelling:

    BROWSER=none

    Hierdoor wordt voorkomen dat uw webbrowser wordt geopend wanneer de CRA-server extern wordt gestart.

  2. Ga in een opdrachtprompt naar de submap ClientApp en start de CRA-ontwikkelserver:

    cd ClientApp
npm start

  3. Wijzig uw ASP.NET Core-app om het externe CRA-serverexemplaar te gebruiken in plaats van een eigen exemplaar te starten. Vervang in uw Startup-klasse de spa.UseReactDevelopmentServer aanroep door het volgende:

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

Wanneer u uw ASP.NET Core-app start, wordt er geen CRA-server gestart. Het exemplaar dat u handmatig hebt gestart, wordt in plaats daarvan gebruikt. Hierdoor kan het sneller worden gestart en opnieuw opgestart. Er wordt niet langer gewacht totdat uw React-app elke keer opnieuw wordt opgebouwd.

Belangrijk

'Rendering aan serverzijde' is geen ondersteunde functie van deze sjabloon. Ons doel met deze sjabloon is om gelijkwaardigheid te bereiken met *create-react-app*. Als zodanig worden scenario's en functies die niet zijn opgenomen in een 'create-react-app'-project (zoals SSR) niet ondersteund en blijven ze over als oefening voor de gebruiker.

Proxy-middleware configureren voor SignalR

Zie http-proxy-middlewarevoor meer informatie.

Aanvullende informatiebronnen