JSFiddle - React, Tailwind, and code Playground

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) {
            //position changes, but make sure key is always the same for a row
            key = parseInt(item.slice(-1),10)
            items.push(<li class="ui-state-default" data-position={i} key={key}><Row name={item} /></li>);
        });
        return <ul>{items}</ul>;
    }
});

var Main = React.createClass({
    getInitialState: function() {
        return {items: ['item 0', 'item 1', 'item 2']};
    },
    addItem: React.autoBind(function() {
        this.setState({items: this.state.items.concat(['item ' + (this.state.items.length + 1)])});
    }),
    render: function() {
        return (
            <div>
                <SortableList items={this.state.items} ref="list" />
                <button onClick={this.addItem}>Add item</button>
                <p>I want the order of the state.items array to be the same as the sorted list</p>
                <pre>{JSON.stringify(this.state.items)}</pre>
            </div>
        );
    },
    componentDidMount: function() {
        $(this.refs.list.getDOMNode()).sortable({update: function(event, ui) {
          sortedItems = []
          $(this.refs.list.getDOMNode()).find("li").map(function(i, el) {
            sortedItems.push("item "+$(el).data("position"))
          })
          this.setState({items: sortedItems})
        }.bind(this)});
    }
});
...