Reactの公式チュートリアルにある三目並べを作ってみました。

成果物はここにおいたので確認してみてください。

react-tic-tac-toe

環境

  • MacOS Sierra 10.12.3
  • Node.js v6.10.0
  • React 15.4.2
  • Create React App 1.3.0

1. プロジェクト作成

Create React Appを使ってReactのプロジェクトを作ります。

create-react-appが入ってない場合はyarnnpmでインストールすると便利です。

2. マスの作成

三目並べの各マスを表すSquareクラスを作ります。

Squareクラスは状態を持たないのでReact.Componentを継承するのではなくstateless functional componentsという関数でよいみたいです。

3. ボードの作成

次にボードを表すBoardクラスを作ります。

4. ゲームの作成

次にゲーム全体を表すGameクラスを作ります。

ここでは盤面の状態や手番、履歴の管理をします。

勝敗の判定はcalculateWinnerというヘルパーメソッドで行っています。

5. 最後に

エントリーポイントとなるindex.jsでゲーム盤のコンポーネントをレンダリングして、 あとはCSSなどを修正して終わりです。