Usar o modelo de projeto do React com o ASP.NET CoreUse the React project template with ASP.NET Core

O modelo de projeto do React atualizado fornece um ponto inicial conveniente para aplicativos do ASP.NET Core usando convenções do React e de CRA (criar-aplicativo-do-React) para implementar uma IU (interface do usuário) avançada do lado do cliente.The updated React project template provides a convenient starting point for ASP.NET Core apps using React and create-react-app (CRA) conventions to implement a rich, client-side user interface (UI).

O modelo é equivalente à criação de dois projetos: um projeto do ASP.NET Core, para atuar como um back-end de API, e um projeto do React CRA padrão, para atuar como uma interface do usuário, mas com a praticidade de hospedar ambos em um único projeto de aplicativo que pode ser criado e publicado como uma única unidade.The template is equivalent to creating both an ASP.NET Core project to act as an API backend, and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit.

Criar um novo aplicativoCreate a new app

Se você tiver o ASP.NET Core 2.1 instalado, não será necessário instalar o modelo de projeto React.If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

Crie um novo projeto de um prompt de comando usando o comando dotnet new react em um diretório vazio.Create a new project from a command prompt using the command dotnet new react in an empty directory. Por exemplo, os seguintes comandos criam o aplicativo em um diretório my-new-app e mudam para esse diretório:For example, the following commands create the app in a my-new-app directory and switch to that directory:

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

Execute o aplicativo do Visual Studio ou da CLI do .NET Core:Run the app from either Visual Studio or the .NET Core CLI:

Abra o arquivo .csproj gerado e execute o aplicativo normalmente de lá.Open the generated .csproj file, and run the app as normal from there.

O processo de build restaura dependências npm na primeira execução, o que pode levar vários minutos.The build process restores npm dependencies on the first run, which can take several minutes. Builds subsequentes são muito mais rápidos.Subsequent builds are much faster.

O modelo de projeto cria um aplicativo ASP.NET Core e um aplicativo do React.The project template creates an ASP.NET Core app and a React app. O aplicativo ASP.NET Core destina-se a ser usado para acesso a dados, autorização e outras questões do lado do servidor.The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. O aplicativo do React, que reside no subdiretório ClientApp, destina-se a ser usado para todas as questões de interface do usuário.The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Adicione páginas, imagens, estilos, módulos, etc.Add pages, images, styles, modules, etc.

O diretório ClientApp é um aplicativo do React CRA padrão.The ClientApp directory is a standard CRA React app. Veja a documentação oficial do CRA para obter mais informações.See the official CRA documentation for more information.

Há pequenas diferenças entre o aplicativo do React criado por este modelo e um criado pelo CRA propriamente dito; no entanto, os recursos do aplicativo são inalterados.There are slight differences between the React app created by this template and the one created by CRA itself; however, the app's capabilities are unchanged. O aplicativo criado pelo modelo contém um layout com base em Bootstrap e um exemplo básico de roteamento.The app created by the template contains a Bootstrap-based layout and a basic routing example.

Instalar pacotes npmInstall npm packages

Para instalar pacotes npm de terceiros, use um prompt de comando no subdiretório ClientApp.To install third-party npm packages, use a command prompt in the ClientApp subdirectory. Por exemplo:For example:

cd ClientApp
npm install --save <package_name>

Publicar e implantarPublish and deploy

No desenvolvimento, o aplicativo é executado de um modo otimizado para conveniência do desenvolvedor.In development, the app runs in a mode optimized for developer convenience. Por exemplo, pacotes JavaScript incluem mapas de origem (de modo que durante a depuração, você pode ver o código-fonte original).For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). O aplicativo observa alterações em arquivos JavaScript, HTML e CSS no disco e recompila e recarrega automaticamente quando as detecta.The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

Em produção, atende a uma versão de seu aplicativo que é otimizada para desempenho.In production, serve a version of your app that's optimized for performance. Isso é configurado para ocorrer automaticamente.This is configured to happen automatically. Quando você publica, a configuração de build emite um build minificado e transpilado do seu código do lado do cliente.When you publish, the build configuration emits a minified, transpiled build of your client-side code. Diferentemente do build de desenvolvimento, o build de produção não requer que o Node.js esteja instalado no servidor.Unlike the development build, the production build doesn't require Node.js to be installed on the server.

Você pode usar os métodos padrão de implantação e hospedagem do ASP.NET Core.You can use standard ASP.NET Core hosting and deployment methods.

Executar o servidor CRA independentementeRun the CRA server independently

O projeto está configurado para iniciar sua própria instância do Development Server do CRA em segundo plano quando o aplicativo ASP.NET Core é iniciado no modo de desenvolvimento.The project is configured to start its own instance of the CRA development server in the background when the ASP.NET Core app starts in development mode. Isso é conveniente, porque significa que você não precisa executar um servidor separado manualmente.This is convenient because it means you don't have to run a separate server manually.

Há uma desvantagem nessa configuração padrão.There's a drawback to this default setup. Cada vez que você modificar seu código C# e o aplicativo ASP.NET Core precisar ser reiniciado, o servidor CRA será reiniciado também.Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. São necessários alguns segundos para iniciar um backup.A few seconds are required to start back up. Se você estiver fazendo edições frequentes de código C# e não quiser esperar o servidor CRA reiniciar, execute o servidor CRA externamente, independentemente do processo do ASP.NET Core.If you're making frequent C# code edits and don't want to wait for the CRA server to restart, run the CRA server externally, independently of the ASP.NET Core process. Para fazer isso:To do so:

  1. Adicionar um . env do arquivo para o ClientApp subdiretório com a seguinte configuração:Add a .env file to the ClientApp subdirectory with the following setting:

    BROWSER=none
    

    Isso impedirá o navegador da web seja aberto ao iniciar o servidor CRA externamente.This will prevent your web browser from opening when starting the CRA server externally.

  2. Em um prompt de comando, vá para o subdiretório ClientApp e inicie o Development Server do CRA:In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  3. Modifique o aplicativo ASP.NET Core para, em vez de iniciar uma instância do servidor CRA própria, usar a externa.Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Na classe Startup, substitua a invocação spa.UseReactDevelopmentServer pelo seguinte:In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

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

Quando você iniciar seu aplicativo ASP.NET Core, ele não inicializará um servidor CRA.When you start your ASP.NET Core app, it won't launch a CRA server. Em vez disso, a instância que você iniciou manualmente é usada.The instance you started manually is used instead. Isso permite a ele iniciar e reiniciar mais rapidamente.This enables it to start and restart faster. Ele não aguarda mais que o aplicativo do React seja recompilado a cada vez.It's no longer waiting for your React app to rebuild each time.

Importante

"Renderização do lado do servidor" não é um recurso com suporte deste modelo."Server-side rendering" is not a supported feature of this template. Nosso objetivo com este modelo é atender a paridade com "criar-react-app".Our goal with this template is to meet parity with "create-react-app". Assim, cenários e recursos não incluídos em um projeto de "criar-react-app" (como SSR) não têm suporte e são deixados como um exercício para o usuário.As such, scenarios and features not included in a "create-react-app" project (such as SSR) are not supported and are left as an exercise for the user.

Recursos adicionaisAdditional resources