Могу ли я применить архитектуру Flux с ReactJS.net?

В настоящее время я работаю над функцией в качестве испытательного стенда для reactjs + flux в нашем приложении .net. Вот как это устроено.

1. Мы используем nodejs в качестве менеджера пакетов. мы используем инструменты NodeJs Visual Studio, чтобы получить интерактивное окно nodejs в VS и иметь возможность создавать проекты NodeJs. http://nodejstools.codeplex.com/
2. Задача Gulp вызывает браузер для поиска в корневом jsx и нахождения всех зависимостей. Gulp также называет библиотеку reactify, используемую для преобразования файлов jsx. Объединенный файл .js помещается в каталог на нашем веб-сайте mvc.
3. Задача Gulp также копирует все соответствующие файлы js в проект mvc.net.
4. При разработке мы используем расширение Task Runner для Visual Studio для запуска задачи Gulp, которая отслеживает изменения, поэтому нам не нужно «продолжать сборку» во время разработки. Он использует библиотеку «watchify».
5. Мы используем Jest для тестирования — хотя у нас были проблемы с NodeJ, и jest хорошо работал в новейшей версии NodeJ, поэтому нам пришлось понизить класс до 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']);

Проверьте реагировать-точка-не.

Он использует webpack/gulp с ASP.MVC. он поддерживает redux/flux, поддерживает маршрутизацию на стороне клиента с помощью react-router, с F5 в любое время для повторного рендеринга той же страницы с сервера.