質問: ### 前提・実現したいこと reactのチュートリアル(いいねボタン)を動かそうとしています。 https://qiita.com/SoarTec-lab/items/9b5f8663521d1d789922 このサイトを参考にしているのですが、 ``` create-react-app ``` コマンドで代替しようとするとうまくいきません。 下記のエラーが発生してしまいます。 エラーの意味を調べると、ES7からの文法である "::"を認識指定なさそうなのですが、 以下について教えていただけないでしょうか。 * create-react-appでES7は使えないのでしょうか * create-react-appはあくまでも簡易用のツールという扱いなのでしょうか。 ※ create-react-appのversionは、2.1.1です ### 発生している問題・エラーメッセージ ``` SyntaxError: /XX/src/index.js: Unexpected token (92:28) 90 | 91 | 92 | onMouseEnter={::this.onMouseEnter} | ^ 93 | onMouseLeave={::this.onMouseLeave} 94 | onClick={::this.onClick} > 95 | {this.state.liked ? "✔ " : "" }いいね! ``` ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: create-react-appはReactの生成環境(トランスパイラやバンドル生成関連ライブラリ)を自動的に準備してくれるものですので、簡易版、というわけではないですね。1から自分で環境を準備するのは、まぁまぁ大変です(笑) create-react-appで生成したプロジェクトのwebpack関連は、react-scriptsに収められています。 現状は、ES6までの対応のようです。 react-scriptsをejectすれば、調整をしてES7対応にすることも可能ですが、諸事情によりあまり好ましくないと思うので、ソースをES6に対応させる方が、現実的だと思います。 ::は、bindのシンタックスシュガーのようなので、 ``` onMouseEnter={this.onMouseEnter.bind(this)} または onMouseEnter={() => this.onMouseEnter()} ``` のように書き換えれば、対応できると思います。