如何在Visual Studio中创建极简ReactJS应用（Hello World或空白项目）

当然可以！我之前也觉得默认的dotnet new react模板塞了太多用不上的东西（比如WeatherForecast示例、一堆预设组件），下面两种方法能帮你快速得到极简的Hello World甚至完全空白的React项目：

方法1：快速精简现有模板项目 #

这是最省事的方式，直接砍掉冗余代码，保留核心运行逻辑：

1. 先按你的步骤生成项目：dotnet new react -o SampleApp，然后进入项目目录
2. 清理前端冗余：
   • 打开ClientApp/src文件夹，删掉components、fetchdata这些文件夹，只留下index.js、App.js和index.css（index.css也可以清空内容，或者直接删掉）
   • 把App.js替换成最简的Hello World代码：

     function App() {
       return (
         <div className="App">
           <h1>Hello World!</h1>
         </div>
       );
     }
     
     export default App;
     

3. 清理后端冗余（如果不需要API功能）：
   • 删除Controllers文件夹里的WeatherForecastController.cs
   • 如果你用的是.NET 6+，打开Program.cs，可以移除app.MapControllers();这一行（因为已经没有控制器了）；如果是旧版本的Startup.cs，删掉和WeatherForecast相关的路由配置就行
4. 运行dotnet run，现在你的应用就只会显示干净的Hello World了

方法2：手动搭建完全空白的.NET + React项目 #

如果想要完全从零开始，没有任何模板残留，可以这么操作：

1. 先创建一个空的ASP.NET Core项目：

   dotnet new web -o MinimalReactApp
   cd MinimalReactApp
   

2. 添加React前端：
   • 在项目根目录运行npx create-react-app clientapp，这会生成一个官方的极简React项目（默认就是Hello World，也可以改成空白）
   • 配置后端托管前端：打开Program.cs，替换成以下代码（让ASP.NET Core能正确托管React的开发和生产环境）：

     var builder = WebApplication.CreateBuilder(args);
     // 添加SPA静态文件支持
     builder.Services.AddSpaStaticFiles(configuration =>
     {
         configuration.RootPath = "clientapp/build";
     });
     
     var app = builder.Build();
     
     if (!app.Environment.IsDevelopment())
     {
         app.UseHsts();
     }
     
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     app.UseSpaStaticFiles();
     
     // 配置SPA路由，开发环境自动启动React dev server
     app.UseSpa(spa =>
     {
         spa.Options.SourcePath = "clientapp";
     
         if (app.Environment.IsDevelopment())
         {
             spa.UseReactDevelopmentServer(npmScript: "start");
         }
     });
     
     app.Run();
     

3. 启动项目：
   • 开发模式：直接运行dotnet run，它会自动启动React的开发服务器，修改代码会实时热重载
   • 生产模式：先进入clientapp目录运行npm run build打包前端，再运行dotnet run

额外小技巧 #

• 如果想要完全空白的React项目（连Hello World都不要），只需要把clientapp/src/App.js改成：

  function App() {
    return <div></div>;
  }
  
  export default App;
  

• 要是你不需要后端API，上面的配置已经完全足够，不用额外添加任何控制器

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