Edit in JSFiddle

class App extends React.Component {
  constructor(props) {
    super(props);

    // Must initialize state first
    this.state = { count: 0 };
  }

  handleClick() {
    // Increment the count when the button is clicked
    this.setState({
      count: this.state.count + 1
    }, function() {
      // setState is asynchronous! This function gets called
      // when it's finished.
      console.log("Job's done");
    });
  }

  render() {
    return (
      <div className="app">
        <div className="click-count">
          Button presses: {this.state.count}
        </div>
        <button onClick={this.handleClick.bind(this)}>
          Add One
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.app {
  border: 1px solid #979797;
  width: 163px;
  height: 109px;
  box-shadow: 0 2px 6px 0 rgba(34, 34, 34, .2);
  margin: 5px;
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
  font-size: 16px;
}

.app button {
  background-color: #FF625A;
  border: 1px solid #A34641;
  color: #fff;
  box-shadow: 0 0 4px 0 rgba(255,109,109,.5);
  font-size: 13px;
  margin-top: 20px;
}

.app button:active {
  background-color: #B3332D;
}

.app button:active, .app button:focus {
  outline: 0;
}

External resources loaded into this fiddle: