How to create a React component with ES6

Let’s keep going with ReactJS. Must say I’m getting addicted :)

Recently I started a small project and I wanted to use ReactJS and ES6 (EcmaScript 2015 6th Edition)

Turned out that creating a component is a little bit different. Let me show you a commented skeleton for a component in ES6:

//Your component inherits from React.Component
export class Counter extends React.Component {
  //In ES6, getInitialState() is gone
  //You need to use the constructor and init your property 'state' inside
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
//propTypes and defaultProps are now declared as properties on the constructor instead of directly inside the class body.

//This is how you declare the props for your component
Counter.propTypes = { initialCount: React.PropTypes.number };
//And how you give them a default value
Counter.defaultProps = { initialCount: 0 };

This example comes directly from the official ReactJS documentation that I highly recommend.