#概要
今まで、５記事ほどReactについてまとめて参りましたが、今回はもう一歩踏み込んでReactの__Component__についてご説明したいと思います。Reactを使う上では欠かせない__Component__とはどういったものなのか...それでは参りましょう！

前回までの記事

#Reactにおける__Component__とは

Component__を一言で表すと『再利用可能なUI部品』__となります。
そしてこの__Component__には

1. Class Component
2. Functional Component

の2つの種類が存在します。

#Class Component
Class定義によって作成するComponentのことを__Class Component__と言います。実際のコードを見てみましょう！

App.js

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <label htmlFor="pig">pig</label>
        <input
          type="text"
          onChange={() => {
            console.log('I love micropig');
          }}
        />
      </React.Fragment>
    );
  }
}

export default App;

このApp.jsではclass AppがComponentを継承して存在しています。このAppのことを__Class Component__と呼びます。
#Functional Component
一方で、関数の定義によって作成するComponentのことを__Functional Component__と言います。実際のコードを見てみましょう！

App.js

from 'react';

const App = () => {
  return (
    <div>
      <Pig />
      <Pig />
      <Pig />
    </div>
  );
};

const Pig = () => {
  return <div>oink oink</div>;
};

export default App;

このコード中のAppとPigが__Functional Component__となります！

#リファレンス

最近のフロントエンドのコンポーネント設計に立ち向かう
理解しておきたいコンポーネント指向
React.jsで社内システムを作る（Reactコンポーネント編）
React の Class Component と Functional Component の書き方