我可以在ReactJS.net上应用Flux架构吗？

Question

如何使用reactjs.net在asp.net中创建flux通信架构？

我会有几个文件.Jsx,我将如何通过服务器成为所有rendenizador？

在这个例子中=> Link,它使用asp.net创建,但不使用服务器渲染

Answer 1

我目前正在研究一个功能,作为我们.net应用程序中reactjs + flux的测试平台.以下是它的设置方式.

1. 我们使用nodejs作为包管理器.我们使用NodeJs Visual Studio Tools来获取VS中的nodejs交互窗口,并能够创建NodeJs项目.http://nodejstools.codeplex.com/
2. Gulp任务调用browserify来搜索根jsx并找到所有依赖项.Gulp还调用了reactify库来转换jsx文件.连接的.js文件放在我们mvc网站的目录中.
3. Gulp任务也将所有相关的js文件复制到mvc.net项目中.
4. 在开发时,我们使用Visual Studio Task Runner扩展来运行监视更改的Gulp任务,这样我们就不必在开发时"继续构建".它使用"watchify"库.
5. 我们使用Jest进行测试 - 虽然我们在最新版本的NodeJ中遇到NodeJs和jest问题,但我们不得不降级到0.10.36.
6. 我们使用TeamCity在构建我们的解决方案之前运行Gulp任务(进行测试设置,但尚未将其添加到我的新功能中).

Gulp做了大部分魔术.这是我们的Gulp文件的副本(它很乱,但我还在学习).许多任务是观看css js和jsx文件,但我希望这会有所帮助.

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');

var createbundler = function () {

    var bundler = browserify({
        entries: ['./app/js/VaeApp.jsx'], // Only need the root js file, browserify finds the dependencies
        transform: [reactify], // We want to convert JSX to normal javascript
        debug: false, // include sourcemapping for minified scripts?
        cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
    });
    return bundler;
}
gulp.task('js', function () {

    var bundler = createbundler();

    bundler.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(uglify())
        // Create the initial bundle when starting the task
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

gulp.task('js-shim-sham', function () {
    gulp.src('./node_modules/es5-shim/es5-*.min.js')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
    console.log("updated shim-sham");
});
gulp.task('js-dev', function () {

    var watcher = watchify(createbundler());

    return watcher
    .on('update', function () { // When any files update
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle().pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
   // .pipe(uglify())
    // Create the initial bundle when starting the task
    .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

var runcss = function () {
    var updateStart = Date.now();
    gulp.src('./app/css/document/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/css'));

    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};

var runimages = function () {
    var updateStart = Date.now();
    gulp.src('./app/img/*.*')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/img'));
    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};
gulp.task('styles', function () {

    runcss();
    runimages();

});
gulp.task('styles-dev', function () {
    runcss();

    gulp.watch('./app/css/document/*.css', runcss);

    runimages();
    gulp.watch('./app/img/*.*', runimages);

});

// Just running the two tasks
gulp.task('build-dev', ['js-dev', 'styles-dev', 'js-shim-sham']);

// Just running the two tasks
gulp.task('build', ['js', 'styles', 'js-shim']);