通过 ASP.NET Core 使用 React
注意
此版本不是本文的最新版本。 对于当前版本，请参阅此文的 .NET 8 版本。
Visual Studio 提供用于创建基于 JavaScript 框架（例如具有 ASP.NET Core 后端的 Angular、React 和 Vue）的单页应用 (SPA) 的项目模板。 这些模板：
- 创建一个包含前端项目和后端项目的 Visual Studio 解决方案。
- 将 Visual Studio 项目类型用于 JavaScript，将 TypeScript (.esproj) 用于前端。
- 将 ASP.NET Core 项目用于后端。
在 Windows、Linux 和 macOS 上，可从命令行运行使用 Visual Studio 模板创建的项目。 若要运行应用，请使用 dotnet run --launch-profile https 运行服务器项目。 如果运行服务器项目，会自动启动前端 JavaScript 开发服务器。 当前需要 https 启动配置文件。
Visual Studio 教程
若要开始，请按照 Visual Studio 文档中的使用 React 创建 ASP.NET Core 应用教程进行操作。
有关详细信息，请参阅 Visual Studio 中的 JavaScript 和 TypeScript
ASP.NET Core SPA 模板
Visual Studio 包含的模板可用于生成具有 JavaScript 或 TypeScript 前端的 ASP.NET Core 应用。 这些模板在安装了“ASP.NET 和 Web 开发”工作负载的 Visual Studio 2022 17.8 或更高版本中提供。
Visual Studio 模板用于生成具有 JavaScript 或 TypeScript 前端的 ASP.NET Core 应用，具有以下优点：
- 前端和后端的项目完全分离。
- 随时了解最新的前端框架版本。
- 与最新的前端框架命令行工具（如 Vite）集成。
- JavaScript 和 TypeScript（仅限 Angular 的 TypeScript）的模板。
- 丰富的 JavaScript 和 TypeScript 代码编辑经验。
- 将 JavaScript 生成工具与 .NET 生成集成。
- npm 依赖项管理 UI。
- 与 Visual Studio Code 调试和启动配置兼容。
- 使用 JavaScript 测试框架在测试资源管理器中运行前端单元测试。
旧 ASP.NET Core SPA 模板
.NET SDK 的早期版本包含现在用于通过 ASP.NET Core 生成 SPA 应用的旧模板。 有关这些较旧模板的文档，请参阅 ASP.NET Core 7.0 版本的 SPA 概述一文以及 Angular 一文和 React 一文。
ASP.NET Core 和 React 项目模板为 ASP.NET Core 应用提供了便捷起点，以使用 React 和创建 React 应用 (CRA) 实现丰富的客户端用户界面 (UI)。
项目模板等同于创建用作 web API 的 ASP.NET Core 项目，以及用作 UI 的 CRA React 项目。 此项目组合提供将两个项目托管在单个 ASP.NET Core项目（可作为一个单元生成和发布）的便利性。
项目模板不适用于服务器端呈现 (SSR)。 对于带有 React 和 Node.js 的 SSR，请考虑使用 Next.js 或 Razzle。
创建新应用
在空目录中使用命令 dotnet new react 从命令提示符创建一个新项目。 例如，以下命令在 my-new-app 目录中创建应用并切换到该目录：
dotnet new react -o my-new-app
cd my-new-app
从 Visual Studio 或 .NET Core CLI 运行应用：
打开生成的 .csproj 文件，并从这里正常运行应用。
生成过程会在首次运行时还原 npm 依赖关系，这可能需要几分钟的时间。 后续版本要快得多。
该项目模板创建一个 ASP.NET Core 应用和一个 React 应用。 ASP.NET Core 应用旨在用于数据访问、授权和其他服务器端问题。 位于 ClientApp 子目录中的 React 应用旨在用于所有 UI 问题。
添加页面、映像、样式、模块等。
ClientApp 目录是标准的 CRA React 应用。 有关详细信息，请参阅官方 CRA 文档。
此模板创建的 React 应用与 CRA 自身创建的应用之间存在细微差异；但是，该应用的功能未变。 该模板创建的应用包含基于 Bootstrap 的布局和基本路由示例。
安装 npm 包
要安装第三方 npm 程序包，请在 ClientApp 子目录中使用命令提示符。 例如：
cd ClientApp
npm install <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 服务器。
若要在外部运行 CRA 服务器，请切换到命令提示符中的 ClientApp 子目录，并启动 CRA 开发服务器：
cd ClientApp
npm start
当启动 ASP.NET Core 应用时，它不会启动 CRA 服务器， 而是使用你手动启动的实例。 这使它能够更快地启动和重新启动。 不再需要每次等待 React 应用重新生成。
为 SignalR 配置代理中间件
有关详细信息，请参阅 http-proxy-middleware。
其他资源
更新的 React 项目模板为使用 React 和 create-react-app (CRA) 约定实现丰富的客户端用户界面 (UI) 的 ASP.NET Core 应用程序提供了便捷起点。
该模板等同于创建两个项目，即用作 API 后端的 ASP.NET Core 项目和用作 UI 的标准 CRA React 项目，但均可在可以生成并发布为单个单元的单个应用程序项目中进行托管。
React 项目模板不适用于服务器端呈现 (SSR)。 对于带有 React 和 Node.js 的 SSR，请考虑使用 Next.js 或 Razzle。
创建新应用
在空目录中使用命令 dotnet new react 从命令提示符创建一个新项目。 例如，以下命令在 my-new-app 目录中创建应用并切换到该目录：
dotnet new react -o my-new-app
cd my-new-app
从 Visual Studio 或 .NET Core CLI 运行应用：
打开生成的 .csproj 文件，并从这里正常运行应用。
生成过程会在首次运行时还原 npm 依赖关系，这可能需要几分钟的时间。 后续版本要快得多。
该项目模板创建一个 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 服务器。 为此，请执行以下操作：
使用以下设置将
.env文件添加到ClientApp子目录：BROWSER=none这将阻止在外部启动 CRA 服务器时打开 Web 浏览器。
在命令提示符中，切换到
ClientApp子目录，并启动 CRA 开发服务器：cd ClientApp npm start修改 ASP.NET Core 应用以使用外部 CRA 服务器实例，而不是启动它自己的实例。 在 Startup 类中，将 调用替换为以下内容：
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
当启动 ASP.NET Core 应用时，它不会启动 CRA 服务器， 而是使用你手动启动的实例。 这使它能够更快地启动和重新启动。 不再需要每次等待 React 应用重新生成。
重要
此模板不支持“服务器端呈现”功能。 使用此模板是为了通过“create-react-app”满足奇偶一致性。 因此，不支持“create-react-app”项目中没有的方案和功能（例如 SSR），这些内容作为练习提供给用户。
为 SignalR 配置代理中间件
有关详细信息，请参阅 http-proxy-middleware。
其他资源
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈