Reactチュートリアルをやっていってみるその7
これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル：React の導入
Developer Tools
ブラウザの開発ツールでReactのコンポーネントツリーを表示させるために以下のツールを導入すると良い。
※chrome用のリンク
chrome.google.com
CodePenを使う場合はDebug modeを利用して行うため、手順が異なる点注意。
ゲームを完成させる
現在の状態ではXだけが置かれる状態なので、OとXが交互に置かれるようにしていく。
stateのリフトアップ
Boardが各Squareに現時点のstateがどうなっているか問い合わせるだけで可能だが、
リファクタリングしにくく、コードも分かりにくいものになるのでよろしくない。
ベストな選択はゲームの状態を各Squareに持たせるのではなく、親のBoardコンポーネントで保持する。
Board側はSquareにpropsを渡すことで表示するべきものが判断できる。
Boardコンポーネントにコンストラクタを追加し、マスにnullをセットするよう追加。
gyazo.com
renderSquareが渡された値を読めるように修正。
gyazo.com
これで仕組みとしてはX,0,nullの値を受け取るようになった。
BoardからSquareにイベント通知をしてSquareに関数を呼んでもらうようにする。
handleClickを定義していく
この変更でBoardコンポーネントが制御されたコンポーネントとなり、
BoardコンポーネントがSquareコンポーネントを全面的に制御するようになっている。
handleClickでは.slice()を呼んで配列のコピーを作成している。
今日はここまで。
