コンポーネントとは？
ReactではJavaScriptの中でHTMLを書くことができ、
ボタンやヘッダー、フッターなど、画面の部品単位でパーツを作れる
これがコンポーネントになる
コンポーネント化することのメリット
-
再利用性の向上 → コードの部品化
-
可読性の向上 → 見通しよくなる
-
疎結合 → 保守性・テスト性UP
補足：結合度とは？
「結合度」とは、モジュールやコンポーネント同士の依存関係の強さを表す
結合度が高い → あるコンポーネントを直すと、別のコンポーネントまで壊れる可能性がある
結合度が低い（疎結合） → それぞれが独立して動くから、修正やテストがしやすい
コンポーネントの定義
関数コンポーネント
function Welcome(){
return <h1> Hello </h1>
}
アロー関数Ver
const Welcome = () => {
return <h1>Hello</h1>;
}
JavaScriptの中にHTMLで書く方法を jsx と言います
→ コンポーネントはJSXを返す
コンポーネントの呼び出し方
< Welcome />
JSXを複数行で書くときの注意点
JSXが複数行になる場合は、()で囲む
JSには自動セミコロン挿入というクセがあるため
return
<div>Hello</div>
JSエンジン的には
return; // ← ここで終わった扱いになる
<div>Hello</div>;
そのため () で囲んであげて
return の続きだとエンジンに理解させてあげる