「React入門」の前回はJSXについて解説を行いました。今回はReactのコンポーネントについて解説をおこないます。

Reactは作成したいUIを大きなコンポーネント(部品)として扱い、大きなコンポーネントは小さなコンポーネントの組み合わせで作成します。

例えば前回作成したJSXのパーツがあります。

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <h2>texttext
  </div>
  ,document.getElementById('app')
);

これをコンポーネントとして作成してから描画するように変更してみましょう。

コンポーネントの作成

createClass

コンポーネントはReact.createClassのrenderメソッドで作成でき、一度作成したコンポーネントはJSX内ではHTMLタグのように利用できます。
以下はMyComponentコンポーネントを作成して描画するためのコードです。

//コンポーネントの作成
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
         <h1>Hello, world!</h1>
         <h2>texttext</h2>
      </div>
    )
  }
});
//コンポーネントの描画
ReactDOM.render(
  <mycomponent />,
  document.getElementById('app')
);

Class Component

React.createClass以外にもES2015のclass構文「React.Component」を利用してコンポーネントを作成することもできます。

//コンポーネントの作成
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>texttext
      </div>
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  <mycomponent />,
  document.getElementById('app')
);

React.ComponentはES2015で定義されたClass構文を用いているためブラウザによっては動作しないこともあります。Babelの設定の際にES2015をプリセットとしてコンパイルできるようにしておけばモダンブラウザでは問題なく動作いたします。

Function Component

更にfunction構文でもコンポーネントが作成できます。これはFunction Component(Stateless Function Component)と呼ばれReact.Componentで作成したコンポーネントと比較するとライフサイクルメソッド(後ほど解説)などの一部の機能が簡略化されたコンポーネントです。

//コンポーネントの作成
function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>texttext
    </div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <mycomponent />,
  document.getElementById('app')
);

コンポーネント作成時には基本的にはFunction Componentで作成を行い、ライフサイクルメソッドなどが必要な場合にはReact.Componentを利用して作成を行います。

コンポーネントを組み合わせる

コンポーネントは細かく定義して組み合わせることが可能です。次のサンプルではh1要素をMyH1コンポーネント、h2要素をMyH2コンポーネントして作成し、組み合わせたMyComponentコンポーネントを描画するようにしています。

//コンポーネントの作成
function MyH1() {
  return (
    <h1>Hello, world!</h1>
  )
}
function MyH2() {
  return (
    <h2>texttext</h2>
  )
}
function MyComponent() {
  return (
    <div>
      <myh1 />
      <myh2 />
    </div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <mycomponent />,
  document.getElementById('app')
);

このようにReactではHTMLのパーツをコンポーネント単位で管理し組み合わせてUIの作成を行います。

次回はPropsについて解説を行います。