2

我已经创建了单页应用程序，我在其中使用了React, Redux and React-Router.

我想渲染这个 SPAReactJS.NET以提高加载应用程序的性能。

SPA 编译为一个 Bundle.js，使用Webpack.

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

我怎样才能做到这一点？我找不到任何可以用 redux 解决这个组合的项目。

感谢您的示例或帮助。

4

2 回答 2

4

我知道这是一个老问题，但如果你仍然在将你的 React 应用程序整合到 React.NET 中遇到问题，你应该尝试以下模板并看看这个人是如何做到的。

他使用 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>
于 2017-05-01T23:56:33.400 回答
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 - 捕获所有路由和默认路由

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

于 2016-10-25T12:14:01.553 回答