arrow function is not supported

[wulucxy]

const componentClassExample = `
class Counter extends React.Component {
  constructor() {
    super()
    this.state = { count: 0 }
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(state => ({ count: state.count + 1 }))
    }, 1000)
  }
 
  // it will throw an error out:
  // SyntaxError: Unexpected token (13:14)
  handleClick = () => {
    
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return (
      <center>
        <h3>
          {this.state.count}
        </h3>
        <button onClick={this.handleClick}>按钮</button>
      </center>
    )
  }
}
`.trim();

this.handleClick will throw an error out：

SyntaxError: Unexpected token (13:14)
9  :       this.setState(state => ({ count: state.count + 1 }))
10 :     }, 1000)
11 :   }
12 : 
13 :   handleClick = () => {
                   ^

[sofiapoh]

We use Buble to transform the code and it doesn't currently support class fields. Hopefully that will change soon! bublejs/buble#169

Meanwhile you can see this issue #67 for discussion on how to include babel transforms and that way you'll be able to use the class field syntax.