Använda React med ASP.NET Core

Visual Studio tillhandahåller projektmallar för att skapa ensidesappar (SPA) baserat på JavaScript-tekniker, till exempel Angular, React och Vue som har en ASP.NET Core-serverdel. Följande mallar:

• Skapa en Visual Studio-lösning med ett klientdelsprojekt och ett serverdelsprojekt.
• Använd Visual Studio-projekttypen för JavaScript och TypeScript (.esproj) för klientdelen.
• Använd ett ASP.NET Core-projekt för serverdelen.

Projekt som skapats med hjälp av Visual Studio-mallarna kan köras från kommandoraden i Windows, Linux och macOS. Om du vill köra appen använder du dotnet run --launch-profile https för att köra serverprojektet. När du kör serverprojektet startas automatiskt klientdelens JavaScript-utvecklingsserver. Startprofilen https krävs för närvarande.

Självstudie om Visual Studio

Kom igång genom att följa självstudien Skapa en ASP.NET Core-app med React i Visual Studio-dokumentationen.

Mer information finns i JavaScript och TypeScript i Visual Studio

ASP.NET Core SPA-mallar

Visual Studio innehåller mallar för att skapa ASP.NET Core-appar med en JavaScript- eller TypeScript-klientdel. Dessa mallar är tillgängliga i Visual Studio 2022 version 17.8 eller senare med ASP.NET och webbutveckling arbetsbelastning installerad.

Visual Studio-mallarna för att skapa ASP.NET Core-appar med en JavaScript- eller TypeScript-klientdel erbjuder följande fördelar:

• Rensa projektavgränsning för klientdelen och serverdelen.
• Håll dig up-to-date med de senaste klientdelsramverksversionerna.
• Integrera med det senaste frontend-kommandoradsverktyget, till exempel Vite.
• Mallar för både JavaScript & TypeScript (endast TypeScript för Angular).
• Omfattande JavaScript- och TypeScript-kodredigeringsupplevelse.
• Integrera JavaScript-byggverktyg med .NET-versionen.
• användargränssnitt för npm-beroendehantering.
• Kompatibel med felsökning och startkonfiguration i Visual Studio Code.
• Kör klientdelsenhetstester i Test Explorer med hjälp av JavaScript-testramverk.

Äldre ASP.NET Core SPA-mallar

Tidigare versioner av .NET SDK inkluderade vad som nu är äldre mallar för att skapa SPA-appar med ASP.NET Core. Dokumentation om dessa äldre mallar finns i .NET 7-versionen av SPA-översikten och artiklarna Angular och React .

Projektmallen ASP.NET Core med React är en praktisk utgångspunkt för ASP.NET Core-appar som använder React och Create React App (CRA) för att implementera ett omfattande användargränssnitt på klientsidan.

Projektmallen motsvarar att skapa både ett ASP.NET Core-projekt som fungerar som ett webb-API och ett CRA React-projekt för att fungera som ett användargränssnitt. Den här projektkombinationen gör det enkelt att vara värd för båda projekten i ett enda ASP.NET Core-projekt som kan skapas och publiceras som en enda enhet.

Projektmallen är inte avsedd för återgivning på serversidan (SSR). För SSR med React och Node.jsbör du övervägaNext.js eller Razzle.

Skapa en ny app

Skapa ett nytt projekt från en kommandotolk med kommandot dotnet new react i en tom katalog. Följande kommandon skapar till exempel appen i en my-new-app katalog och växlar till den katalogen:

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

Kör appen från antingen Visual Studio eller .NET CLI:

Projektmallen skapar en ASP.NET Core-app och en React-app. ASP.NET Core-appen är avsedd att användas för dataåtkomst, auktorisering och andra problem på serversidan. React-appen, som finns i underkatalogen ClientApp , är avsedd att användas för alla användargränssnittsproblem.

Lägg till sidor, bilder, formatmallar, moduler osv.

Katalogen ClientApp är en CRA React-standardapp. Mer information finns i den officiella CRA-dokumentationen .

Det finns små skillnader mellan React-appen som skapats av den här mallen och den som skapats av SJÄLVA CRA. Appens funktioner är dock oförändrade. Appen som skapas av mallen innehåller en Bootstrap--baserad layout och ett grundläggande routningsexempel.

Installera npm-paket

Om du vill installera npm-paket från tredje part använder du en kommandotolk i ClientApp underkatalog. Till exempel:

cd ClientApp
npm install <package_name>

Publicera och implementera

Under utveckling körs appen i ett läge som är optimerat för utvecklarnas bekvämlighet. JavaScript-paket innehåller till exempel källkartor (så att du kan se den ursprungliga källkoden när du felsöker). Appen tittar på ändringar i JavaScript-, HTML- och CSS-filer på disken och kompilerar automatiskt om och laddar om när filerna ändras.

I produktion bör du tillhandahålla en version av din app som är prestandaoptimerad. Detta konfigureras så att det sker automatiskt. När du publicerar genererar byggkonfigurationen en minifierad, transpilerad version av koden på klientsidan. Till skillnad från utvecklingsversionen kräver inte produktionsversionen Node.js installeras på servern.

Du kan använda standard ASP.NET Core-värd- och distributionsmetoder.

Kör CRA-servern oberoende av varandra

Projektet är konfigurerat för att starta en egen instans av CRA-utvecklingsservern i bakgrunden när ASP.NET Core-appen startar i utvecklingsläge. Detta är praktiskt eftersom det innebär att du inte behöver köra en separat server manuellt.

Det finns en nackdel med den här standardkonfigurationen. Varje gång du ändrar C#-koden och din ASP.NET Core-app måste startas om startas CRA-servern om. Några sekunder krävs för att starta säkerhetskopieringen. Om du gör frekventa C#-kodredigeringar och inte vill vänta tills CRA-servern startas om kör du CRA-servern externt, oberoende av ASP.NET Core-processen.

Om du vill köra CRA-servern externt växlar du till underkatalogen ClientApp i en kommandotolk och startar CRA-utvecklingsservern:

cd ClientApp
npm start

När du startar din ASP.NET Core-app startar den inte en CRA-server. Den instans som du startade manuellt används i stället. På så sätt kan den startas och startas om snabbare. Du behöver inte längre vänta på att React-appen ska kompileras om varje gång.

Konfigurera proxymellanprogram för SignalR

Mer information finns i http-proxy-middleware.

Ytterligare resurser

• Använd Identity för att skydda en webb-API-serverdel för SPA:er

Den uppdaterade React-projektmallen erbjuder en praktisk utgångspunkt för ASP.NET Core-appar genom att använda React och create-react-app (CRA)-konventioner för att implementera ett rikt användargränssnitt på klientsidan.

Mallen motsvarar att skapa både ett ASP.NET Core-projekt som fungerar som en API-serverdel och ett CRA React-standardprojekt som fungerar som ett användargränssnitt, men med bekvämligheten att vara värd för både i ett enda appprojekt som kan skapas och publiceras som en enda enhet.

React-projektmallen är inte avsedd för återgivning på serversidan (SSR). För SSR med React och Node.jsbör du övervägaNext.js eller Razzle.

Skapa en ny app

Skapa ett nytt projekt från en kommandotolk med kommandot dotnet new react i en tom katalog. Följande kommandon skapar till exempel appen i en my-new-app katalog och växlar till den katalogen:

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

Kör appen från antingen Visual Studio eller .NET CLI:

Projektmallen skapar en ASP.NET Core-app och en React-app. ASP.NET Core-appen är avsedd att användas för dataåtkomst, auktorisering och andra problem på serversidan. React-appen, som finns i underkatalogen ClientApp , är avsedd att användas för alla användargränssnittsproblem.

Lägg till sidor, bilder, formatmallar, moduler osv.

Katalogen ClientApp är en CRA React-standardapp. Mer information finns i den officiella CRA-dokumentationen .

Det finns små skillnader mellan React-appen som skapats av den här mallen och den som skapats av SJÄLVA CRA. Appens funktioner är dock oförändrade. Appen som skapas av mallen innehåller en Bootstrap--baserad layout och ett grundläggande routningsexempel.

Installera npm-paket

Om du vill installera npm-paket från tredje part använder du en kommandotolk i ClientApp underkatalog. Till exempel:

cd ClientApp
npm install --save <package_name>

Publicera och implementera

Under utveckling körs appen i ett läge som är optimerat för utvecklarnas bekvämlighet. JavaScript-paket innehåller till exempel källkartor (så att du kan se den ursprungliga källkoden när du felsöker). Appen tittar på ändringar i JavaScript-, HTML- och CSS-filer på disken och kompilerar automatiskt om och laddar om när filerna ändras.

I produktion bör du tillhandahålla en version av din app som är prestandaoptimerad. Detta konfigureras så att det sker automatiskt. När du publicerar genererar byggkonfigurationen en minifierad, transpilerad version av koden på klientsidan. Till skillnad från utvecklingsversionen kräver inte produktionsversionen Node.js installeras på servern.

Du kan använda standard ASP.NET Core-värd- och distributionsmetoder.

Kör CRA-servern oberoende av varandra

Projektet är konfigurerat för att starta en egen instans av CRA-utvecklingsservern i bakgrunden när ASP.NET Core-appen startar i utvecklingsläge. Detta är praktiskt eftersom det innebär att du inte behöver köra en separat server manuellt.

Det finns en nackdel med den här standardkonfigurationen. Varje gång du ändrar C#-koden och din ASP.NET Core-app måste startas om startas CRA-servern om. Några sekunder krävs för att starta säkerhetskopieringen. Om du gör frekventa C#-kodredigeringar och inte vill vänta tills CRA-servern startas om kör du CRA-servern externt, oberoende av ASP.NET Core-processen. Så här gör du:

1. Lägg till en .env fil i underkatalogen ClientApp med följande inställning:

   BROWSER=none
   

   Detta förhindrar att webbläsaren öppnas när CRA-servern startas externt.

2. I en kommandotolk växlar du till underkatalogen ClientApp och startar CRA-utvecklingsservern:

   cd ClientApp
   npm start
   

3. Ändra din ASP.NET Core-app så att den använder den externa CRA-serverinstansen i stället för att starta en egen. I klassen Startup ersätter du spa.UseReactDevelopmentServer-anropet med följande:

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

När du startar din ASP.NET Core-app startar den inte en CRA-server. Den instans som du startade manuellt används i stället. På så sätt kan den startas och startas om snabbare. Du behöver inte längre vänta på att React-appen ska kompileras om varje gång.

Konfigurera proxymellanprogram för SignalR

Mer information finns i http-proxy-middleware.

Ytterligare resurser

• Använd Identity för att skydda en webb-API-serverdel för SPA:er