React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://rawgit.com/arqex/react-json-table/master/build/react-json-table.min.js"></script>
<script src="https://wzrd.in/standalone/superagent@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
</div>

CSS

table {
  border-spacing: 0;
}

body {
  margin: 40px auto;
  max-width: 752px;
  line-height: 1.6;
  font-size: 18px;
  color: #444;
  padding: 0 10px
}


.jsonOdd {
  background: #eee;
}

.jsonColumn {
  padding: 0px 50px 0px 0px;
}

JavaScript 1.7

class NflScores extends React.Component {	
	constructor () {
  	super();
    this.state = { games: null };
  }
  
  componentDidMount () {
  	this.getScores().then(data => {
			const self = this;
    	this.setState({games: self.transform(data.body)});
    });
  }
  
  transform (data) {
    return _.chain(data)
      .map((game, dateid) => {
        const isLive = game.clock ? !game.qtr
          .match(/final/i) : false;
        const quarter = game.qtr ?  _.truncate(_.capitalize(game.qtr), 
        	{length: 11}) : '-';
        const date = moment(_.take(dateid, 8).join('')).format('MM/DD/YY');
        return { 
          date: date,
					home: game.home.abbr,
          homeScore: game.home.score.T,
          away: game.away.abbr,
          awayScore: game.away.score.T,
          quarter: quarter,
          clock: isLive ? game.clock : '-'
        };
      })
      .value();
  }
  
  columns () {
    return [
    		{key: 'date', label: 'Date'},
        {key: 'home', label: 'Home'},
        {key: 'homeScore', label: 'Pts'},
        {key: 'away', label: 'Away'},
        {key: 'awayScore', label: 'Pts'},
        {key: 'quarter', label: 'Quarter'},
        {key: 'clock', label: 'Time', cell: (obj, key) => {
            return <span>{ obj[key] }</span>;
        }}
    ];
  }

  getScores () {
    const callback = (resolve, reject) => {
      return (err, res) => err ? reject(err) : resolve(res);
    };
    return new Promise((resolve, reject) => {
      superagent.get('https://lowrey.me/-/nfl/scores')
        .end(callback(resolve, reject));
    });
  }

  render () {
    if (this.state.games !== null) {
      return <JsonTable rows={this.state.games} columns={this.columns()} />;
    }
    return <div>Loading...</div>;
  }
}

ReactDOM.render(
  <NflScores />,
  document.getElementById('container')
);