Použití Reactu s ASP.NET Core

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Visual Studio poskytuje šablony projektů pro vytváření jednostrákových aplikací (SPA) založených na architekturách JavaScriptu, jako jsou Angular, React a Vue , které mají back-end ASP.NET Core. Tyto šablony:

  • Vytvořte řešení sady Visual Studio s front-endovým projektem a back-endovým projektem.
  • Pro front-end použijte typ projektu sady Visual Studio pro JavaScript a TypeScript (.esproj).
  • Pro back-end použijte projekt ASP.NET Core.

Projekty vytvořené pomocí šablon sady Visual Studio je možné spustit z příkazového řádku ve Windows, Linuxu a macOS. Pokud chcete aplikaci spustit, použijte dotnet run --launch-profile https ji ke spuštění serverového projektu. Spuštění serverového projektu automaticky spustí front-endový vývojový server JavaScriptu. V https současné době se vyžaduje spouštěcí profil.

Kurz k sadě Visual Studio

Pokud chcete začít, postupujte podle kurzu Vytvoření aplikace ASP.NET Core pomocí reactu v dokumentaci k sadě Visual Studio.

Další informace najdete v tématu JavaScript a TypeScript v sadě Visual Studio.

šablony ASP.NET Core SPA

Visual Studio obsahuje šablony pro vytváření aplikací ASP.NET Core pomocí front-endu JavaScriptu nebo TypeScriptu. Tyto šablony jsou k dispozici v sadě Visual Studio 2022 verze 17.8 nebo novější s nainstalovanou úlohou vývoje pro ASP.NET a web .

Šablony sady Visual Studio pro vytváření aplikací ASP.NET Core s front-endem JavaScriptu nebo TypeScriptu nabízejí následující výhody:

  • Vyčištění oddělení projektů pro front-end a back-end
  • Mějte přehled o nejnovějších verzích front-endové architektury.
  • Integrace s nejnovějšími nástroji příkazového řádku front-endové architektury, jako je Vite.
  • Šablony pro JavaScript i TypeScript (pouze TypeScript pro Angular).
  • Bohaté prostředí pro úpravy kódu v JavaScriptu a TypeScriptu
  • Integrujte nástroje sestavení JavaScriptu s sestavením .NET.
  • npm dependency management UI.
  • Kompatibilní s laděním a spuštěním editoru Visual Studio Code.
  • Spouštění testů částí front-endu v Průzkumníku testů pomocí testovacích architektur JavaScriptu

Starší verze šablon ASP.NET Core SPA

Starší verze sady .NET SDK obsahovaly starší šablony pro vytváření aplikací SPA pomocí ASP.NET Core. Dokumentaci k těmto starším šablonám najdete v článcích o ASP.NET Core 7.0 přehledu spa a článcích o Angular a Reactu .

Šablona projektu ASP.NET Core s reactem poskytuje pohodlný výchozí bod pro aplikace ASP.NET Core pomocí Reactu a vytvoření aplikace React (CRA) k implementaci bohatého uživatelského rozhraní na straně klienta.

Šablona projektu je ekvivalentní vytvoření projektu ASP.NET Core, který bude fungovat jako webové rozhraní API, a projekt CRA React tak, aby fungoval jako uživatelské rozhraní. Tato kombinace projektu nabízí pohodlí hostování obou projektů v jednom projektu ASP.NET Core, který lze sestavit a publikovat jako jednu jednotku.

Šablona projektu není určená pro vykreslování na straně serveru (SSR). V případě SSR s Reactem a Node.js zvažte Next.js nebo Razzle.

Vytvoření nové aplikace

Pomocí příkazu dotnet new react v prázdném adresáři vytvořte nový projekt z příkazového řádku. Například následující příkazy vytvoří aplikaci v my-new-app adresáři a přepne do tohoto adresáře:

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

Spusťte aplikaci ze sady Visual Studio nebo rozhraní příkazového řádku .NET Core:

Otevřete vygenerovaný .csproj soubor a spusťte aplikaci normálně.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Další buildy jsou mnohem rychlejší.

Šablona projektu vytvoří aplikaci ASP.NET Core a aplikaci React. Aplikace ASP.NET Core je určená k použití pro přístup k datům, autorizaci a další aspekty na straně serveru. Aplikace React, která se nachází v ClientApp podadresáři, je určená k použití pro všechny aspekty uživatelského rozhraní.

Přidání stránek, obrázků, stylů, modulů atd.

Adresář ClientApp je standardní aplikace CRA React. Další informace najdete v oficiální dokumentaci KE CRA.

Mezi aplikací React vytvořenou touto šablonou a aplikací vytvořenou samotnou CRA existují drobné rozdíly; Možnosti aplikace se ale nemění. Aplikace vytvořená šablonou obsahuje rozložení založené na bootstrapu a základní příklad směrování.

Instalace balíčků npm

K instalaci balíčků npm třetích stran použijte příkazový řádek v ClientApp podadresáři. Příklad:

cd ClientApp
npm install <package_name>

Publikování a nasazení

Ve vývoji se aplikace spouští v režimu optimalizovaném pro usnadnění vývoje. Například sady JavaScriptu zahrnují zdrojové mapy (takže při ladění uvidíte původní zdrojový kód). Aplikace sleduje změny souborů JavaScriptu, HTML a CSS na disku a při zobrazení změn těchto souborů se automaticky znovu zkompilí a znovu načte.

V produkčním prostředí obsluhujte verzi aplikace, která je optimalizovaná pro výkon. To se konfiguruje automaticky. Když publikujete, konfigurace sestavení vygeneruje minifikovaný transpilovaný build kódu na straně klienta. Na rozdíl od vývojového sestavení nevyžaduje produkční sestavení, aby se na server nainstaloval Node.js.

Můžete použít standardní metody hostování a nasazení ASP.NET Core.

Nezávisle spusťte server CRA.

Projekt je nakonfigurovaný tak, aby spustil vlastní instanci vývojového serveru CRA na pozadí, když se aplikace ASP.NET Core spustí ve vývojovém režimu. To je praktické, protože to znamená, že nemusíte spouštět samostatný server ručně.

Toto výchozí nastavení má nevýhodu. Pokaždé, když upravíte kód jazyka C# a aplikace ASP.NET Core se musí restartovat, server CRA se restartuje. K spuštění zálohování je potřeba několik sekund. Pokud provádíte časté úpravy kódu C# a nechcete čekat na restartování serveru CRA, spusťte server CRA externě nezávisle na procesu ASP.NET Core.

Pokud chcete server CRA spustit externě, přepněte do ClientApp podadresáře na příkazovém řádku a spusťte vývojový server CRA:

cd ClientApp
npm start

Když spustíte aplikaci ASP.NET Core, nespustí se server CRA. Místo toho se použije instance, kterou jste spustili ručně. To umožňuje spustit a restartovat rychleji. Už nečeká, až se aplikace React pokaždé znovu sestaví.

Konfigurace middlewaru proxy pro SignalR

Další informace najdete v tématu http-proxy-middleware.

Další materiály

Aktualizovaná šablona projektu React poskytuje pohodlný výchozí bod pro aplikace ASP.NET Core pomocí konvencí react-app (CRA) react a create-react-app (CRA) k implementaci bohatého uživatelského rozhraní na straně klienta.

Šablona je ekvivalentní vytvoření projektu ASP.NET Core, který bude fungovat jako back-end rozhraní API, a standardní projekt CRA React, který bude fungovat jako uživatelské rozhraní, ale s pohodlím hostování jak v jednom projektu aplikace, který se dá sestavit a publikovat jako jedna jednotka.

Šablona projektu React není určená pro vykreslování na straně serveru (SSR). V případě SSR s Reactem a Node.js zvažte Next.js nebo Razzle.

Vytvoření nové aplikace

Pomocí příkazu dotnet new react v prázdném adresáři vytvořte nový projekt z příkazového řádku. Například následující příkazy vytvoří aplikaci v my-new-app adresáři a přepne do tohoto adresáře:

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

Spusťte aplikaci ze sady Visual Studio nebo rozhraní příkazového řádku .NET Core:

Otevřete vygenerovaný .csproj soubor a spusťte aplikaci normálně.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Další buildy jsou mnohem rychlejší.

Šablona projektu vytvoří aplikaci ASP.NET Core a aplikaci React. Aplikace ASP.NET Core je určená k použití pro přístup k datům, autorizaci a další aspekty na straně serveru. Aplikace React, která se nachází v ClientApp podadresáři, je určená k použití pro všechny aspekty uživatelského rozhraní.

Přidání stránek, obrázků, stylů, modulů atd.

Adresář ClientApp je standardní aplikace CRA React. Další informace najdete v oficiální dokumentaci KE CRA.

Mezi aplikací React vytvořenou touto šablonou a aplikací vytvořenou samotnou CRA existují drobné rozdíly; Možnosti aplikace se ale nemění. Aplikace vytvořená šablonou obsahuje rozložení založené na bootstrapu a základní příklad směrování.

Instalace balíčků npm

K instalaci balíčků npm třetích stran použijte příkazový řádek v ClientApp podadresáři. Příklad:

cd ClientApp
npm install --save <package_name>

Publikování a nasazení

Ve vývoji se aplikace spouští v režimu optimalizovaném pro usnadnění vývoje. Například sady JavaScriptu zahrnují zdrojové mapy (takže při ladění uvidíte původní zdrojový kód). Aplikace sleduje změny souborů JavaScriptu, HTML a CSS na disku a při zobrazení změn těchto souborů se automaticky znovu zkompilí a znovu načte.

V produkčním prostředí obsluhujte verzi aplikace, která je optimalizovaná pro výkon. To se konfiguruje automaticky. Když publikujete, konfigurace sestavení vygeneruje minifikovaný transpilovaný build kódu na straně klienta. Na rozdíl od vývojového sestavení nevyžaduje produkční sestavení, aby se na server nainstaloval Node.js.

Můžete použít standardní metody hostování a nasazení ASP.NET Core.

Nezávisle spusťte server CRA.

Projekt je nakonfigurovaný tak, aby spustil vlastní instanci vývojového serveru CRA na pozadí, když se aplikace ASP.NET Core spustí ve vývojovém režimu. To je praktické, protože to znamená, že nemusíte spouštět samostatný server ručně.

Toto výchozí nastavení má nevýhodu. Pokaždé, když upravíte kód jazyka C# a aplikace ASP.NET Core se musí restartovat, server CRA se restartuje. K spuštění zálohování je potřeba několik sekund. Pokud provádíte časté úpravy kódu C# a nechcete čekat na restartování serveru CRA, spusťte server CRA externě nezávisle na procesu ASP.NET Core. Postup:

  1. .env Do podadresáře přidejte soubor ClientApp s následujícím nastavením:

    BROWSER=none

    To zabrání otevření webového prohlížeče při externím spuštění serveru CRA.

  2. V příkazovém řádku přepněte do ClientApp podadresáře a spusťte vývojový server CRA:

    cd ClientApp
npm start

  3. Upravte aplikaci ASP.NET Core tak, aby místo spuštění vlastní instance externího serveru CRA používala externí instanci serveru CRA. Ve třídě Startup nahraďte spa.UseReactDevelopmentServer vyvolání následujícím kódem:

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

Když spustíte aplikaci ASP.NET Core, nespustí se server CRA. Místo toho se použije instance, kterou jste spustili ručně. To umožňuje spustit a restartovat rychleji. Už nečeká, až se aplikace React pokaždé znovu sestaví.

Důležité

Vykreslování na straně serveru není podporovanou funkcí této šablony. Naším cílem této šablony je splnit paritu pomocí příkazu create-react-app. Proto se scénáře a funkce, které nejsou součástí projektu "create-react-app" (například SSR), nepodporují a zůstanou pro uživatele v rámci cvičení.

Konfigurace middlewaru proxy pro SignalR

Další informace najdete v tématu http-proxy-middleware.

Další materiály