Reactのコンポーネントについて

はじめに

「これからはじめるReact実践入門」の「3章/スクール課題で言うと4.6章」で当初「なんとなく」しかわからなかった箇所をピックアップして自分なりに分かりやすく纏めてみます。

違ってたらすぐ教えてください！！笑
迅速に修正しますｗ
あと他の記事と内容被っててもアウトプットなので許してください、、
あと暖かい目で見てください、、（保険かけすぎｗｗ）

コンポーネントについて

コンポーネントとは、端的に言うと「部品」です。
「部品」の状態にしてコードの再利用や役割を明確化させることが大きなメリットです。
書籍のこの図が分かりやすい（これさえ読んどけば大体イメージつくｗ）。

ただ私がよくわからなかったのがコードで言うと、「どの状態がコンポーネントなの？」ということである。
「概念はわかるけど、実際には書けないし、どういう状態になればOKなの？」といったように具体的なイメージがわかない😭

そんな状況だったので、当時の自分がイメージつくように纏めてみます～
実際にスクール課題のReact実践_6章（記事一覧ページ、詳細ページ、問い合わせフォームの作成）を書いた場合、自分の完成図は下記（CSS変な所あっても許してください！ｗ）

記事一覧ページ

詳細ページ（記事一覧ページの記事をクリックしたら表示される）

問い合わせフォーム
（全ページのヘッダー右上の「お問い合わせ」をクリックしたら表示される）

上はコンポーネントで作成しておりまして、、コードはこんな感じ↓。
10.13-15行目がコンポーネントとして部品状態にしたコードです。
（つまり、最初のコンポーネントとは？の図解写真と同じような画面。）

このコンポーネントされた、例えば13行目の<Home /> は、別の「Home.jsxファイル」にコードを書いています。（私は下記のような感じで書きました！）

おわりに

上記で書いたように概念通りにそれぞれのファイルに分けて、画面表示のファイル（App.js）には「それぞれのファイル内で書いた定義」だけ書けば、あら不思議、良い感じにブラウザに表示されているんです！
どう？？すごくない？？Reactって便利だな～って思いません？？私は思いました笑

はい、次は分割代入について纏めていきます！
最後まで読んでいただき、ありがとうござました！