React/JSX Base + MagicMove States Example

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="https://rawgit.com/ryanflorence/react-magic-move/master/dist/react-magic-move.js"></script>

<title>Basic Example</title>
<body>
<div id="example"></div>

CSS

body {
  font-family: "Helvetica Neue", Arial;
  font-weight: 200;
  background: #ccc;
}

.State {
  height: 50px;
  width: 50px;
  transition: all 500ms ease;
  border: 1px solid;
  margin: 10px;
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  background: #fff;
}

JavaScript 1.7

/** @jsx React.DOM */
//var React = require('react');  // ALREADY PRESENT
//var MagicMove = require('react-magic-move');
var MagicMove = ReactMagicMove;  // NAME AFTER RAW SCRIPT INCLUSION

var App = React.createClass({
  getInitialState: function() {
    return { order: 'alphabetical' };
  },

  sort: function(order) {
    if (order == 'alphabetical' && order == this.state.order)
      return;
    this.setState({order: order});
  },

  renderStates: function() {
    var states = this.state.order === 'random' ? shuffled() : alphabetical();
    return states.map(function(state) {
      return <div className="State" key={state.abbr}>{state.abbr}</div>;
    });
  },

  render: function() {
    return (
      <div>
        <h1>Magic Move</h1>
        <div>
          <button onClick={this.sort.bind(this, 'random')}>Random</button>
          <button onClick={this.sort.bind(this, 'alphabetical')}>Alphabetical</button>
        </div>

        <MagicMove>
          {this.renderStates()}
        </MagicMove>
      </div>
    );
  }
});

React.render(<App/>, document.getElementById('example'));

function shuffled() {
  return shuffle(getStates());
}

function alphabetical() {
  return sortBy(getStates(), 'name');
}

function getStates() {
  return [
    { abbr: "AL", name: "Alabama"},
    { abbr: "AK", name: "Alaska"},
    { abbr: "AZ", name: "Arizona"},
    { abbr: "AR", name: "Arkansas"},
    { abbr: "CA", name: "California"},
    { abbr: "CO", name: "Colorado"},
    { abbr: "CT", name: "Connecticut"},
    { abbr: "DE", name: "Delaware"},
    { abbr: "FL", name: "Florida"},
    { abbr: "GA", name: "Georgia"},
    { abbr: "HI", name: "Hawaii"},
    { abbr: "ID", name: "Idaho"},
    { abbr: "IL", name: "Illinois"},
    { abbr: "IN", name: "Indiana"},
    { abbr: "IA", name: "Iowa"},
    { abbr: "KS", name: "Kansas"},
    { abbr: "KY", name: "Kentucky"},
    { abbr: "LA", name: "Louisiana"},
    { abbr: "ME", name: "Maine"},
    { abbr: "MD", name: "Maryland"},
    { abbr:...