AllenFang · September 15, 2016 09:29
diff --git a/app.js b/app.js
 import React from 'react';
 import DemoApp from './components/DemoApp.react';

 React.render(
 	<DemoApp />,
 	document.getElementById("example")
 );
diff --git a/Content.react.js b/Content.react.js
 import React from 'react';

 export default React.createClass({
 	render() {
 		return (
 			<div>Current value: {this.props.count}</div>
 		)
 	}
 });
diff --git a/DemoAction.js b/DemoAction.js
 import DemoDispatcher from '../dispatcher/DemoDispatcher';
 import DemoConstants from '../constants/DemoConstants';

 var DemoAction = {
 	increase: () =>{
 		DemoDispatcher.dispatch({
 			actionType: DemoConstants.DEMO_INCREASE
 		});
 	}, 

 	decrease: () =>{
 		DemoDispatcher.dispatch({
 			actionType: DemoConstants.DEMO_DECREASE
 		});
 	}
 };

 export default DemoAction;
diff --git a/DemoApp.react.js b/DemoApp.react.js
 import React from 'react';
 import Header from './Header.react';
 import Content from './Content.react';
 import demoStore from '../stores/DemoStore';

 var DemoApp = React.createClass({
 	getInitialState() {
 		return {
 			count: demoStore.getCount()
 		};
 	},
 	componentDidMount(){
 		demoStore.addChangeListener(this._onChange);
 	},
 	componentWillUnmount(){
 		demoStore.removeChangeListener(this._onChange);
 	},
 	render() {
 		return (
 		  <div>
 	      	<Header />
 	      	<Content count={this.state.count}/>
 	      </div>
 	    )
 	},
 	_onChange(){
 		this.setState({
 			count: demoStore.getCount()
 		});
 	}
 });

 export default DemoApp;
diff --git a/DemoConstants.js b/DemoConstants.js
 export default {
 	DEMO_INCREASE: "INCREASE",
 	DEMO_DECREASE: "DECREASE"
 };
diff --git a/DemoDispatcher.js b/DemoDispatcher.js
 import {Dispatcher} from 'flux';

 export default new Dispatcher();
diff --git a/DemoStore.js b/DemoStore.js
 import {EventEmitter} from 'events';
 import DemoDispatcher from '../dispatcher/DemoDispatcher'
 import DemoConstants from '../constants/DemoConstants';

 const CHANGE_EVENT = "change";
 let count = 0;

 function _increase() {
 	count++;
 }

 function _decrease(){
 	count--;
 }

 class DemoStore extends EventEmitter{
 	
 	getCount(){
 		return count;
 	}

 	emitChange(){
 		this.emit(CHANGE_EVENT);
 	}

 	addChangeListener(callback){
 		this.on(CHANGE_EVENT, callback);
 	}

 	removeChangeListener(callback){
 		this.removeListener(CHANGE_EVENT, callback);
 	}
 }
 var demoStore = new DemoStore();
 DemoDispatcher.register((action) => {
 	switch(action.actionType){
 		case DemoConstants.DEMO_INCREASE:
 			_increase();
 			demoStore.emitChange();
 			break;
 		case DemoConstants.DEMO_DECREASE:
 			_decrease();
 			demoStore.emitChange();
 			break;
 		default:
 	}
 });

 export default demoStore;
diff --git a/Gulpfile.js b/Gulpfile.js
 var gulp       = require('gulp');
 var browserify = require('gulp-browserify');
 var rename     = require('gulp-rename');

 gulp.task("default", ["build"]);

 gulp.task('build', function(){
 	gulp.src("js/*.js")
 		.pipe(browserify({
 			transform: ["babelify"]
 		}))
 		.pipe(rename("bundle.js"))
 		.pipe(gulp.dest("./build"));
 });
diff --git a/gulpinit.sh b/gulpinit.sh
 $ npm install gulp --save-dev
 $ npm install gulp-browserify --save-dev
 $ npm install gulp-rename --save-dev
diff --git a/Header.react.js b/Header.react.js
 import React from 'react';
 import DemoAction from '../actions/DemoAction';

 export default React.createClass({
 	handleIncrease(){
 		DemoAction.increase();
 	},

 	handleDecrease(){
 		DemoAction.decrease();
 	},

 	render() {
 		return(
 			<div>
 				<section>
 					<button onClick={this.handleIncrease}>Increase</button>
 					<button onClick={this.handleDecrease}>Decrease</button>
 				</section>
 			</div>
 		)
 	}
 });
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React demo with babel</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="build/bundle.js"></script>
  </body>
 </html>
diff --git a/initial.sh b/initial.sh
 $ npm install react --save
 $ npm install flux --save
 $ npm install browserify --save-dev 
 $ npm install babelify --save-dev
diff --git a/package.json b/package.json
 {
  "name": "react-flux-babel",
  "version": "1.0.0",
 }
diff --git a/package1.json b/package1.json
 "browserify": {
    "transform": [
      "babelify"
    ]
  }
	import React from 'react';
	import DemoApp from './components/DemoApp.react';

	React.render(
	<DemoApp />,
	document.getElementById("example")
	);
	import React from 'react';

	export default React.createClass({
	render() {
	return (
	<div>Current value: {this.props.count}</div>
	)
	}
	});
	import DemoDispatcher from '../dispatcher/DemoDispatcher';
	import DemoConstants from '../constants/DemoConstants';

	var DemoAction = {
	increase: () =>{
	DemoDispatcher.dispatch({
	actionType: DemoConstants.DEMO_INCREASE
	});
	},

	decrease: () =>{
	DemoDispatcher.dispatch({
	actionType: DemoConstants.DEMO_DECREASE
	});
	}
	};

	export default DemoAction;
	import React from 'react';
	import Header from './Header.react';
	import Content from './Content.react';
	import demoStore from '../stores/DemoStore';

	var DemoApp = React.createClass({
	getInitialState() {
	return {
	count: demoStore.getCount()
	};
	},
	componentDidMount(){
	demoStore.addChangeListener(this._onChange);
	},
	componentWillUnmount(){
	demoStore.removeChangeListener(this._onChange);
	},
	render() {
	return (
	<div>
	<Header />
	<Content count={this.state.count}/>
	</div>
	)
	},
	_onChange(){
	this.setState({
	count: demoStore.getCount()
	});
	}
	});

	export default DemoApp;
	export default {
	DEMO_INCREASE: "INCREASE",
	DEMO_DECREASE: "DECREASE"
	};
	import {Dispatcher} from 'flux';

	export default new Dispatcher();
	import {EventEmitter} from 'events';
	import DemoDispatcher from '../dispatcher/DemoDispatcher'
	import DemoConstants from '../constants/DemoConstants';

	const CHANGE_EVENT = "change";
	let count = 0;

	function _increase() {
	count++;
	}

	function _decrease(){
	count--;
	}

	class DemoStore extends EventEmitter{

	getCount(){
	return count;
	}

	emitChange(){
	this.emit(CHANGE_EVENT);
	}

	addChangeListener(callback){
	this.on(CHANGE_EVENT, callback);
	}

	removeChangeListener(callback){
	this.removeListener(CHANGE_EVENT, callback);
	}
	}
	var demoStore = new DemoStore();
	DemoDispatcher.register((action) => {
	switch(action.actionType){
	case DemoConstants.DEMO_INCREASE:
	_increase();
	demoStore.emitChange();
	break;
	case DemoConstants.DEMO_DECREASE:
	_decrease();
	demoStore.emitChange();
	break;
	default:
	}
	});

	export default demoStore;
	var gulp = require('gulp');
	var browserify = require('gulp-browserify');
	var rename = require('gulp-rename');

	gulp.task("default", ["build"]);

	gulp.task('build', function(){
	gulp.src("js/*.js")
	.pipe(browserify({
	transform: ["babelify"]
	}))
	.pipe(rename("bundle.js"))
	.pipe(gulp.dest("./build"));
	});
	$ npm install gulp --save-dev
	$ npm install gulp-browserify --save-dev
	$ npm install gulp-rename --save-dev
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React demo with babel</title>
	</head>
	<body>
	<div id="example"></div>
	<script src="build/bundle.js"></script>
	</body>
	</html>