T3/React usage rough hack

gistfile1.js

// todo-list module
Application.addModule('todo-list', function(context) {

    var xhr;

    var TodoList = React.createClass({
        render: function() {
            return (
                <div>
                    <TodoItems />
                </div>
            );
        }
    });
    
    function render() {
        React.render(
            <TodoList />,
            context.getElement()
        );
    }

    return {
        messages: [
            'todostatuschange', // message sent by a todo about its state
            ...
        ],

        init: function() {
            xhr = context.getService('xhr');
            // some initial render
        },

        onmessage: function(name, data) {
            switch (name) {
                case 'todostatuschange':
                    xhr.post(data).then(render);
                    break;
                ...
            }
        }
    };
});

// A todo item wrapper component
Application.addService('todo-items', function(application) {
    // Get the Todo component
    var Todo = application.getService('todo');
    
    var TodoItems = React.createClass({
        render: function() {
            return (
                <div>
                    <Todo />
                    ... bunch of todos ...
                    <Todo />
                </div>
            );
        }
    });
    
    return TodoItems;
});

// A todo component
Application.addService('todo', function(application) {
    var Todo = React.createClass({
        
        updateTodo: function(event) {
            // do some stuff
            application.broadcast('todostatuschange', { ... data to send to the server ... });
        },

        render: function() {
            return (
                <div onClick={this.updateTodo}>DOM for a todo</div>
            );
        }
    });

    return Todo;
});