JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>
<h1>Todo List with <span data-bind="text: todos().length"></span> items</h1>

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

JavaScript

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([])
};



ko.applyBindings(viewModel);