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;