[Flux] 1. Development Environment Setup

Install packages:

{
  "name": "reactflux",
  "version": "1.0.0",
  "description": "",
  "main": "dist/js/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "0.13.3",
    "react-router-component": "0.26.0",
    "vinyl-source-stream": "1.1.0"
  },
  "devDependencies": {
    "browserify": "11.0.1",
    "del": "2.0.0",
    "gulp": "3.9.0",
    "gulp-plumber": "*",
    "reactify": "1.1.1",
    "run-sequence": "1.1.2"
  }
}

 

Automation with Gulp:

/**
 * Created by Answer1215 on 9/3/2015.
 */

var gulp = require('gulp'),
    browserify = require('browserify'),
    reactify = require('reactify'),
    del = require('del'),
    plumber = require('gulp-plumber'),
    runSequence = require('run-sequence'),
    source = require('vinyl-source-stream');

gulp.task('browserify', function () {
    browserify('./src/js/main.js')
        .transform('reactify')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('copy', function () {
    gulp.src('./src/index.html')
        .pipe(gulp.dest('dist'));
    gulp.src('./src/assets/**/*.*')
        .pipe(gulp.dest('dist/assets'));
});

gulp.task('watch', function() {
    gulp.watch('./src/**/*.*', ['browserify', 'copy']);
});

gulp.task('clean', function(callback) {
    return del(['./dist']);
});

gulp.task('default', function (callback) {
    runSequence('clean',  ['browserify', 'copy', 'watch'], callback);
});

 

Structure:

 

main.js:

var App = require('./components/app'),
    React = require('react');

React.render(<App />, document.getElementById('main'));

 

src/components/app.js:

var React = require('react');

var App = React.createClass({
    render: function(){
        return (<h1> My App</h1>);
    }
});

module.exports = App;