React2 - 13note.

WEBDBPressの奴が意外と高度なところから始まっていたため、本家チュートリアルからもう一度

VisualStudioでの利用時コンパイルしてくれるjsを入れる方法で対応（brouser.min.js)ただこれ、本当に大丈夫なのかな？という情報も見かけた気がする…
以下日本語訳されているサイト

mae.chab.in

作るものは所謂丸罰ゲームみたいなもの。
作るコンポーネントは
Game（全ての親コンポーネント）
Board（ゲーム板の意味？こまそれぞれの親コンポーネント）
Squea（コマそれぞれのコンポーネントで、最下層）

初期状態

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

React.Component の継承
render()内でreturnする内容(JSX)が最終的な出力値になる？

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }
  render() {
    const status = 'Next player: X';
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
(中略）

renderSquare()は関数、Board関数自身のrenderの中で『｛this.renderSquare(0)}』により呼び出している

ReactDOM.render(
  <Game />,
  document.getElementById('container')
);

終わりに書く関数？と思われる…全ての処理のまとめのような。親コンポーネントを指定の要素の中に出力する。

propsを使って値を出力する

this.propsは自身に渡された要素のようなもの？ BoradクラスのrenderSquareの内部で、Squareクラスを出力している箇所を修正する。

renderSquare(i) {
    return <Square value={i}  />;
  }

Squareのrenderを修正する。

 render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }

Squareを出力するrenderSquareでの定義でvalueとして値を与えると、Square自身のプロパティとしてthis.props.valueで参照できる。値の名称はvalueに限らず定義が可能。これで、BoradクラスからSquareクラスへの(親→子への)値の渡し方が分かる。

renderSquareはBoardクラスのrender内でインクリメント(埋め込み）されたiを渡されるため、この段階の出力は9マスに左上から0～8の値が出力された状態になる。

コンストラクターとthis.state

コンストラクタの設定と、this.stateを用いた状態の変更の説明として一時的にSquareを修正する。

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

constructorは他言語と同じで初期化処理。 superは必ず行う。 this.stateは自身の持つプロパティのような、状態のようなもの？

以下のようにrenderを書き換え

 render() {
    return (
     <button className="square" onClick={() => this.setState({value: 'X'})}>
       {this.state.value}
     </button>
    );
  }

Squareコンポーネントに出力されるbuttonのonClickイベントに、『this.setState({value:‘X’})』とすることで、自身の持つvalueの値がボタンクリックイベントによりXに更新される状態になる。このとき、まだ情報はSquareコンポーネントだけが自身のvalueにのみ持っている状態になっている。

これを、「×が出力された次は○を出力する」と言うようにする場合、さらには、○の数と×の数を計上して勝敗を判定するには、 Squareの親要素であるBoardがSquareの状態を知っている必要が有る。

複数の子コンポーネントからデータを集めたい時や、2つの子コンポーネント同士でやりとりを行わせたい時は、状態（state）を親コンポーネントまで渡すようにします。親コンポーネントはその後、状態（state）をpropsを通して子コンポーネントに渡します。そのため子コンポーネントは常に互いに同期するようになっています。また同様に親コンポーネントとも同期するようになっています。

ちょっとこの辺りが理解しきれない…。