JSFiddle - React, Tailwind, and code Playground

by johnthethird

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Row = React.createClass({
    componentDidMount: function() {
        this.startTime = Date.now();
        this.interval = window.setInterval(this.forceUpdate.bind(this), 50);
    },
    componentWillUnmount: function() {
        window.clearInterval(this.interval);
    },
    render: function() {
        var elapsed = ((Date.now() - this.startTime) / 1000).toFixed(1);
        return <span>I am {this.props.name}. I have been running for {elapsed} seconds.</span>;
    }
});

var SortableList = React.createClass({
    render: function() {
        var items = [];
        this.props.items.map(function(item, i) {
            var id = parseInt(item.slice(-1),10)
            items.push(<li class="ui-state-default" ref={'item' + i} id={id}/>);
        });
        return <ul ref="sortable">{items}</ul>;
    },
    componentDidMount: function() {
        $(this.refs.sortable.getDOMNode()).sortable({
          update: function() {
              var sortedItems = [];
              $(this.refs.sortable.getDOMNode()).find("li").map(function(i, el) {
                sortedItems.push("item "+(parseInt(el.id,10)));
              })
              this.props.handleSort(sortedItems);
          }.bind(this)
        });
        this.renderRows();
    },
    componentDidUpdate: function() {
        this.renderRows();
    },
    renderRows: function() {
        this.props.items.map(function(item, i) {
            React.renderComponent(<Row name={item} />, this.refs['item' + i].getDOMNode());
        }.bind(this));
    },
    componentWillUnmount: function() {
        this.props.items.map(function(item, i) {
            React.unmountAndReleaseReactRootNode(this.refs['item' + i].getDOMNode());
        });
    }
});

var Main = React.createClass({
    getInitialState: function() {
        return {items: ['item 1', 'item 2', 'item 3']};
    },
    addItem: React.autoBind(function() {
        this.setState({items: this.state.items.concat(['item ' +...