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;harmony=true">
/** @jsx React.DOM */

var Root = React.createClass({
  getInitialState: function() {
    return {
      scores: [
        {firstName: "Dan", lastName: "Vanderkam", testScore: 100},
        {firstName: "Isaac", lastName: "Hodes", testScore: 110}
      ],
      sortBy: 'firstName'
    };
  },

  addScore: function(firstName, lastName, testScore) {
    var scores = this.state.scores;
    scores.push({firstName: firstName, lastName: lastName, testScore: testScore});
    this.setState({scores: scores});
  },

  changeSortBy: function(sortBy) {
    this.setState({sortBy: sortBy});
  },

  render: function() {
    var orderedScores = _.sortBy(this.state.scores, (record) => record[this.state.sortBy]);

    var rows = orderedScores.map(function(score) {
      return <TestScore key={score.firstName + score.lastName}
                        firstName={score.firstName}
                        lastName={score.lastName}
                        testScore={score.testScore} />
    });
    return <div>
      <SortOrderChooser sortBy={this.state.sortBy}
                        changeSortByHandler={this.changeSortBy} />
      <hr/>
      <table><tbody>
        {rows}
      </tbody></table>
      <TestScoreInput addScoreYYY={this.addScore} />
    </div>;
  }
});

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({
  onClick: function(e) {
    this.props.addScoreYYY(
      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 = '';
  },
  render: function() {
    return <div>
      <input type="text" ref="firstName" placeholder="First Name" />
      <input type="text" ref="lastName" placeholder="Last Name" />
      <input type="text" ref="testScore" placeholder="100" />
      <button onClick={this.onClick}>Add</button>
    </div>;
  }
});

var SortOrderChooser = React.createClass({
  changeSortBy: function(e) {
    this.props.changeSortByHandler(e.target.getAttribute('data-val'));
    e.preventDefault();
  },
  render: function() {
    var linkOrB = function(val, text) {
      if (val == this.props.sortBy) {
        return <b>{text}</b>;
      } else {
        return <a href="#" data-val={val} onClick={this.changeSortBy}>{text}</a>;
      }
    }.bind(this);

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

React.renderComponent(<Root />, document.getElementById('content'));

</script>