javascript - Browserify 和 ReactJs.Net 服务器端渲染

Question

我一直在尝试获取 Flux Todo List Tutorial使用 ReactJS.Net 在 MVC 项目中运行。

我正在使用 Gulp 和 Browserify 来捆绑文件，然后调用以在我的 View 中呈现 React 组件。 gulpfile.js相关部分:

gulp.task('build', function(){
  browserify({
    entries: [path.ENTRY_POINT],
    transform: [reactify]
  })
    .bundle()
    .pipe(source(path.NON_MINIFIED_OUT))
    .pipe(gulp.dest(path.DEST_BUILD));
});

我已经更改了 App.js 文件以全局定义我的组件:

global.React = require('react');

global.TodoApp = require('./components/TodoApp.react');

我正在尝试在我的 View 中使用，如下所示:

<div id="app">
    @Html.React("TodoApp", new {})
</div>

<script src="http://fb.me/react-0.13.3.min.js"></script>
@Scripts.Render("~/bundles/reactApp")
@Html.ReactInitJavaScript()

但它在运行时抛出以下错误:

Could not find a component named 'TodoApp'. Did you forget to add it to App_Start\ReactConfig.cs?

我已将 Browserify 的输出添加到我的 ReactConfig.cs:

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/dist/build.js"); // Have also tried .AddScriptWithoutTransform
}

但似乎并没有什么帮助。

如果我只在客户端渲染，效果很好:

<div id="app">
</div>

@Scripts.Render("~/bundles/reactApp")
<script>
    React.render(
        React.createElement(TodoApp, null),
        document.getElementById('app')
    );
</script>

Answer 1

查看此博客:

http://janekk.github.io/tech/2014/07/25/aspnet-mvc-reactjs-browserify.html

这里是 ReactJs.Net、Gulp 和 Browserify 的一个很好的例子:

https://github.com/Janekk/ReactDotNetBrowserify

希望对您有所帮助:)