React Counter + Toggle

by Allie Yu

HTML

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>

<!-- ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

<!-- ReactRedux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      show: true
    };
  }

  IncrementItem = () => {
    this.setState({ count: this.state.count + 1 });
  }
  DecreaseItem = () => {
    this.setState({ count: this.state.count - 1 });
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
          <button onClick={this.DecreaseItem}>-</button>
          <button onClick={this.IncrementItem}>+</button>
          <button onClick={this.ToggleClick}>
            { this.state.show ? 'Hide number' : 'Show number' }
          </button>
          { this.state.show ? <h2>{ this.state.count }</h2> : '' }
      </div>
    );
  }
}

ReactDOM.render(<App /> , document.getElementById("root"))