Reactチュートリアルをやっていってみるその10

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

手番の処理

今までXだけだったゲームに◯を追加します。
デフォルトではXを先手にします。
xIsNextは手番、すなわち現在操作可能なプレイヤーを示すものになります。

gyazo.com

handleClickにはクリックしたらXを設定するように現状はなっていますのでここを変更します。

gyazo.com

これでプレイヤーが操作をするとxIsNextの値が変更され、プレイヤーが切り替わるようになります。

gyazo.com

◯とXが表示されるようになりました。

gyazo.com

statusテキストも変更してどちらの番なのかわかるようにします。

gyazo.com

NextPlayerが表示されるようになりました。

gyazo.com

gyazo.com

今日はここまで。