#概要
今まで、５記事ほど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__となります！
#リファレンス