React Base Fiddle (non-JSX)

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/react-with-addons.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

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

var App = React.createClass({displayName: "App",
  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 React.createElement("div", {className: "State", key: state.abbr}, state.abbr);
    });
  },

  render: function() {
    return (
      React.createElement("div", null, 
        React.createElement("h1", null, "Magic Move"), 
        React.createElement("div", null, 
          React.createElement("button", {onClick: this.sort.bind(this, 'random')}, "Random"), 
          React.createElement("button", {onClick: this.sort.bind(this, 'alphabetical')}, "Alphabetical")
        ), 

        React.createElement(MagicMove, null, 
          this.renderStates()
        )
      )
    );
  }
});

React.render(React.createElement(App, null), 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:...