React入門

仕事で必要になったわけではないんですが、そろそろフロントエンドについても少しずつ勉強しておかないといけないな、
と感じていたので、会社の先輩とReact入門しました。
(React入門本を探しましたが目立ったものがないんですね。。。誰か書いてくれー。)

手始めに、公式チュートリアルを写経しました。
内容としては、3目並べを作るというものでReactの重要な要素である、PropsやState、コンポーネントなどが理解できる内容となってます。

写経していて気になったこととしては、

class Square extends React.Component {
  constructor(props) {
    super(props);  //ここ
    this.state = {
      value: null,
    };
  }

クラスのコンストラクタでsuperを呼び出している理由です。
調べてみたところ、以下の記事が詳しそうです。
なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ これによると、

JavaScriptではsuperは親クラスのコンストラクタを参照します。(この例では、親クラスはReact.Component実装を指しています。) 重要なのは、JavaScriptはあなたがコンストラクターで親のコンストラクターを呼ぶまでthisは使わせてくれません。

ということで、thisを使うためにsuperを呼び出す。
また、引数でpropsを渡す理由としては、

これはsuper(props)の代わりにsuper()と書けるということを意味してる？ 多分そうじゃない。まだ紛らわしい。 確かに、Reactはコンストラクターが実行されたあとにthis.propsを割り当てます。 でも、親とあなたのコンストラクターの実行が終わるまでの間、this.propsは未定義なのです。

つまり、コンストラクタ内でthis.propsを参照したい場合に必要ということみたいです。 (今回の場合、propsを渡す理由はないのでなくても良さそうですが、取り敢えず渡しておくものみたいです。 )

チュートリアルが終わったので次は、こちらを進めていく予定です。
まだ、始めたばかりで全然分かりませんが新しいことを知るのは楽しいですね。
入門に良い本やサイトがありましたら是非教えて下さい。