Usar o React com ASP.NET Core

O Visual Studio fornece modelos de projeto para criar aplicativos de página única (SPAs) com base em tecnologias JavaScript, como Angular, React e Vue , que têm um back-end ASP.NET Core. Estes modelos:

• Crie uma solução do Visual Studio com um projeto de frontend e um projeto de back-end.
• Use o tipo de projeto Visual Studio para JavaScript e TypeScript (.esproj) para o frontend.
• Use um projeto ASP.NET Core para o back-end.

Os projetos criados usando os modelos do Visual Studio podem ser executados a partir da linha de comando no Windows, Linux e macOS. Para executar o aplicativo, use dotnet run --launch-profile https para executar o projeto de servidor. A execução do projeto de servidor inicia automaticamente o servidor de desenvolvimento JavaScript frontend. O perfil de lançamento https é necessário atualmente.

Tutorial do Visual Studio

Para começar, siga o tutorial Criar um aplicativo ASP.NET Core com React na documentação do Visual Studio.

Para obter mais informações, consulte JavaScript e TypeScript no Visual Studio

ASP.NET Modelos de SPA principais

O Visual Studio inclui modelos para criar aplicativos ASP.NET Core com um front-end JavaScript ou TypeScript. Esses modelos estão disponíveis no Visual Studio 2022 versão 17.8 ou posterior com a carga de trabalho de desenvolvimento ASP.NET e Web instalada.

Os modelos do Visual Studio para criar aplicativos ASP.NET Core com um frontend JavaScript ou TypeScript oferecem os seguintes benefícios:

• Separação limpa do projeto entre o frontend e o backend.
• Mantenha-se up-toatualizado com as versões mais recentes do framework frontend.
• Integre com as mais recentes ferramentas de linha de comando do frontend framework, como o Vite.
• Modelos para JavaScript e TypeScript (apenas TypeScript para Angular).
• Rica experiência de edição de código JavaScript e TypeScript.
• Integre ferramentas de compilação JavaScript com a compilação .NET.
• Interface do usuário de gestão de dependências do npm.
• Compatível com depuração de código do Visual Studio e configuração de inicialização.
• Execute testes de unidade frontend no Test Explorer usando estruturas de teste JavaScript.

Modelos de SPA ASP.NET Core herdados

As versões anteriores do SDK do .NET incluíam o que agora são modelos herdados para criar aplicativos SPA com o ASP.NET Core. Para obter documentação sobre esses modelos mais antigos, consulte a versão .NET 7 da visão geral do SPA e os artigos Angular e React .

O modelo de projeto ASP.NET Core com React fornece um ponto de partida conveniente para aplicativos ASP.NET Core usando React e Create React App (CRA) para implementar uma interface do usuário (UI) avançada do lado do cliente.

O modelo de projeto é equivalente à criação de um projeto ASP.NET Core para atuar como uma API da Web e um projeto CRA React para atuar como uma interface do usuário. Esta combinação de projetos oferece a conveniência de hospedar ambos os projetos em um único projeto ASP.NET Core que pode ser construído e publicado como uma única unidade.

O modelo de projeto não se destina à renderização do lado do servidor (SSR). Para SSR com React e Node.js, considere Next.js ou Razzle.

Criar uma nova aplicação

Crie um novo projeto a partir de um prompt de comando usando o comando dotnet new react em um diretório vazio. Por exemplo, os comandos a seguir criam o aplicativo em um my-new-app diretório e alternam para esse diretório:

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

Execute o aplicativo do Visual Studio ou da CLI do .NET:

O modelo de projeto cria um aplicativo ASP.NET Core e um aplicativo React. O aplicativo ASP.NET Core destina-se a ser usado para acesso a dados, autorização e outras preocupações do lado do servidor. O aplicativo React, residente no subdiretório ClientApp, destina-se a ser usado para todas as preocupações com a interface do usuário.

Adicione páginas, imagens, estilos, módulos, etc.

O ClientApp diretório é um aplicativo CRA React padrão. Consulte a documentação oficial do CRA para obter mais informações.

Existem pequenas diferenças entre o aplicativo React criado por este modelo e o criado pelo próprio CRA; no entanto, os recursos do aplicativo permanecem inalterados. O aplicativo criado pelo modelo contém um layout baseado em Bootstrap e um exemplo de roteamento básico.

Instalar pacotes npm

Para instalar pacotes npm de terceiros, use um prompt de comando no ClientApp subdiretório. Por exemplo:

cd ClientApp
npm install <package_name>

Publicar e implantar

No desenvolvimento, o aplicativo é executado em um modo otimizado para conveniência do desenvolvedor. Por exemplo, os pacotes JavaScript incluem mapas de origem (para que, ao depurar, você possa ver seu código-fonte original). O aplicativo observa as alterações de arquivos JavaScript, HTML e CSS no disco e recompila e recarrega automaticamente quando vê esses arquivos serem alterados.

Na produção, forneça uma versão do seu aplicativo otimizada para desempenho. Isso é configurado para acontecer automaticamente. Quando você publica, a configuração de compilação emite uma compilação reduzida e transpilada do seu código do lado do cliente. Ao contrário da compilação de desenvolvimento, a compilação de produção não requer Node.js para ser instalado no servidor.

Você pode usar métodos padrão de hospedagem e implantação do ASP.NET Core.

Execute o servidor CRA independentemente

O projeto é configurado para iniciar sua própria instância do servidor de desenvolvimento CRA em segundo plano quando o aplicativo ASP.NET Core é iniciado no modo de desenvolvimento. Isso é conveniente porque significa que você não precisa executar um servidor separado manualmente.

Há uma desvantagem nessa configuração padrão. Sempre que você modificar seu código C# e seu aplicativo ASP.NET Core precisar ser reiniciado, o servidor CRA será reiniciado. Alguns segundos são necessários para iniciar o backup. Se você estiver fazendo edições frequentes de código C# e não quiser esperar que o servidor CRA seja reiniciado, execute o servidor CRA externamente, independentemente do processo ASP.NET Core.

Para executar o servidor CRA externamente, alterne para o ClientApp subdiretório em um prompt de comando e inicie o servidor de desenvolvimento CRA:

cd ClientApp
npm start

Quando você inicia seu aplicativo ASP.NET Core, ele não inicia um servidor CRA. Em vez disso, a instância iniciada manualmente é usada. Isso permite que ele inicie e reinicie mais rapidamente. Não está mais esperando que seu aplicativo React seja reconstruído a cada vez.

Configurar middleware de proxy para SignalR

Para obter mais informações, consulte http-proxy-middleware.

Recursos adicionais

• Use Identity para proteger um back-end de API da Web para SPAs

O modelo de projeto React atualizado fornece um ponto de partida conveniente para ASP.NET aplicativos principais que usam convenções React e create-react-app (CRA) para implementar uma interface do usuário (UI) avançada do lado do cliente.

O modelo é equivalente a criar um projeto ASP.NET Core para atuar como um back-end de API e um projeto CRA React padrão para atuar como uma interface do usuário, mas com a conveniência de hospedar ambos em um único projeto de aplicativo que pode ser criado e publicado como uma única unidade.

O modelo de projeto React não se destina à renderização do lado do servidor (SSR). Para SSR com React e Node.js, considere Next.js ou Razzle.

Criar uma nova aplicação

Crie um novo projeto a partir de um prompt de comando usando o comando dotnet new react em um diretório vazio. Por exemplo, os comandos a seguir criam o aplicativo em um my-new-app diretório e alternam para esse diretório:

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

Execute o aplicativo do Visual Studio ou da CLI do .NET:

O modelo de projeto cria um aplicativo ASP.NET Core e um aplicativo React. O aplicativo ASP.NET Core destina-se a ser usado para acesso a dados, autorização e outras preocupações do lado do servidor. O aplicativo React, residente no subdiretório ClientApp, destina-se a ser usado para todas as preocupações com a interface do usuário.

Adicione páginas, imagens, estilos, módulos, etc.

O ClientApp diretório é um aplicativo CRA React padrão. Consulte a documentação oficial do CRA para obter mais informações.

Existem pequenas diferenças entre o aplicativo React criado por este modelo e o criado pelo próprio CRA; no entanto, os recursos do aplicativo permanecem inalterados. O aplicativo criado pelo modelo contém um layout baseado em Bootstrap e um exemplo de roteamento básico.

Instalar pacotes npm

Para instalar pacotes npm de terceiros, use um prompt de comando no ClientApp subdiretório. Por exemplo:

cd ClientApp
npm install --save <package_name>

Publicar e implantar

No desenvolvimento, o aplicativo é executado em um modo otimizado para conveniência do desenvolvedor. Por exemplo, os pacotes JavaScript incluem mapas de origem (para que, ao depurar, você possa ver seu código-fonte original). O aplicativo observa as alterações de arquivos JavaScript, HTML e CSS no disco e recompila e recarrega automaticamente quando vê esses arquivos serem alterados.

Na produção, forneça uma versão do seu aplicativo otimizada para desempenho. Isso é configurado para acontecer automaticamente. Quando você publica, a configuração de compilação emite uma compilação reduzida e transpilada do seu código do lado do cliente. Ao contrário da compilação de desenvolvimento, a compilação de produção não requer Node.js para ser instalado no servidor.

Você pode usar métodos padrão de hospedagem e implantação do ASP.NET Core.

Execute o servidor CRA independentemente

O projeto é configurado para iniciar sua própria instância do servidor de desenvolvimento CRA em segundo plano quando o aplicativo ASP.NET Core é iniciado no modo de desenvolvimento. Isso é conveniente porque significa que você não precisa executar um servidor separado manualmente.

Há uma desvantagem nessa configuração padrão. Sempre que você modificar seu código C# e seu aplicativo ASP.NET Core precisar ser reiniciado, o servidor CRA será reiniciado. Alguns segundos são necessários para iniciar o backup. Se você estiver fazendo edições frequentes de código C# e não quiser esperar que o servidor CRA seja reiniciado, execute o servidor CRA externamente, independentemente do processo ASP.NET Core. Para tal:

1. Adicione um .env arquivo ao ClientApp subdiretório com a seguinte configuração:

   BROWSER=none
   

   Isso impedirá que seu navegador da Web seja aberto ao iniciar o servidor CRA externamente.

2. Em um prompt de comando, alterne para o ClientApp subdiretório e inicie o servidor de desenvolvimento CRA:

   cd ClientApp
   npm start
   

3. Modifique seu aplicativo ASP.NET Core para usar a instância externa do servidor CRA em vez de iniciar uma de suas próprias. Na classe Startup , substitua a spa.UseReactDevelopmentServer invocação pelo seguinte:

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

Quando você inicia seu aplicativo ASP.NET Core, ele não inicia um servidor CRA. Em vez disso, a instância iniciada manualmente é usada. Isso permite que ele inicie e reinicie mais rapidamente. Não está mais esperando que seu aplicativo React seja reconstruído a cada vez.

Configurar middleware de proxy para SignalR

Para obter mais informações, consulte http-proxy-middleware.

Recursos adicionais

• Use Identity para proteger um back-end de API da Web para SPAs