Edit in JSFiddle

window.ToDoList = React.createClass({
    render() {
        return (
        React.createElement("ul", null,
    this.props.todos.map(function(item){return React.createElement("li", null, item);})));
    }
});

ko.bindingHandlers.react = {
    init: function (el, valueAccessor, allBindings) {
        var Component = ko.unwrap(valueAccessor());
        var props = ko.toJS(allBindings.get('props'));

        // render to react? initial setup maybe?

        return {
            controlsDescendantBindings: true
        }; // important
    },

    update: function (el, valueAccessor, allBindings) {
        var Component = ko.unwrap(valueAccessor());
        var props = ko.toJS(allBindings.get('props'));

        // tell react to re-render
        React.render(React.createElement(Component, props), el);
    }
};

var i = 0;
var viewModel = {
    todos: ko.observableArray([])
};

setInterval(function () {
    if (viewModel.todos().length > 8) {
        viewModel.todos.shift();
    }
    viewModel.todos.push("this is To Do Item #" + i++);
}, 32);

ko.applyBindings(viewModel);

<h1>Todo List with <span data-bind="text: todos().length"></span> items</h1>

<div data-bind="react: window.ToDoList, props: { todos: todos }"></div>