React のコンポーネント

コンポーネントは UI の一部分となるビュー (View) を切り出したものです。

しかし単に UI を切り出すだけでなく、コードも含むこともできて、プログラムとして再利用できます。

単純なコンポーネントは次のように、React.Component から派生したクラスとして作成し、 render メソッドでビューとなる JSX を返します。

React コンポーネントは ECMAScript 2015 (ES6) のクラスの書き方では、次のようにかけます。

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hi!</h1>;
  }
}

export default Greeting;

ちなみに、先頭の import ラインで次のように Component メンバーまでインポートすれば、 extends を次のように Component と記述できます。

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hi!</h1>;
  }
}

export default Greeting;

私としては React のコンポーネントであることがわかりやすいので、前者のように React.Component と書いた方が良いと思ってますが、 どちらでも構いません。

import React, { Component } from 'react';

export default class Greeting extends Component {
  render() {
    return <h1>Hi!</h1>;
  }
}

さて、上では Greeting という名前のコンポーネントを作成しました。

このコンポーネントをどのように使えば良いでしょうか。

コンポーネントを使うのはとても簡単です。

次のように、コンポーネントはタグとして記述できます。

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(
  <Greeting/>,
  document.getElementById('root')
);

このように React のコンポーメントは作るのも、使うのも簡単です。