create-react-appでreactチュートリアル(いいねボタン)を動かしたい

Question

前提・実現したいこと

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 |       <span style={styles.container}>
  91 |         <span style={likeStyle}
> 92 |               onMouseEnter={::this.onMouseEnter}
     |                             ^
  93 |               onMouseLeave={::this.onMouseLeave}
  94 |               onClick={::this.onClick} >
  95 |           {this.state.liked ? "✔ " : "" }いいね!

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

create-react-appはReactの生成環境（トランスパイラやバンドル生成関連ライブラリ）を自動的に準備してくれるものですので、簡易版、というわけではないですね。１から自分で環境を準備するのは、まぁまぁ大変です（笑）

create-react-appで生成したプロジェクトのwebpack関連は、react-scriptsに収められています。
現状は、ES6までの対応のようです。

react-scriptsをejectすれば、調整をしてES7対応にすることも可能ですが、諸事情によりあまり好ましくないと思うので、ソースをES6に対応させる方が、現実的だと思います。

::は、bindのシンタックスシュガーのようなので、

onMouseEnter={this.onMouseEnter.bind(this)}
または
onMouseEnter={() => this.onMouseEnter()}

のように書き換えれば、対応できると思います。

Comments

[kooodai]

回答ありがとうございます。
create-react-appをどう使っていくべきか、わからなかったので助かりました。
チュートリアルは、教えて頂いたES6の記法に修正したら動作させることができました！