AllenFang · August 29, 2015 14:17
diff --git a/app.js b/app.js
 var React = require("react");
 var DemoApp = require("./components/DemoApp.react");
 React.render(
 	<DemoApp />,
 	document.getElementById("example")
 );
diff --git a/Content.react.js b/Content.react.js
 var React = require("react");

 var Content = React.createClass({
 	render: function(){
 		return(
 			<div>{this.props.value}</div>
 		)
 	}
 });

 module.exports = Content;
diff --git a/DemoAction.js b/DemoAction.js
 var DemoDispatcher = require("../dispatcher/DemoDispatcher");
 var DemoAction = {
 	increase: function(){
 		DemoDispatcher.dispatch({
 			actionType: "Increase"
 		});
 	},

 	decrease: function(){
 		DemoDispatcher.dispatch({
 			actionType: "Decrease"
 		});
 	}
 };

 module.exports = DemoAction;
diff --git a/DemoApp.react.js b/DemoApp.react.js
 var React = require("react");
 var Header = require("./Header.react");
 var Content = require("./Content.react");
 var DemoStore = require("../stores/DemoStore");

 var DemoApp = React.createClass({
  	//initial stage, use Store to get default value and bind to the React state
 	getInitialState: function(){
 		return{
 			value: DemoStore.getValue()
 		};
 	},
 	componentDidMount: function() {
 	    //listen up an event from Store, if value in Store changed, _onChange function will be triggered
    		DemoStore.addChangeListener(this._onChange);
 	},

  	componentWillUnmount: function() {
    		DemoStore.removeChangeListener(this._onChange);
  	},

 	render: function(){
 		return(
 			<div>
 				<Header />
 				<Content value={this.state.value}/>			
 			</div>
 		);
 	},
  	// If value in Store change, this function will be triggered
  	// so we need to reset the state
 	_onChange: function(){
 		this.setState({
 			value: DemoStore.getValue()
 		});
 	}
 });

 module.exports = DemoApp;
diff --git a/DemoDispatcher.js b/DemoDispatcher.js
 var Dispatcher = require('flux').Dispatcher;

 module.exports = new Dispatcher();
diff --git a/DemoStore.js b/DemoStore.js
 var DemoDispatcher = require('../dispatcher/DemoDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var assign = require("object-assign");

 var CHANGE_EVENT = 'change';
 // Our value show on the view
 var _value = 0;

 // increase logic
 function _increase(){
 	_value++;
 }
 // decrease logic
 function _decrease(){
 	_value--;
 }
 // define a Store object the extends EventEmitter from node.js event lib
 var DemoStore = assign({}, EventEmitter.prototype, {
 	getValue: function(){
 		return _value;
 	},

  // trigger a value changed event!!
 	emitChange: function() {
    	this.emit(CHANGE_EVENT);
  },
  
  // the callback function will be defined and be passed from view 
  // in our example, the callback function be defined in DemoApp.react.js and named _onChange
 	addChangeListener: function(callback) {
 		this.on(CHANGE_EVENT, callback);
 	},

  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
 });

 //Use dispatcher to listen some events
 DemoDispatcher.register(function(action){
 	switch(action.actionType){
 		case "Increase":
 			_increase(); // do increase logic
 			DemoStore.emitChange();  // after value change, trigger a event
 			break;
 		case "Decrease":
 			_decrease(); // do decrease logic
 			DemoStore.emitChange(); // after value change, trigger a event
 			break;
 		default:
 	}
 });

 module.exports = DemoStore;
diff --git a/Header.react.js b/Header.react.js
 var React = require("react");
 var DemoAction = require("../actions/DemoAction");

 var Header = React.createClass({
  	//handle click Increase button, call DemoAction's increase function
 	handleIncrease: function(){
 		DemoAction.increase();
 	},
 	//handle click Decrease button, call DemoAction's decrease function
 	handleDecrease: function(){
 		DemoAction.decrease();
 	},
 	render: function(){
 		return(
 			<div>
 				<section>
 					<button onClick={this.handleIncrease}>Increase</button>
 					<button onClick={this.handleDecrease}>Decrease</button>
 				</section>
 			</div>
 		);
 	}
 });

 module.exports = Header;
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React demo with flux</title>
  </head>
  <body>
    <div id="example"></div>
  </body>
 </html>
diff --git a/index1.html b/index1.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React demo with flux</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="build/bundle.js"></script>
  </body>
 </html>
diff --git a/install.sh b/install.sh
 $ npm install browserify -g
 $ npm install browserify --save-dev
 $ npm install reactify --save-dev
diff --git a/package.json b/package.json
 {
  "name": "react-flux-demo",
  "version": "1.0.0",
  "description": "It's a simple demo for react and flux."
 }
diff --git a/package1.json b/package1.json
 "browserify": {
    "transform": [
      "reactify"
    ]
  }
diff --git a/shell1.sh b/shell1.sh
 $ npm install react --save
 $ npm install flux --save
 $ npm install object-assign --save #object-assign > https://github.com/sindresorhus/object-assign
	var React = require("react");
	var DemoApp = require("./components/DemoApp.react");
	React.render(
	<DemoApp />,
	document.getElementById("example")
	);
	var React = require("react");

	var Content = React.createClass({
	render: function(){
	return(
	<div>{this.props.value}</div>
	)
	}
	});

	module.exports = Content;
	var DemoDispatcher = require("../dispatcher/DemoDispatcher");
	var DemoAction = {
	increase: function(){
	DemoDispatcher.dispatch({
	actionType: "Increase"
	});
	},

	decrease: function(){
	DemoDispatcher.dispatch({
	actionType: "Decrease"
	});
	}
	};

	module.exports = DemoAction;
	var React = require("react");
	var Header = require("./Header.react");
	var Content = require("./Content.react");
	var DemoStore = require("../stores/DemoStore");

	var DemoApp = React.createClass({
	//initial stage, use Store to get default value and bind to the React state
	getInitialState: function(){
	return{
	value: DemoStore.getValue()
	};
	},
	componentDidMount: function() {
	//listen up an event from Store, if value in Store changed, _onChange function will be triggered
	DemoStore.addChangeListener(this._onChange);
	},

	componentWillUnmount: function() {
	DemoStore.removeChangeListener(this._onChange);
	},

	render: function(){
	return(
	<div>
	<Header />
	<Content value={this.state.value}/>
	</div>
	);
	},
	// If value in Store change, this function will be triggered
	// so we need to reset the state
	_onChange: function(){
	this.setState({
	value: DemoStore.getValue()
	});
	}
	});

	module.exports = DemoApp;
	var Dispatcher = require('flux').Dispatcher;

	module.exports = new Dispatcher();
	var DemoDispatcher = require('../dispatcher/DemoDispatcher');
	var EventEmitter = require('events').EventEmitter;
	var assign = require("object-assign");

	var CHANGE_EVENT = 'change';
	// Our value show on the view
	var _value = 0;

	// increase logic
	function _increase(){
	_value++;
	}
	// decrease logic
	function _decrease(){
	_value--;
	}
	// define a Store object the extends EventEmitter from node.js event lib
	var DemoStore = assign({}, EventEmitter.prototype, {
	getValue: function(){
	return _value;
	},

	// trigger a value changed event!!
	emitChange: function() {
	this.emit(CHANGE_EVENT);
	},

	// the callback function will be defined and be passed from view
	// in our example, the callback function be defined in DemoApp.react.js and named _onChange
	addChangeListener: function(callback) {
	this.on(CHANGE_EVENT, callback);
	},

	removeChangeListener: function(callback) {
	this.removeListener(CHANGE_EVENT, callback);
	}
	});

	//Use dispatcher to listen some events
	DemoDispatcher.register(function(action){
	switch(action.actionType){
	case "Increase":
	_increase(); // do increase logic
	DemoStore.emitChange(); // after value change, trigger a event
	break;
	case "Decrease":
	_decrease(); // do decrease logic
	DemoStore.emitChange(); // after value change, trigger a event
	break;
	default:
	}
	});

	module.exports = DemoStore;
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React demo with flux</title>
	</head>
	<body>
	<div id="example"></div>
	</body>
	</html>
	$ npm install browserify -g
	$ npm install browserify --save-dev
	$ npm install reactify --save-dev
	{
	"name": "react-flux-demo",
	"version": "1.0.0",
	"description": "It's a simple demo for react and flux."
	}
	$ npm install react --save
	$ npm install flux --save
	$ npm install object-assign --save #object-assign > https://github.com/sindresorhus/object-assign