index.html

<script src="http://fb.me/react-0.11.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

<div id="content"></div>

<script type="text/jsx">
/** @jsx React.DOM */

var Root = React.createClass({
  getInitialState: function() {
    return {sortOrder: 'firstName'}
  },
  render: function() {
    var orderedRecs = _.sortBy(this.props.scores, function(record) {
      return record[this.state.sortOrder];
    }.bind(this))
    console.log(orderedRecs);

    var rows = orderedRecs.map(function(score, index) {
      return <TestScore key={score.firstName + score.lastName}
                        firstName={score.firstName}
                        lastName={score.lastName}
                        testScore={score.testScore} />
    });
    return <div>
      <SortOrderChooser sortOrder={this.state.sortOrder}
                        changeSortOrderHandler={this.changeSortOrder} />
      <table>{rows}</table>
      <TestScoreInput addScoreHandler={this.props.addScore} />
    </div>;
  },
  changeSortOrder: function(order) {
    this.setState({sortOrder: order});
  }
});

var TestScore = React.createClass({
  render: function() {
    return <tr>
      <td>{this.props.firstName}</td>
      <td>{this.props.lastName}</td>
      <td>{this.props.testScore}</td>
    </tr>
  }
});

var TestScoreInput = React.createClass({
  render: function() {
    return <div>
      <input type="text" ref="firstName" placeholder="First" />
      <input type="text" ref="lastName" placeholder="Last" />
      <input type="text" ref="testScore" placeholder="100" />
      <button onClick={this.addScore}>Add</button>
    </div>;
  },
  addScore: function(e) {
    this.props.addScoreHandler(this.refs.firstName.getDOMNode().value,
        this.refs.lastName.getDOMNode().value,
        Number(this.refs.testScore.getDOMNode().value));
    this.refs.firstName.getDOMNode().value = '';
    this.refs.lastName.getDOMNode().value = '';
    this.refs.testScore.getDOMNode().value = '';
  }
});

var SortOrderChooser = React.createClass({
  changeSortOrder: function(val) {
    this.props.changeSortOrderHandler(val);
  },
  render: function() {
    var linkOrB = function(val, text) {
      if (val == this.props.sortOrder) {
        return <b>{text}</b>;
      } else {
        return <a href="#" onClick={function(){this.changeSortOrder(val)}.bind(this)}>{text}</a>;
      }
    }.bind(this);

    return <div>
      Sort order:<br/>
      {linkOrB('firstName', 'First Name')}<br/>
      {linkOrB('lastName', 'Last Name')}<br/>
      {linkOrB('testScore', 'Test Score')}
    </div>;
  }
});

var scores = [
  {firstName: "Dan", lastName: "Vanderkam", testScore: 100},
  {firstName: "Isaac", lastName: "Hodes", testScore: 90}
];

function addScore(firstName, lastName, testScore) {
  scores.push({firstName: firstName, lastName: lastName, testScore: testScore});
  reactRoot.setProps({scores: scores});
};

var reactRoot = React.renderComponent(<Root scores={scores} addScore={addScore} />, document.getElementById('content'));

</script>