将 React 组件集成到现有的 NET Core 应用程序中

Question

我有一个使用 .Net Core Framework 构建的现有应用程序。我想集成 React 组件以实现可重用性目的，此时仅针对应用程序。我已经阅读了许多 “Hello World!!” 教程，但这并不能满足我的需要。我还查看了reactjs.net，但这也对我没有帮助，因为组件会在视图上呈现

场景

应用程序有很多模态框，它们的表单会在许多页面上呈现。目前它正在使用 JavaScript 处理。为了实现它，JavaScript 代码被重复了很多次。

目标

希望有一个 react 组件来替换上述功能，以减少代码重复。

我面临的问题是我不确定如何从 jQuery/JavaScript 的角度与组件进行交互。

示例

我有一个 DataTable，其中一个操作是单击某个按钮以显示 Modal。该代码位于一个单独的 .js 文件中，因此它与 View 是分开的。所以在这种情况下，如果我点击一个按钮，我想渲染反应组件。我需要将道具传递给组件，这就是我不确定如何处理它的地方:-(

任何建议或指导将不胜感激。

提前致谢

Answer 1

在 Asp.Net Core 应用程序中使用 react 很简单。首先，您需要知道您的后端将基于 API 来与 React 进行通信。因此，如果您没有将您的核心应用程序设置为基于 API，它将无法工作。还要确保你已经安装了 nodeJs 和其他依赖项。

要开始使用 react，请在您的 Asp.Net 项目解决方案中创建一个新文件夹。

在命令行中打开文件夹并执行：

npx create-react-app [your--folder--name]

要查看您创建的应用，请运行

npm 开始

要开始使用 asp.net，您需要在项目中添加 spa 依赖项。

然后你必须设置你的 ConfigureService 方法来包括：

services.AddSpaStaticFiles(configuration  => { configuration.RootPath  =  "[your--folder--name]/build"; });

最后设置您的 Configure 方法以包括：

app.UseSpaStaticFiles();    
app.UseRouting();    
app.UseEndpoints( ... );    
app.UseSpa(spa => {        
    spa.Options.SourcePath = "[your--folder--name]";        
    if (env.IsDevelopment()) {            
        spa.UseReactDevelopmentServer(npmScript: "start");
    }    
});