Używanie platformy React z platformą ASP.NET Core

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Program Visual Studio udostępnia szablony projektów do tworzenia aplikacji jednostronicowych (SPA) opartych na strukturach Języka JavaScript, takich jak Angular, React i Vue , które mają zaplecze platformy ASP.NET Core. Te szablony:

  • Utwórz rozwiązanie programu Visual Studio z projektem frontonu i projektem zaplecza.
  • Użyj typu projektu programu Visual Studio dla języków JavaScript i TypeScript (esproj) dla frontonu.
  • Użyj projektu ASP.NET Core dla zaplecza.

Projekty utworzone przy użyciu szablonów programu Visual Studio można uruchamiać z poziomu wiersza polecenia w systemach Windows, Linux i macOS. Aby uruchomić aplikację, użyj polecenia dotnet run --launch-profile https , aby uruchomić projekt serwera. Uruchomienie projektu serwera powoduje automatyczne uruchomienie serwera programistycznego JavaScript frontonu. Profil uruchamiania https jest obecnie wymagany.

Samouczek programu Visual Studio

Aby rozpocząć pracę, postępuj zgodnie z samouczkiem Tworzenie aplikacji ASP.NET Core za pomocą platformy React w dokumentacji programu Visual Studio.

Aby uzyskać więcej informacji, zobacz JavaScript i TypeScript w programie Visual Studio

szablony spa ASP.NET Core

Program Visual Studio zawiera szablony do tworzenia aplikacji ASP.NET Core z frontonem javaScript lub TypeScript. Te szablony są dostępne w programie Visual Studio 2022 w wersji 17.8 lub nowszej z zainstalowanym obciążeniem ASP.NET i tworzenie aplikacji internetowych.

Szablony programu Visual Studio do kompilowania aplikacji ASP.NET Core za pomocą frontonu JavaScript lub TypeScript oferują następujące korzyści:

  • Czyszczenie separacji projektów dla frontonu i zaplecza.
  • Bądź na bieżąco z najnowszymi wersjami platformy frontonu.
  • Integracja z najnowszymi narzędziami wiersza polecenia platformy frontonu, takimi jak Vite.
  • Szablony dla języków JavaScript i TypeScript (tylko TypeScript dla platformy Angular).
  • Rozbudowane środowisko edytowania kodu w języku JavaScript i TypeScript.
  • Integrowanie narzędzi kompilacji języka JavaScript z kompilacją platformy .NET.
  • Interfejs użytkownika zarządzania zależnościami npm.
  • Zgodne z konfiguracją debugowania i uruchamiania programu Visual Studio Code.
  • Uruchamianie testów jednostkowych frontonu w Eksploratorze testów przy użyciu platform testowych JavaScript.

Starsze szablony spa ASP.NET Core

Starsze wersje zestawu .NET SDK zawierały starsze szablony do tworzenia aplikacji SPA za pomocą platformy ASP.NET Core. Aby uzyskać dokumentację dotyczącą tych starszych szablonów, zobacz artykuły ASP.NET Core 7.0 z omówieniem SPA oraz artykułami Angular i React.

Szablon projektu platformy ASP.NET Core z platformą React zapewnia wygodny punkt wyjścia dla aplikacji platformy ASP.NET Core korzystających z oprogramowania React i Create React App (CRA) w celu zaimplementowania rozbudowanego interfejsu użytkownika po stronie klienta.

Szablon projektu jest odpowiednikiem tworzenia zarówno projektu ASP.NET Core, aby działał jako internetowy interfejs API, jak i projekt CRA React, który działa jako interfejs użytkownika. Ta kombinacja projektu oferuje wygodę hostowania obu projektów w jednym projekcie ASP.NET Core, który można skompilować i opublikować jako pojedynczą jednostkę.

Szablon projektu nie jest przeznaczony do renderowania po stronie serwera (SSR). W przypadku usług SSR z platformą React i Node.js rozważ Next.js lub Razzle.

Utwórz nową aplikację

Utwórz nowy projekt z poziomu wiersza polecenia przy użyciu polecenia dotnet new react w pustym katalogu. Na przykład następujące polecenia tworzą aplikację w my-new-app katalogu i przełączają się do tego katalogu:

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

Uruchom aplikację z poziomu programu Visual Studio lub interfejsu wiersza polecenia platformy .NET Core:

Otwórz wygenerowany .csproj plik i uruchom aplikację normalnie.

Proces kompilacji przywraca zależności npm przy pierwszym uruchomieniu, co może potrwać kilka minut. Kolejne kompilacje są znacznie szybsze.

Szablon projektu tworzy aplikację ASP.NET Core i aplikację React. Aplikacja ASP.NET Core ma być używana do uzyskiwania dostępu do danych, autoryzacji i innych problemów po stronie serwera. Aplikacja React, która znajduje się w podkatalogu ClientApp , ma być używana we wszystkich problemach interfejsu użytkownika.

Dodawanie stron, obrazów, stylów, modułów itp.

Katalog ClientApp jest standardową aplikacją CRA React. Aby uzyskać więcej informacji, zobacz oficjalną dokumentację CRA.

Istnieją niewielkie różnice między aplikacją React utworzoną przez ten szablon a samą aplikacją utworzoną przez aplikację CRA; jednak możliwości aplikacji pozostają niezmienione. Aplikacja utworzona przez szablon zawiera układ oparty na platformie Bootstrap i podstawowy przykład routingu.

Instalowanie pakietów npm

Aby zainstalować pakiety npm innych firm, użyj wiersza polecenia w podkatalogu ClientApp . Na przykład:

cd ClientApp
npm install <package_name>

Publikowanie i wdrażanie

W programowania aplikacja działa w trybie zoptymalizowanym pod kątem wygody deweloperów. Na przykład pakiety języka JavaScript zawierają mapy źródłowe (dzięki czemu podczas debugowania można zobaczyć oryginalny kod źródłowy). Aplikacja obserwuje zmiany w plikach JavaScript, HTML i CSS na dysku, a następnie automatycznie ponownie skompiluje i ponownie załaduje po zmianie tych plików.

W środowisku produkcyjnym należy obsługiwać wersję aplikacji zoptymalizowaną pod kątem wydajności. Ta konfiguracja jest konfigurowana automatycznie. Podczas publikowania konfiguracja kompilacji emituje zmierowaną, transpilowaną kompilację kodu po stronie klienta. W przeciwieństwie do kompilacji programistycznej kompilacja produkcyjna nie wymaga zainstalowania Node.js na serwerze.

Można użyć standardowych metod hostingu i wdrażania ASP.NET Core.

Uruchamianie serwera CRA niezależnie

Projekt jest skonfigurowany do uruchamiania własnego wystąpienia serwera programistycznego CRA w tle, gdy aplikacja ASP.NET Core rozpoczyna się w trybie programowania. Jest to wygodne, ponieważ oznacza to, że nie trzeba ręcznie uruchamiać oddzielnego serwera.

Ta domyślna konfiguracja ma wadę. Za każdym razem, gdy modyfikujesz kod języka C#, a aplikacja ASP.NET Core musi ponownie uruchomić serwer CRA. Do uruchomienia kopii zapasowej wymagane jest kilka sekund. Jeśli często dokonujesz edycji kodu w języku C# i nie chcesz czekać na ponowne uruchomienie serwera CRA, uruchom serwer CRA zewnętrznie, niezależnie od procesu ASP.NET Core.

Aby uruchomić serwer CRA zewnętrznie, przejdź do podkatalogu ClientApp w wierszu polecenia i uruchom serwer dewelopera CRA:

cd ClientApp
npm start

Po uruchomieniu aplikacji ASP.NET Core nie zostanie uruchomiony serwer CRA. Zamiast tego używane jest wystąpienie, które zostało uruchomione ręcznie. Dzięki temu można szybciej uruchamiać i uruchamiać ponownie. Nie czeka już na ponowne skompilowanie aplikacji React za każdym razem.

Konfigurowanie oprogramowania pośredniczącego serwera proxy dla programu SignalR

Aby uzyskać więcej informacji, zobacz http-proxy-middleware.

Dodatkowe zasoby

Zaktualizowany szablon projektu React zapewnia wygodny punkt wyjścia dla aplikacji ASP.NET Core korzystających z konwencji React i create-react-app (CRA) w celu zaimplementowania rozbudowanego interfejsu użytkownika po stronie klienta.

Szablon jest odpowiednikiem tworzenia zarówno projektu ASP.NET Core do działania jako zaplecza interfejsu API, jak i standardowego projektu CRA React działającego jako interfejs użytkownika, ale z wygodą hostowania zarówno w jednym projekcie aplikacji, który można skompilować i opublikować jako pojedynczą jednostkę.

Szablon projektu React nie jest przeznaczony do renderowania po stronie serwera (SSR). W przypadku usług SSR z platformą React i Node.js rozważ Next.js lub Razzle.

Utwórz nową aplikację

Utwórz nowy projekt z poziomu wiersza polecenia przy użyciu polecenia dotnet new react w pustym katalogu. Na przykład następujące polecenia tworzą aplikację w my-new-app katalogu i przełączają się do tego katalogu:

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

Uruchom aplikację z poziomu programu Visual Studio lub interfejsu wiersza polecenia platformy .NET Core:

Otwórz wygenerowany .csproj plik i uruchom aplikację normalnie.

Proces kompilacji przywraca zależności npm przy pierwszym uruchomieniu, co może potrwać kilka minut. Kolejne kompilacje są znacznie szybsze.

Szablon projektu tworzy aplikację ASP.NET Core i aplikację React. Aplikacja ASP.NET Core ma być używana do uzyskiwania dostępu do danych, autoryzacji i innych problemów po stronie serwera. Aplikacja React, która znajduje się w podkatalogu ClientApp , ma być używana we wszystkich problemach interfejsu użytkownika.

Dodawanie stron, obrazów, stylów, modułów itp.

Katalog ClientApp jest standardową aplikacją CRA React. Aby uzyskać więcej informacji, zobacz oficjalną dokumentację CRA.

Istnieją niewielkie różnice między aplikacją React utworzoną przez ten szablon a samą aplikacją utworzoną przez aplikację CRA; jednak możliwości aplikacji pozostają niezmienione. Aplikacja utworzona przez szablon zawiera układ oparty na platformie Bootstrap i podstawowy przykład routingu.

Instalowanie pakietów npm

Aby zainstalować pakiety npm innych firm, użyj wiersza polecenia w podkatalogu ClientApp . Na przykład:

cd ClientApp
npm install --save <package_name>

Publikowanie i wdrażanie

W programowania aplikacja działa w trybie zoptymalizowanym pod kątem wygody deweloperów. Na przykład pakiety języka JavaScript zawierają mapy źródłowe (dzięki czemu podczas debugowania można zobaczyć oryginalny kod źródłowy). Aplikacja obserwuje zmiany w plikach JavaScript, HTML i CSS na dysku, a następnie automatycznie ponownie skompiluje i ponownie załaduje po zmianie tych plików.

W środowisku produkcyjnym należy obsługiwać wersję aplikacji zoptymalizowaną pod kątem wydajności. Ta konfiguracja jest konfigurowana automatycznie. Podczas publikowania konfiguracja kompilacji emituje zmierowaną, transpilowaną kompilację kodu po stronie klienta. W przeciwieństwie do kompilacji programistycznej kompilacja produkcyjna nie wymaga zainstalowania Node.js na serwerze.

Można użyć standardowych metod hostingu i wdrażania ASP.NET Core.

Uruchamianie serwera CRA niezależnie

Projekt jest skonfigurowany do uruchamiania własnego wystąpienia serwera programistycznego CRA w tle, gdy aplikacja ASP.NET Core rozpoczyna się w trybie programowania. Jest to wygodne, ponieważ oznacza to, że nie trzeba ręcznie uruchamiać oddzielnego serwera.

Ta domyślna konfiguracja ma wadę. Za każdym razem, gdy modyfikujesz kod języka C#, a aplikacja ASP.NET Core musi ponownie uruchomić serwer CRA. Do uruchomienia kopii zapasowej wymagane jest kilka sekund. Jeśli często dokonujesz edycji kodu w języku C# i nie chcesz czekać na ponowne uruchomienie serwera CRA, uruchom serwer CRA zewnętrznie, niezależnie od procesu ASP.NET Core. Aby to zrobić:

  1. .env Dodaj plik do podkatalogu ClientApp przy użyciu następującego ustawienia:

    BROWSER=none

    Uniemożliwi to otwarcie przeglądarki internetowej podczas zewnętrznego uruchamiania serwera CRA.

  2. W wierszu polecenia przejdź do podkatalogu ClientApp i uruchom serwer deweloperów CRA:

    cd ClientApp
npm start

  3. Zmodyfikuj aplikację ASP.NET Core, aby używać zewnętrznego wystąpienia serwera CRA zamiast uruchamiać własne. W klasie Startup zastąp spa.UseReactDevelopmentServer wywołanie następującym kodem:

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

Po uruchomieniu aplikacji ASP.NET Core nie zostanie uruchomiony serwer CRA. Zamiast tego używane jest wystąpienie, które zostało uruchomione ręcznie. Dzięki temu można szybciej uruchamiać i uruchamiać ponownie. Nie czeka już na ponowne skompilowanie aplikacji React za każdym razem.

Ważne

"Renderowanie po stronie serwera" nie jest obsługiwaną funkcją tego szablonu. Naszym celem za pomocą tego szablonu jest spełnienie parzystości z użyciem polecenia "create-react-app". W związku z tym scenariusze i funkcje nieuwzględniane w projekcie "create-react-app" (np. SSR) nie są obsługiwane i są pozostawione jako ćwiczenie dla użytkownika.

Konfigurowanie oprogramowania pośredniczącego serwera proxy dla programu SignalR

Aby uzyskać więcej informacji, zobacz http-proxy-middleware.

Dodatkowe zasoby