Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

2章コンポーネントのライフサイクル

既製のDOMコンポーネントを使えるようになったので、次は自分でコンポーネントを作成してみましょう。

2.1　最低限の構成

コンポーネントを新規作成するには、次のようなAPIを使います。

var MyComponent = React.createClass({
  /* スペック */
});

スペックとはJavaScriptのオブジェクトです。render()という必須のメソッドと、その他の任意指定のメソッドやプロパティから構成されます。最低限のコードは以下のようになります。

var Component = React.createClass({
  render: function() {
    return React.DOM.span(null, "カスタムコンポーネント");
  }
});

必須なのはrender()メソッドを実装することだけです。このメソッドはReactのコンポーネントを返す必要があるため、上のコードでも単なる文字列ではなくspanが返されています。

このコンポーネントをアプリケーションの中で呼び出す方法は、DOMコンポーネントの場合と同様です。

ReactDOM.render(
  React.createElement(Component),
  document.getElementById("app")
);

ここまでのコードを実行すると、図2-1のように表示されます。

図2-1　カスタムコンポーネント