如何使用ReactJS.NET使用redux来呈现ReactJS.NET？
我已经创建了使用React, Redux and React-Router的单一页面应用程序。
为了提高加载应用程序的性能，我希望使用ReactJS.NET呈现这个SPA。
SPA使用Bundle.js编译为一个Webpack。
我有一个ASP.NET MVC应用程序，在那里我可以粘贴这个包，这个包将通过ReactJS.NET呈现。这个SPA中的所有内容都将在一个ASP.NET视图中工作，但可以使用React-router。
我怎么能这么做？我找不到用redux解决这个组合的任何项目。
谢谢你的例子或帮助。
回答 2
Stack Overflow用户
发布于 2017-05-01 23:56:33
我知道这是一个老问题，但是如果您仍然存在将您的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>Stack Overflow用户
发布于 2016-10-25 12:14:01
为什么要使用ReactJS.NET？MVC.NET堆栈没有什么特别之处，它需要一个单独的项目来启动并在其中运行。我会用巴贝尔，Webpack，反应，反应-Dom和反应-路由器的组合。MVC.NET应该只交付包--其他的一切都应该作出反应--以及它的依赖性。
React.NET默认教程的问题在于，它没有考虑到使用webpack绑定依赖项的事实，而是有手动添加依赖关系的示例。这并不是编写React的首选方式，而是试图隐藏设置React项目的初始复杂性，从而使复杂的过程更加复杂。
建议：
Webpack将捆绑你的反应-路由器，反应和反应-多玛和其他东西。您需要以这样一种方式来设置MVC，即每个url请求都由相同的控制器操作来处理--路由器可以处理url更改。这个答案解释了如何做到这一点。ASP.NET MVC -捕获所有路由和默认路由
如果不这样做，MVC将尝试处理所有url路由更改，而不是作出反应-路由器做它的事情。
https://stackoverflow.com/questions/40238903
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号