如何使用 ReactJS.NET 渲染带有 redux 的 React 应用程序？

Question

我创建了使用 React, Redux and React-Router.

的单页应用程序

我想使用 ReactJS.NET 呈现此 SPA 以提高加载应用程序的性能。

使用 Webpack.

将 SPA 编译为一个 Bundle.js

我有一个 ASP.NET MVC 应用程序，我可以在其中粘贴将通过 ReactJS.NET 呈现的这个包。此 SPA 中的所有内容都将在一个 ASP.NET 视图中工作，但使用 React-router.

我该怎么做？我找不到任何解决这个与 redux 组合的项目。

感谢您提供示例或帮助。

Answer 1

为什么要使用ReactJS.NET？ MVC.NET 堆栈没有什么特别之处，它需要一个单独的项目来启动 React 并在其中运行。我会结合使用 Babel、Webpack、React、React-Dom 和 React-Router。 MVC.NET 应该只交付捆绑包，其他一切都应该做出反应，它是依赖项。

React.NET默认教程的问题在于，它没有考虑到你使用webpack来打包你的依赖的事实，而是有手动添加它们的例子。这并不是编写 React 的首选方式，并且通过试图隐藏设置 React 项目的初始复杂性而使复杂的过程变得更加复杂。

建议：

Webpack 会将您的 react-router、react 和 react-dom 捆绑在一起。您需要设置 MVC，使每个 url 请求都由相同的控制器操作处理，React-Router 可以处理 url 更改。这个答案解释了如何做到这一点。 ASP.NET MVC - Catch All Route And Default Route

如果不这样做，MVC 将尝试处理所有 url 路由更改，而不是 React-Router 来处理它。

Answer 2

我知道这是一个老问题，但如果您在将 React 应用程序整合到 React.NET 中时仍然遇到问题，您应该尝试使用以下模板并查看 this fellow has done it.

他使用 webpack 首先构建和编译一组特定于服务器的代码，然后将编译后的 js 拉入 React.NET

app.UseReact(config =>
{
    config
        .SetLoadBabel(false)
        .AddScriptWithoutTransform("~/js/react.server.bundle.js");
});

webpack 配置如下所示。

var path = require('path');
var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    entry: {
        server: './React/server.jsx',
        client: './React/client.jsx',
        clientWithRender: './React/clientWithRender.jsx',
    },
    output: { path: __dirname + '/wwwroot/js/', filename: 'react.[name].bundle.js' },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ]
    },
    plugins: [
        new WebpackNotifierPlugin() 
    ]
};

这是索引

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="app">
        @{
            if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
            {
                @Html.React("ReactComponents.App", new { val1 = "Top text" });
            }
        }
    </div>

    @{
        if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
        {
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
            <script src="@Url.Content("~/js/react.client.bundle.js")"></script>
            @Html.ReactInitJavaScript()
        }
        else
        {
            <script src="@Url.Content("~/js/react.clientWithRender.bundle.js")"></script>
        }
    }
</body>
</html>

如何使用 ReactJS.NET 渲染带有 redux 的 React 应用程序？

How can I render the react app with redux using the ReactJS.NET?

reactjs

reactjs.net

react-redux