Semantic-ui-react: fix(Menu): SyntaxError:Unexpected token(6:8)

[yeongjet]

import React, { Component } from 'react'
import { Menu, Button } from 'semantic-ui-react'

export default class TopBar extends Component {

  state = { activeItem: 'Home' }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state
    return (
        <Menu pointing secondary>
          <Menu.Item name='Home' active={this.state === 'Home'} onClick={this.handleItemClick} />
          <Menu.Item name='Projects' active={this.state === 'Projects'} onClick={this.handleItemClick} />
          <Menu.Item name='Tutorials' active={this.state === 'Tutorials'} onClick={this.handleItemClick} />
          <Menu.Menu position='right'>
            <Menu.Item name='logout' active={this.state === 'logout'} onClick={this.handleItemClick} />
          </Menu.Menu>
        </Menu>
    )
  }
}

Steps to Reproduce
I tried to run the example codes but it reported the SyntaxError: Unexpected token(6:8) ,it seems that we can't declare variables in the class.

Expected
It should be passed

Result
The Menu does not do this

Testcase
The docs show the issue: http://react.semantic-ui.com/collections/menu
Fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX

[yeongjet]

I sovled it.
Install the babel plugin:npm install babel-plugin-transform-class-properties,
and add line to the .babelrc file:"plugins": ["transform-class-properties"]
Link:http://babeljs.io/docs/plugins/transform-class-properties/

[levithomason]

Thanks for the report. There've been a few people asking for a Webpack setup guide. If we add one, this will come in handy.