リアクションプログラムはjscomplete.com/replでも問題なく動作しますが、ブラウザで実行すると同じコードで次のエラーが発生します

Question

jscomplete.com/replでリアクションプログラムがうまく動作しますが、同じコードを実行すると次のエラーが発生します私のブラウザでは、私のコードをエディタに書き、バベルを使っています。

babel-browser.min.js:41 Uncaught SyntaxError: http://localhost/react1/app.jsx: Unexpected token (2:14) 
    1 | class Button extends React.Component{ 
> 2 | handleClick =() => { 
    |    ^
    3 |  this.props.onClickFunction(this.props.incrementValue); 
    4 | } 
    5 | render() { 

Answer 1

そのコードで​​機能が

を使用すると、1つのプラグインでバベルを設定する必要があり、それを動作させるために（現在は第2段階では）まだJSの一部ではないクラスのインスタンスフィールドとして定義されています（たとえば、babel-preset-stage-2、または直接babel-plugin-transform-class-properties）。

また、クラス内の通常の関数定義を使用して、コンポーネントのコンストラクタ内のthisにバインドします。