React習得への道5

未分類

こんにちは！ジュンです！

今回も勉強したことをアウトプットしていきます。

今回はコンポーネントについてです。

コンポーネントとは

UIを再利用可能な部品として扱うための仕組み。

Reactでは、Webページ全体を1つのHTMLとして作るのではなく、画面の一部を部品として切り出したもの（コンポーネント）を組み合わせて画面を作る考え方をしている。

同じUIを使う箇所を1箇所記載し、呼び出すだけで同じものを使い回しができる。

1箇所記載したものを修正するだけで、そのコンポーネント使っているところが一括して修正できる。

コンポーネントとはHTMLと同じ、ツリー構造で管理されます。

最上位のコンポーネント（ルートコンポーネント）を起点として、さまざまなコンポーネントが親子関係で繋がっていく。

親子関係というのは、親の要素の中に子の要素があり、その子要素の中にさらに孫要素があるといったように続いていく関係。

例：

App(ルートコンポーネント)
├ Header
├ Main
│ └ Article
└ Footer

Reactがコンポーネントを呼び出すことをレンダーと言う。

関数コンポーネントとは、Reactのコンポーネントの種類である。

処理をまとめて再利用可能にする「関数」として定義するコンポーネント。

入力としてpropsを受け取り出力としてUIを返すイメージ。

Hooksが使え、今のReactの主流である。

例：

function Hello() {
return <h1>Hello React</h1>
}

関数の戻り値としてJSXを返さなければならない。

※proopsについてはReact習得への道6で紹介

※HooksについてはReact習得への道7で紹介