React and Team Tree House

I just invested several hours of time and ample mistake correction and produced an interactive scoreboard program using React.  Team Tree House is a stunning online education platform that offers a rich and diverse array of course offerings that span a wide range of topics related to computer programming. I seriously wish there was more time for learning!

The *.jsx code =

var PLAYERS = [
  {
    name: "Player 1",
    score: 0,
    id: 1,
  },
 
  {
    name: "Player 2",
    score: 0,
    id: 2,
  },
 

  {
    name: "Player 3",
    score: 0,
    id: 3,
  },
 
  {
    name: "Player 4",
    score: 0,
    id: 4,
  },
 
  {
    name: "Player 5",
    score: 0,
    id: 5,
  },
 
];

function Header(props) {
  return (
   <div className="header">
     <h1>{props.title}</h1>
   </div>
  );
}

Header.propTypes = {
  title: React.PropTypes.string.isRequired,
};
 
var Counter = React.createClass({
  propTypes: {
    initialScore: React.PropTypes.number.isRequired,
  },
 
  getInitialState: function() {
    return{
      score: this.props.initialScore,
    }
  },
 
  incrementScore: function(e) {
    this.setState({
      score: (this.state.score + 1),
    })
  },
 
  decrementScore: function() {
      this.setState({
        score: (this.state.score - 1),
      });
    },
 
  render: function() {
     return (
      <div className="counter">
        <button className="counter-action decrement" onClick={this.decrementScore}> - </button>
        <div className="counter-score"> {this.state.score} </div>
        <button className="counter-action increment"onClick={this.incrementScore}> + </button>
      </div>
    );
  }
}); 

 
 
function Player(props) {
  return (
    <div className="player">
        <div className="player-name">
          {props.name}
        </div>
        <div className="player-score">
          <Counter initialScore={props.score}/>
        </div>
      </div>
  );
}

Player.propTypes = {
  name: React.PropTypes.string.isRequired,
  score: React.PropTypes.number.isRequired,
};

function Application(props) {
  return (
    <div className="scoreboard">
      <Header title={props.title} />
   
      <div className="players">
        {props.players.map(function (player) {
          return <Player name={player.name} score={player.score} key={player.id} />
         })}
       </div>
     </div>
  );
}


Application.propTypes = {
  title: React.PropTypes.string,
  players: React.PropTypes.arrayOf(React.PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    score: React.PropTypes.number.isRequired,
    id: React.PropTypes.number.isRequired,
  })).isRequired,
};

Application.defaultProps = {
  title: "Scoreboard"
}
ReactDOM.render(<Application players={PLAYERS}/>, document.getElementById('container'));