この記事の目的

公式チュートリアルで三目並べを作ってもらうのが一番理解できるが、その中でも特に日本語で説明しておいたほうがよさそうなポイントを纏めている。
本資料を読んだ後に、チュートリアルを両方やってもらったほうがより理解が深まる。

関連するQiita記事

Reactのざっくり概要

参考資料

ドキュメント

公式ドキュメント

チュートリアル

公式チュートリアル

※余力があれば、以下のチュートリアルも行うことを推奨する
Getting Started with React - An Overview and Walkthrough Tutorial

Reactコンポーネントとは

ReactはUIを「コンポーネント」という部品単位で構築する。

1つのコンポーネントを描画する例

例えば、以下のような四角形のボタンを描画する場合を考える。

これをReactコンポーネントで定義すると、以下のようになる。（スタイルは省略している）

square.js

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

SquareというReactコンポーネントを定義しており、render関数で描画内容をreturnしている。

このときというHTMLタグをreturnしているように見えるが、これはJSX記法であり、以下のようにJSXを使わずにReact.createElementで記述した場合と等価である。

square.js

class Square extends React.Component {
  render() {
    return (
      React.createElement(
      'button',
      {className: 'square'}
      );
    );
  }
}

複数のコンポーネントを描画する例

上記のSquareを更に3×3のマス目でボタンを並べて描画する場合を考える。

これをReactコンポーネントで定義すると、以下のようになる。（スタイルは省略している）

board.js

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

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

新たに加わったBoardというReactコンポーネントは、Squareコンポーネントを9つ組み合わせて3×3のマス目を実現している。