Componentとは何か

Componentの概要

コンポーネント(Component)とは、部品です。 単一のWebページを考えてください。 そのWebページ、どんな構成になっていますか？

上から、

• ヘッダー（もしくはナビゲーションバー）
• メインコンテンツ(横にメニューがあったりなかったり)
• フッター

という構造におおよそなっていると思います。 では、この3つの構造を持ったWebページが複数連なるWebサイトがあったとしましょう。 ヘッダーとフッターは全ページで共通したものではありませんか？ それなら一度作ったものは使いまわしたくないですか？ 一度書いたHTMLはコンポーネントとして定義すれば、再利用することができるようになります。

それだけであれば、

• innerHTMLなどの関数
• 外部のツール

などを使えば代わりなんていくらでもあるでしょう。 しかしコンポーネントはそれだけのためにあるのではありません。 Reactのコンポーネントは関数として宣言するのが主流です。 関数は引数をとることができるため、コンポーネントも引数をとることができます。 例えば、

function IntroRes(name: string){
    return <p><My name is {name}</p>
}
 
function Index(){
    return (
        <>
            <IntroRes name={tiamat} />
        </>
    )
}

と記述すれば

My name is tiamat

と表示させることが出来ます。