Edit in JSFiddle

var KnockoutMixin = {

    updateKnockout: function () {
        this.__koTrigger(!this.__koTrigger());
    },

    componentDidMount: function () {
        this.__koTrigger = ko.observable(true);
        this.__koModel = ko.computed(function () {
            this.__koTrigger(); // subscribe to changes of this...

            return {
                props: this.props,
                state: this.state
            };
        }, this);

        ko.applyBindings(this.__koModel, this.getDOMNode());
    },

    componentWillUnmount: function () {
        ko.cleanNode(this.getDOMNode());
    },

    componentDidUpdate: function () {
        this.updateKnockout();
    }
};

var ToDoList = React.createClass({
    mixins: [KnockoutMixin],

    render() {
        return (
        React.createElement("ul", {
            "data-bind": "foreach: props.todos"
        },
        React.createElement("li", {
            "data-bind": "text: $data"
        })));
    }
});
var i = 0;
var App = React.createClass({
    getInitialState: function () {
        return {
            todos: []
        };
    },
    componentDidMount: function () {
        setInterval(this.updateList, 32)
    },
    updateList: function () {
        var todos = this.state.todos;
        if (todos.length > 8) {
            todos.shift();
        }
        todos.push("This is To Do Item #" + i++);
        this.setState({ todos: todos });
    },
    render: function () {
        return React.createElement(ToDoList, { todos: this.state.todos });
    }
});

React.render(
React.createElement(App, {}),
document.getElementById("mount"));

<h1>Todo List</h1>
<div id="mount"></div>