【React入門】Reactの基本！ コンポーネントについて

2025年6月25日React

React component

componentとは開発にあたって、一つ一つの機能を切り分けて使えるといった開発方法になります。

componentの種類

componentの種類は二種類あります。

  • クラスコンポーネント
  • 関数コンポーネント

近年ではクラスコンポーネントを使わずに、関数コンポーネントを使うことが多いですが、二種類のコンポーネントの使い方があるので、覚えておきましょう。

クラスコンポーネント

  • React.Componentを継承
  • ライフサイクルやstateを持つ
  • propsにはthisが必要
  • renderメソッド内でJSXまたはTSXをreturnする
import React from 'react';

class Hoge extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
              <p>{this.props.message}</p>
            </div>
        );
    }
}

export default Hoge;

関数コンポーネント

  • ES6のアロー関数で記述する
  • stateを持たない（stateless）
  • propsを引数に受け取る
  • JSXまたはTSXををreturnする
import React from 'react';

const Hoge = (props) => {
    return (
        <div>
            <p>{props.message}</p>
        </div>
    );
};

export default Hoge;

スポンサードサーチ

コンポーネントファイルを作る

コンポーネントを理解できれば、コンポーネント専用のファイルを作り、コンポーネントを集約しましょう。

components
┣ Hoge.tsx
┣ Foo.tsx
┣ index.tsx

export {default as Hoge} from './Hoge'
export {default as Foo} from './Foo'

components/index.tsxにコンポーネントを集約すればindex.tsxをファイルインポートすれば記述が楽になります。

import { Hoge, Foo } from '../components/index'

React

Posted by kami