Reactを初めて触ってみました(tutorialその③) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 さて前回ではサンプルからそれてコンポーネントクラスとレンダリング、htmlの理解を自分なりにしましたがサンプルコードへ戻ることにします。 サンプルコードは③つのコンポーネントを持っています。 Square（四角単一のボタンをレンダリング） Board（9つの四角をレンダリング） Game（プレースホルダをボードにレンダリング※後で説明するよとのこと） まずboardコンポーネントからsquareコンポーネントに値propを渡すようにコードを変更していきます。 構成を見て理解していくと Gameコンポーネントクラスで <div className="game-board"> <Board /> </div> となっており<Board />となってることでBoardコンポーネント要素をレンダリングしているということだと思います。 Boardコンポーネントで<div className="board-row"></div>がありここで一つの四角をレンダリングしているrenderSquareメソッドがあります。 renderSquareメソッドは<Square />の記述によりSquareコンポーネント要素をレンダリングしているということになり９つの四角が形成されているというわけですね。 次にSquareのrenderメソッドを変更して、{/ * TODO * /}を{this.props.value}に置き換えてその値を表示してみましょう。 ということでBoradコンポーネントで一つの四角をレンダリングしているメソッド this.renderSquare(0) これの引数をSquareコンポーネントのvalueにセットします renderSquare(i) { return <Square value={i} />;
