JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="https://rawgit.com/FormidableLabs/biff/master/dist/Biff.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/** Biff */
var Flux = new Biff();
/** API */
var API = {
asyncCall: function(data){
return new Promise(function(resolve, rej){
setTimeout(function(){
resolve(data);
}, 500);
});
}
}
/** Store */
_todos = [];
function addTodo(text){
_todos.push(text);
}
var TodoStore = Flux.createStore({
getTodos: function(){
return _todos;
}
}, function(payload){
if(payload.actionType === "ADD_TODO") {
TodoStore.emitError("Store couldn't fetch data");
}
});
/** Actions */
var TodoActions = Flux.createActions({
addTodo: function(text){
var self = this;
API.asyncCall(text)
.then(function(text){
self.dispatch({
actionType: "ADD_TODO",
id: text
});
});
}
});
function getState(){
return {
error: null
}
}
/** Controller View */
var TodosController = React.createClass({
mixins: [TodoStore.mixin],
getInitialState: function(){
return getState();
},
storeError: function(error) {
this.setState({
error: error
});
},
render: function() {
return <Todos todos={this.state.todos} error={this.state.error} />;
}
});
/** Component */
var Todos = React.createClass({
addTodo: function(){
TodoActions.addTodo('test');
},
render: function() {
return (
<div className="todos_app">
{this.props.error}
<button onClick={this.addTodo}>Add Todo</button>
</div>
)
}
});
React.render(<TodosController />, document.body);