material-ui 예기치 않은 토큰 오류

Question

react-slingshot을 내베이스로 사용하여 reactjs 웹 응용 프로그램을 만듭니다. 모든 것이 잘 작동했습니다. 나는 그 다음에`npm '을 통해 material-ui을 추가했다. 나는 appbar와 몇 개의 버튼을 추가했다. 그리고 모든 것이 좋게 보였다.

material-ui의 웹 사이트에서 예제를 사용하여 을 추가하려고 시도했으며 다음 오류가 발생했습니다 : "Unexpected token =". 이후 첫 번째 =에서 오는 것입니다. 무슨 일이 일어나고 있는지

import React from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import Popover from 'material-ui/Popover'; 
import Menu from 'material-ui/Menu'; 
import MenuItem from 'material-ui/MenuItem'; 

export default class PopoverExampleSimple extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     open: false, 
    }; 
    } 

    handleTouchTap = (event) => { 
    // This prevents ghost click. 
    event.preventDefault(); 

    this.setState({ 
     open: true, 
     anchorEl: event.currentTarget, 
    }); 
    }; 

    handleRequestClose =() => { 
    this.setState({ 
     open: false, 
    }); 
    }; 

    render() { 
    return (
     <div> 
     <RaisedButton 
      onTouchTap={this.handleTouchTap} 
      label="Click me" 
     /> 
     <Popover 
      open={this.state.open} 
      anchorEl={this.state.anchorEl} 
      anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} 
      targetOrigin={{horizontal: 'left', vertical: 'top'}} 
      onRequestClose={this.handleRequestClose} 
     > 
      <Menu> 
      <MenuItem primaryText="Refresh" /> 
      <MenuItem primaryText="Help &amp; feedback" /> 
      <MenuItem primaryText="Settings" /> 
      <MenuItem primaryText="Sign out" /> 
      </Menu> 
     </Popover> 
     </div> 
    ); 
    } 
} 

어떤 생각 : 여기

은 예제 코드?

Answer 1

handleTouchTap = (event) => { 
    ... 
}; 

클래스 속성 (http://babeljs.io/docs/plugins/transform-class-properties/)은 기본적으로 지원되지 않습니다. 당신은 babel-preset-stage-1

npm install --save-dev babel-preset-stage-1

// .babelrc 
{ 
    "presets": ["react", "es2015", "stage-1"], 
}