An alternative/future way of React Class Component with Class Field Declarations
Clone or download
Latest commit 5da09b7 Nov 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist init Feb 5, 2018
src init Feb 5, 2018
.gitignore init Feb 5, 2018
.travis.yml init Feb 5, 2018
README.md Update README Nov 28, 2018
package-lock.json chore(package): update lockfile package-lock.json Oct 24, 2018
package.json chore(package): update dependencies Oct 24, 2018
webpack.config.js init Feb 5, 2018

README.md

react-alternative-class-component-syntax

Build Status Slack Greenkeeper badge

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