ぬくぬくReact学習記(4)

ようやくチュートリアルも終わり。reactの特徴的な部分が少しずつつかめてきた感じ。次はReduxのチュートリアルをやってみる。
(1) http://qiita.com/zutcho/items/a66245d4d365f5d75103
(2) http://qiita.com/zutcho/items/1cf09405dbe0243b79cb
(3) http://qiita.com/zutcho/items/0b7d1cc1a7caf85b9032

本文で触っていない箇所

ソースコードの後ろの方に本文中で触っていない箇所があったので、少し見てみる。

• ReactDOM.renderで、Gameコンポーネントをdev#container内にrenderしている。
• winnerを計算するcalculateWinner関数は、マスの状況からwinnerを得るロジック部分。Reactの動きとは直接関係ない。

練習問題

以下のような練習問題が本文の最後についているので、やってみる。

go back in time then click in the board to create a new entry

ゲームを過去の時点にさかのぼって再開できるようにしなさい、ということだと思う。だいぶ英語は怪しいのだが、、

上の解釈が正しいとすると、GameコンポーネントのjumpToメソッドを以下のように変えれば良い。選択されたステップ以降のhistoryをsliceで削除している。

  jumpTo(step) {
    const history = this.state.history;
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) ? false : true,
      history: history.slice(0, step + 1),
    });
  }