the-road-to-learn-react/react-alternative-class-component-syntax

An alternative/future way of React Class Component with Class Field Declarations

react-alternative-class-component-syntax

React Class Components can be made much more concise using the class field declarations. You can initialize local state without using the constructor and declare class methods by using arrow functions without the extra need to bind them.

class Counter extends Component {
  state = { value: 0 };

  handleIncrement = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  handleDecrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}

        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    )
  }
}

Installation

• git clone git@github.com:the-road-to-learn-react/react-alternative-class-component-syntax.git
• cd react-alternative-class-component-syntax
• npm install
• npm start
• visit http://localhost:8080