ASP.NET Core 在 macOS 上创建 React 前端应用的解决方案

背景介绍

随着 Visual Studio for Mac 的停用，许多 macOS 开发者在使用 .NET Core 开发 React 前端应用时遇到了困难。微软官方已经移除了 .NET SDK 中的 Angular 和 React 项目模板，这给开发者带来了新的挑战。

当前状况分析

在 .NET 8 及更高版本中，微软不再提供官方的 React 项目模板作为 .NET SDK 的一部分。这一变化影响了所有平台上的开发者，包括 macOS 用户。主要原因是这些前端框架的更新迭代速度远快于 .NET 的发布周期，导致模板容易过时。

解决方案

对于仍需要使用 React 与 ASP.NET Core 结合的开发者，可以采用以下方法：

1. 使用 .NET 8 预览版模板
   虽然官方不再维护，但开发者可以安装 .NET 8 预览版的 SPA 项目模板包。这个模板包包含了 React 项目模板，可以满足基本开发需求。

2. 手动设置项目结构
   更灵活的方式是分别创建 ASP.NET Core 后端项目和 React 前端项目，然后手动配置两者的集成。这种方式虽然需要更多初始工作，但提供了更大的灵活性。

具体实施步骤

方法一：使用 .NET 8 预览模板

1. 安装模板包：

   dotnet new install Microsoft.DotNet.Web.Spa.ProjectTemplates.8.0::8.0.0-preview.6.23329.11
   

2. 创建新项目：

   dotnet new react -o my-react-app
   

3. 进入项目目录并运行：

   cd my-react-app
   dotnet run
   

方法二：手动配置项目

1. 创建 ASP.NET Core Web API 项目：

   dotnet new webapi -o MyBackend
   

2. 在项目目录中创建 React 应用：

   npx create-react-app client-app
   

3. 配置 ASP.NET Core 服务静态文件：

   • 修改 Program.cs 文件
   • 添加静态文件中间件
   • 配置开发环境下的代理

4. 设置开发工作流：

   • 配置同时运行后端和前端开发服务器
   • 设置 API 代理以避免 CORS 问题

最佳实践建议

1. 项目结构
   推荐将前端和后端代码放在同一个解决方案但不同的项目中，保持清晰的分离。

2. 开发环境配置
   使用 dotnet watch 和 React 的热重载功能提高开发效率。

3. 生产部署
   对于生产环境，建议将 React 应用构建为静态文件，由 ASP.NET Core 托管。

4. 状态管理
   考虑使用 Redux 或 React Context API 管理应用状态，与后端 API 清晰分离。

替代方案

如果上述方法不能满足需求，开发者还可以考虑：

1. 使用独立的 React 前端项目，通过 REST API 或 GraphQL 与后端通信
2. 采用 Blazor 作为前端框架，它由微软官方维护并提供更好的 .NET 集成
3. 探索其他跨平台开发工具链，如 VS Code 扩展和插件

总结

虽然官方不再提供 React 项目模板，但 macOS 开发者仍有多种方式可以创建 ASP.NET Core 与 React 结合的应用。根据项目需求和团队熟悉程度，可以选择使用旧版模板或手动配置项目结构。随着 .NET 生态的发展，开发者需要适应这种模块化的开发方式，灵活组合不同的技术栈。