Can I apply Flux architecture with ReactJS.net?

Question

How create flux architecture in asp.net using reactjs.net ?

I will have several files. Jsx, how will I manage to be all rendenizador by the server?

In this example => Link, it creates using asp.net but not render with server

Answer 1

I am currently working on a feature as a test bed for reactjs + flux in our .net application. Here is how it is set up.

1. We use nodejs as a package manager. we use NodeJs Visual Studio Tools to get the nodejs interactive window in VS and to be able to create NodeJs projects. http://nodejstools.codeplex.com/
2. Gulp task calls browserify to search through the the root jsx and find all dependencies. Gulp also calls the reactify library is used to transform the jsx files. The concatenated .js file is put on in a directory in our mvc website.
3. Gulp task copies all relevant js files to the mvc.net project as well.
4. When developing we use the Visual Studio Task Runner extension to run a Gulp task that watches for changes so we don't have to "keep building" while developing. It uses the "watchify" library.
5. We use Jest for testing - although we had an issue with NodeJs and jest playing nice in the newest version of NodeJs, so we had to down grade to 0.10.36.
6. we use TeamCity to run the Gulp task before building our solution (have a test setup, but haven't added it to my new feature yet).

Gulp does most of the magic. Here is a copy of our Gulp file (it is messy, but I am still learning). Many of the tasks are to watch css js and jsx files, but I hope this helps.

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']);

Answer 2

Check out react-dot-not.

It uses webpack/gulp with ASP.MVC. it supports redux/flux, supports client side routing with react-router, with an F5 at any time to re-render the same page from the server.