Tic Tac Toe by React.js

このサイトについて

私がVanilla JSで書いた◯×ゲームと同じものをReact.jsで実装してみました。 リンク

学んだこと

• Reactでのstate管理の基礎
• class component と functional componentの使い分け
  • class componentで基本的にはstateを扱い、子コンポーネントとなるfunctional componentにはpropsをバケツリレーのように渡してあげるだけ(hooks APIを使うのが最近だと一般的のようだが学習のステップとしてここでは用いないこととする)。
  • 子コンポーネントのfunctional componentでstateを書き換えたいときは、class componentで用意したstateを書き換える関数を子コンポーネントに渡してあげる。
  • lifecycle methodを使うことでコンポーネントの生成から死までの間で任意のタイミングで処理を行うことができる
  • setState()は非同期的にstateの更新を行うので、もしstateの更新直後に更新後の値としてstateを参照したいならsetState()の第二引数にコールバックを渡してあげるか、setStateの引数をコールバック関数にする(公式ドキュメント)。
• styled-componentsの基礎
  • グローバルなスタイル(SMACSSでいうところのbaseみたいなスタイル)はGlobalStyle.jsxみたいなコンポーネントを作成してプロジェクトの最上位で使用してあげる。
  • 基本的にclass componentやfunctionl componentの外側で定義する。