JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

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="http://kenwheeler.github.io/mcfly/McFly.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** McFly */

var Flux = new McFly();

/** Store */

_todos = [];

function addTodo(text){
    _todos.push(text);
}

var TodoStore = Flux.createStore({
    getTodos: function(){
       return _todos;
    }
}, function(payload){
    if(payload.actionType === "ADD_TODO") {
        addTodo(payload.text);
        TodoStore.emitChange();
    }
});

/** Actions */

var TodoActions = Flux.createActions({
    addTodo: function(text){
       return {
          actionType: "ADD_TODO",
          text: text
       }
    }
});

function getState(){
   return {
       todos: TodoStore.getTodos()
   }
}

/** Controller View */

var TodosController = React.createClass({
    mixins: [TodoStore.mixin],
    getInitialState: function(){
        return getState();
    },
    onChange: function() {
        this.setState(getState());
    },
    render: function() {
        return <Todos todos={this.state.todos} />;
    }
});

/** Component */

var Todos = React.createClass({
    addTodo: function(){
        TodoActions.addTodo('test');
    },
    render: function() {
        return (
        <div className="todos_app">
            <ul className="todos">
                { this.props.todos.map(function(todo, index){
                    return <li key={index}>Todo {index}</li>
                })}
            </ul>
            <button onClick={this.addTodo}>Add Todo</button>
        </div>
        )
    }
});
 
React.render(<TodosController />, document.body);