React Counter

by Allie Yu

HTML

<div id="app"></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

/*
 * A simple React component
 */

class App extends React.Component {
  state = { count: 0 };

/*   increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  
  decrement = () => {
    this.setState({
      count: this.state.count - 1
    });
  }; */
  
  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }
  
  decrement = () => {
    this.setState((prevState) => ({ count: prevState.count - 1 }));
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.state.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    );
  }
}


/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App />, document.getElementById('app'));