通过 ASP.NET Core 使用 React 项目模板

更新的 React 项目模板为使用 React 和 create-react-app (CRA) 约定实现丰富的客户端用户界面 (UI) 的 ASP.NET Core 应用程序提供了便捷起点。

该模板等同于创建两个项目，即用作 API 后端的 ASP.NET Core 项目和用作 UI 的标准 CRA React 项目，但均可在可以生成并发布为单个单元的单个应用程序项目中进行托管。

"响应项目" 模板不适用于服务器端呈现（SSR）。 对于带有响应和 node.js 的 SSR，请考虑下 .js或Razzle。

创建新应用

如果已安装 ASP.NET Core 2.1，则无需安装 React 项目模板。

在空目录中使用命令 dotnet new react 从命令提示符创建一个新项目。 例如，以下命令在 my-new-app目录中创建应用并切换到该目录：

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

从 Visual Studio 或 .NET Core CLI 运行应用：

该项目模板创建一个 ASP.NET Core 应用和一个 React 应用。 ASP.NET Core 应用旨在用于数据访问、授权和其他服务器端问题。 位于 ClientApp子目录中的 React 应用旨在用于所有 UI 问题。

添加页面、映像、样式、模块等。

ClientApp 目录是标准的 CRA React 应用。 有关详细信息，请参阅官方 CRA 文档。

此模板创建的 React 应用与 CRA 自身创建的应用之间存在细微差异；但是，该应用的功能未变。 该模板创建的应用包含基于 Bootstrap 的布局和基本路由示例。

安装 npm 包

要安装第三方 npm 程序包，请使用 ClientApp子目录中的命令提示符。 例如:

cd ClientApp
npm install --save <package_name>

发布和部署

在开发过程中，应用在为开发人员之便而优化的模式下运行。 例如，JavaScript 捆绑包包含源映射（这样在调试时可以查看原始源代码）。 该应用程序监视磁盘上的 JavaScript、HTML 和 CSS 文件更改，并在看到这些文件更改时自动重新编译和重新加载。

在生产中，提供针对性能进行了优化的应用版本。 该操作被配置为自动发生。 发布时，生成配置会发出转换的压缩客户端代码版本。 与开发版本不同，生产版本不需要在服务器上安装 Node.js。

你可以使用标准 ASP.NET Core 托管和部署方法。

独立运行 CRA 服务器

在 ASP.NET Core 应用以开发模式启动时，该项目配置为在后台启动自己的 CRA 开发服务器实例。 这很方便，因为这表示你无需手动运行单独的服务器。

这种默认设置有一个缺点。 每次修改 C# 代码并且需要重启 ASP.NET Core 应用时，CRA 服务器都会重启。 大约需要几秒才能开始备份。 如果你经常进行 C# 代码编辑并且不希望等待 CRA 服务器重启，请在外部运行独立于 ASP.NET Core 进程的 CRA 服务器。 为此，请执行以下操作：

1. 使用以下设置将一个env文件添加到ClientApp子目录：

   BROWSER=none
   

   这会阻止你的 web 浏览器在外部启动 CRA 服务器时打开。

2. 在命令提示符中，切换到 ClientApp子目录，并启动 CRA 开发服务器：

   cd ClientApp
   npm start
   

3. 修改 ASP.NET Core 应用以使用外部 CRA 服务器实例，而不是启动它自己的实例。 在 Startup类中，将 spa.UseReactDevelopmentServer 调用替换为以下内容：

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

当启动 ASP.NET Core 应用时，它不会启动 CRA 服务器， 而是使用你手动启动的实例。 这使它能够更快地启动和重新启动。 不再需要每次等待 React 应用重新生成。

其他资源

• ASP.NET Core 上的单页面应用的身份验证简介