anyong/App.jsx

## App.jsx
var React = require('react'),
    Flocks = require('flocks.js'),
    Router = require('react-router'),
    AppRoutes = require('./AppRoutes');

var App = Flocks.createClass({
  render () {return <div id="router"></div>;}
});

var Config = { target: document.getElementById('app'), control: App};

Flocks.mount(Config, {bill: 0});

Router
  .create({
    routes: AppRoutes,
    location: Router.HistoryLocation
  })
  .run((Handler) => {
    React.render(<Handler />, document.getElementById('router'));
  });

## AppRoutes.jsx
var Router = require('react-router'),
    Route = Router.Route,
    Master = require('./pages/Master'),
    TestComponent = require('./components/TestComponent');

var AppRoutes = (
  <Route name="root" path="/" handler={Master}>
    <Route name="testing" handler={TestComponent}/>
  </Route>
);

module.exports = AppRoutes;

## index.html
<!doctype html>
<head>
  <base href="/" />
  <meta charset="utf-8">
  <title>App</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>

## Master.jsx
var React = require('react'),
    Flocks = require('flocks.js'),
    Router = require('react-router'),
    RouteHandler = Router.RouteHandler;

var Master = Flocks.createClass({
  contextTypes: {
   router: React.PropTypes.func
  },
  render () {
    return <RouteHandler/>;

  }
});

module.exports = Master;

## TestComponent.jsx
var React = require('react'),
    Flocks = require('flocks.js');

var TipCalcPanel = Flocks.createClass({

  fmt: function(Tip) {
    return ((this.fctx.bill || 0) * Tip).toFixed(2);
  },

  setTotal: function(Becomes) {
    var fset = this.fset,
      fmt  = this.fmt;
    return function() { fset('total', fmt(Becomes)); };
  },

  update: function() {
    var NewBill = parseFloat(document.getElementById('billAmount').value);
    this.fset('bill', NewBill);
    this.fset('total', '');
  },

  render: function() {

    return (

      <div id="panel">

        <label id="amt" htmlFor="billAmount">
          Bill amount: $<input id="billAmount" onChange={this.update}/>
        </label>

        <div id="howHappy">
          <input type="button" value={"😁 25% = $" + this.fmt(0.25)} onClick={this.setTotal(1.25)}/>
          <input type="button" value={"😑 20% = $" + this.fmt(0.20)} onClick={this.setTotal(1.20)}/>
          <input type="button" value={"😦 15% = $" + this.fmt(0.15)} onClick={this.setTotal(1.15)}/>
        </div>

        <div id="result">
          Total: ${this.fctx.total}
        </div>

      </div>

    );

  }

});

var TipCalcLayout = Flocks.createClass({

  render: function() {

    return (
      <table id="layout">
        <tr>
          <td>{this.props.children}</td>
        </tr>
      </table>
    );

  }

});

var TestComponent = Flocks.createClass({
  render () {
    return (
    <TipCalcLayout>
      <TipCalcPanel/>
    </TipCalcLayout>
    );
  }
});
module.exports = TestComponent;
	var React = require('react'),
	Flocks = require('flocks.js'),
	Router = require('react-router'),
	AppRoutes = require('./AppRoutes');

	var App = Flocks.createClass({
	render () {return <div id="router"></div>;}
	});

	var Config = { target: document.getElementById('app'), control: App};

	Flocks.mount(Config, {bill: 0});

	Router
	.create({
	routes: AppRoutes,
	location: Router.HistoryLocation
	})
	.run((Handler) => {
	React.render(<Handler />, document.getElementById('router'));
	});
	var Router = require('react-router'),
	Route = Router.Route,
	Master = require('./pages/Master'),
	TestComponent = require('./components/TestComponent');

	var AppRoutes = (
	<Route name="root" path="/" handler={Master}>
	<Route name="testing" handler={TestComponent}/>
	</Route>
	);

	module.exports = AppRoutes;
	<!doctype html>
	<head>
	<base href="/" />
	<meta charset="utf-8">
	<title>App</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="app.js"></script>
	</body>
	</html>
	var React = require('react'),
	Flocks = require('flocks.js');

	var TipCalcPanel = Flocks.createClass({

	fmt: function(Tip) {
	return ((this.fctx.bill \|\| 0) * Tip).toFixed(2);
	},

	setTotal: function(Becomes) {
	var fset = this.fset,
	fmt = this.fmt;
	return function() { fset('total', fmt(Becomes)); };
	},

	update: function() {
	var NewBill = parseFloat(document.getElementById('billAmount').value);
	this.fset('bill', NewBill);
	this.fset('total', '');
	},

	render: function() {

	return (

	<div id="panel">

	<label id="amt" htmlFor="billAmount">
	Bill amount: $<input id="billAmount" onChange={this.update}/>
	</label>

	<div id="howHappy">
	<input type="button" value={"😁 25% = $" + this.fmt(0.25)} onClick={this.setTotal(1.25)}/>
	<input type="button" value={"😑 20% = $" + this.fmt(0.20)} onClick={this.setTotal(1.20)}/>
	<input type="button" value={"😦 15% = $" + this.fmt(0.15)} onClick={this.setTotal(1.15)}/>
	</div>

	<div id="result">
	Total: ${this.fctx.total}
	</div>

	</div>

	);

	}

	});

	var TipCalcLayout = Flocks.createClass({

	render: function() {

	return (
	<table id="layout">
	<tr>
	<td>{this.props.children}</td>
	</tr>
	</table>
	);

	}

	});

	var TestComponent = Flocks.createClass({
	render () {
	return (
	<TipCalcLayout>
	<TipCalcPanel/>
	</TipCalcLayout>
	);
	}
	});
	module.exports = TestComponent;