<main></main>

textarea { 
  width: 100% ;
  border: 2px solid gray;   
}

table {
  margin-top: 20px;
  width: 100%;  
}

var WordCountTable = React.createClass({
  propTypes: {
    text: React.PropTypes.string,
  },

  calculateCounts (text) {
    const words = text.split(/\W+/).filter((w) => w.length > 0);
    return _.countBy(words);
  },  
  
  render () {
    const counts = this.calculateCounts(this.props.text);

    return <table>
      <thead>
        <tr>
          <th>Word</th>
          <th>Appearance Count</th>
        </tr>
      </thead>
      <tbody>
        {_.values(_.mapObject(counts, (val, key) => (
          <tr key={key}>
            <td>{key}</td>
            <td>{val}</td>
          </tr>
        )))}
      </tbody>
    </table>    
  }
});

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

  render: function() {
    return <div>
      <h2>Type stuff in the box</h2>
      <textarea 
        rows="5" 
        value={this.state.text} 
        onChange={(e) => this.setState({text: e.target.value})} ></textarea>
      
      <WordCountTable text={this.state.text} />
    </div>
  }
});

ReactDOM.render(<App />, document.querySelector('main'));