React with jQuery Sortable example.

react-sortable

// Quick and dirty example.
// For a more robust solution check https://gist.github.com/petehunt/7882164

var Sortable = React.createClass({
	getInitialState: function() {
		return {
			items: [
				'Item1',
				'Item2',
				'Item3',
				'Item4',
				'Item5',
				'Item6',
				'Item7',
			]
		}
	},

	_findSortableContainer: function() {
		var container = React.findDOMNode(this);
		return $(container).find('#sortable');
	},

    // Long story short, we need to discard any jQuery dom update after the sort event,
    // so befreo React applies the updates the virtual DOM matches the actual DOM.
	_saveReactRenderedSortableDOM: function() {
		this.reactRenderedSortableDOM = $(this._findSortableContainer()).html();
	},

	componentDidMount: function() {
		this._registerSortable();
		this._saveReactRenderedSortableDOM();
	},

	componentDidUpdate: function() {
		this._saveReactRenderedSortableDOM();
	},

	_rollbackSortedDOM: function() {
		$(this._findSortableContainer()).html(this.reactRenderedSortableDOM);
	},

	_registerSortable: function() {
		var ul = this._findSortableContainer();
		var self = this;

		$(ul).sortable({
			update: function(event, ui) {
				var listElements = $(this).find('li');
				var newItems = [];
				$(listElements).each(function(index, item) {
					newItems.push($(item).data('item'));
				});

				self._rollbackSortedDOM();
				self.setState({items: newItems});
			}
		});

		$(ul).disableSelection();
	},

	render: function() {
		var getSortableLiNode = function(item, index) {
			return (
				<li data-item={item} key={index} className="ui-state-default">
					<span className="ui-icon ui-icon-arrowthick-2-n-s"></span>
					{item}
				</li>
			);
		};

		var getLiNode = function(item, index) {
			return (
				<li key={index}>{item}</li>
			);
		};

		return (
			<div>
				<ul id="sortable">
				  {this.state.items.map(getSortableLiNode)}
				</ul>
				<form onSubmit={this._onSubmit}>
					<input ref="Item" defaultValue="" />
					<button type="submit">Add New</button>
				</form>
				<ul id="test-mirror">
					{this.state.items.map(getLiNode)}
				</ul>
			</div>
		);
	},

	_onSubmit: function(event) {
		event.preventDefault();
		var input = React.findDOMNode(this.refs.Item)
		var value = input.value;
		if (!value) return;

		var items = this.state.items;
		items.push(value);
		input.value = '';

		this.setState({items: items});
	}
});

The ui-state-default ui-icon ui-icon-arrowthick-2-n-s classes are from the example here: http://jqueryui.com/sortable/

Works for React 0.13 and jQuery UI 1.11.4