如何轻量集成ASP.NET Core多页企业应用与React.js？

下面分享几个不需要依赖一堆NuGet包的轻量集成方式，都是开发者常用的简洁方案：

1. 直接通过CDN引入React #

完全不需要安装任何React相关的NuGet包，直接在ASP.NET的Razor视图（比如_Layout.cshtml或者单个页面视图）里引入React和ReactDOM的CDN链接，就能直接写React代码：

<!-- 在视图的<head>或<body>末尾添加 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 可选：引入Babel用于编译JSX（生产环境建议提前编译） -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 然后写React组件 -->
<div id="root"></div>
<script type="text/babel">
  function App() {
    return <h1>Hello React in ASP.NET Core!</h1>;
  }
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>

生产环境可以换成压缩版的CDN链接，或者把React文件下载到本地wwwroot目录引入，避免依赖外部CDN。

2. 前后端完全分离：React独立项目 + ASP.NET Core做API #

这是最轻量化也最流行的方式之一：

• 用create-react-app或者Vite单独初始化React前端项目，完全独立开发、运行（比如前端跑在http://localhost:3000）
• ASP.NET Core只作为API后端，提供数据接口（比如跑在http://localhost:5000）
• 前端通过fetch、Axios等工具调用后端API，只需要在ASP.NET Core里配置跨域即可：

// Program.cs中配置跨域
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policy => policy.WithOrigins("http://localhost:3000")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

app.UseCors("AllowReactApp");

这种方式两边完全解耦，不用任何集成包，各自用最适合的工具链开发，维护起来也更清晰。

3. 托管React构建产物到ASP.NET Core静态文件 #

如果需要把前端和后端打包部署到一起，也不用复杂的集成包：

• 先在React项目里执行npm run build，生成dist（Vite）或者build（create-react-app）文件夹
• 把这个文件夹里的所有文件复制到ASP.NET Core项目的wwwroot目录下
• 在Program.cs里配置静态文件中间件，同时处理SPA的路由 fallback：

app.UseStaticFiles();

// 处理SPA路由，避免刷新页面404
app.MapFallbackToFile("index.html");

这样ASP.NET Core就会托管React的静态页面，同时后端API也能正常访问，部署时只需要发布一个ASP.NET Core项目即可，没有额外依赖。

内容的提问来源于stack exchange，提问作者mohammed alani1991