pt.2-React/counter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- tady -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom-server.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- tady -->

</head>
<body>
  <div id="app"></div>
</body>
<script type="text/babel" data-presets="es2015,stage-0,react">
(function()  {
const project = {
  id: 123,
  name: 'My Project'
}

class Counter extends React.Component {
  state = {
    count: this.props.count,
  }

  componentDidMount() {
    store.addEventListner('change', this._handleChange)
  }

  _handleChange = () => {
    this.setState({
      project: store.getProjectById(this.props.projectId)
    })
  }

  static defaultProps = {
    count: 1111
  }

  handleClick = () => {
    this.setState({
      count: (this.state.count || this.props.count) + 1,
    })
  }

  render() {
    return (
      <div>
        <button className="btn btn-success"
        onClick={this.handleClick}
        >{`You clicked: ${this.state.count || this.props.count } times`}</button>
      </div>
    )
  }
}


ReactDOM.render(<Counter projectId={33}/>, document.getElementById('app'))
})()
</script>

</html>