React とは

React はユーザインターフェースを構築するための JavaScript ライブラリ。UI を『コンポーネント』と呼ばれる小さく独立した単位で組み立てることができる。

コンポーネントとは

コンポーネントは、React に何を描画したいかを伝え、データが更新されると React は再レンダーを行う。

コンポーネントは props(properties の略)と呼ばれるパラメータを受け取って、render メソッドで表示するビューの階層構造を返す:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

render メソッドが返すのは、画面上に表示したい内容の説明書きで、React はその内容を画面に表示する。

具体的には、render メソッドは『描画すべきものの軽量な記述形式』の React 要素*1を返す。

上記構造を簡単に記述するために "JSX" 構文と呼ばれるものがある。"JSX" を用いると上記コードは次のようになる：

return React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement("h1" /* ... h1 children ... */),
  React.createElement("ul" /* ... ul children ... */)
);

React の名付けの慣習

項目	命名
イベントを表す `props`	on[Event]
イベントを処理するメソッド	handle[Event]

関数コンポーネント

関数コンポーネントは、render メソッドだけを有して、自分の state を持たないコンポーネントをシンプルに書くための方法。クラスよりも書くのが楽な点がメリット。

コードは次のようにかける：

// 関数コンポーネントを使わない場合
class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={()=> this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

// 関数コンポーネントを使う場合
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}