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) {
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 ' +...