Open a-pompom opened 5 months ago
Reactにおけるコンポーネントの役割を理解し、最初のコンポーネントを作成するのがゴール。
HTML, CSS, JSで分割されていた機能をコンポーネントという1つの形にまとめる。 機能が一か所にまとまることで、再利用しやすくなり、かつ保守しやすくなる。
コンポーネントの組み合わせでページやアプリケーションを構築していけば、フロントエンド開発をさらに効率化できるはず。
Reactのコンポーネントはマークアップで構成されるJavaScriptの関数。
Reactがexport default
でexportしている理由はなんだろう。
→PHPのクラスみたいに1ファイル1コンポーネントであることを強制するためなのかな。
コンポーネントを()
で囲むのは境界を分かりやすくするためかな。
コンポーネントは、ほかのコンポーネントからも参照できる。 コンポーネントを組み合わせることでアプリケーションを構築することを示す第一歩みたいな感じ。
ReactコンポーネントはJavaScriptの関数なので、ブラウザには描画結果であるHTMLが表示される。
コンポーネントを再利用する最初の一歩として、コンポーネントをファイルに分けてみる。 複数ファイルに分割したコンポーネントをどうやって連携させるのか理解するのがゴール。
https://react.dev/learn/importing-and-exporting-components
画面描画のエントリーポイントになるコンポーネントをroot componentと呼ぶ。
機能を表現するコンポーネントを作成し、export。 参照する箇所でimportすることで、1ファイルで管理していたのと同じ感触でコンポーネントを構成できそう。
1ファイル1コンポーネントの構成であれば、default exportsを使うのが良いらしい。 ただ、リファクタリングのことを考えると、named exportsの方が好みな気がする。
default/named exportsが混在していると、やっぱり分かりにくく感じる。 どちらか1つに統一したい。
Reactがなぜマークアップとロジックを混ぜる設計を採用したのか知る。 JSXの基本を知るのが目標。
https://react.dev/learn/writing-markup-with-jsx
Webアプリケーションが複雑になってくると、JavaScriptでHTMLを生成・更新するようになる。 つまり、JavaScriptがマークアップに侵食していた。
それなら機能単位でまとめられた方が見やすいという発想から、コンポーネントへとつながる。 コンポーネントからマークアップを組み立てるのを補助するために、拡張記法としてJSXが生まれた。
JSXはHTMLと一対一で対応しているわけではない。 いくつか異なるルールがあるので、知っておかなければならない。
JSXは最終的にJavaScriptのオブジェクトに変換される。 つまり、関数は1つの値しか返せないので、複数のJSXを返すことはできない。
JSXで動的な値や文字列を埋め込む方法を理解するのが目標。
https://react.dev/learn/javascript-in-jsx-with-curly-braces
コンポーネントに属性を渡す方法として、クォート、{}
を紹介。
{}
がJavaScriptとの橋渡しの役割を持つことだけ覚えておけばよい。
{}
はテキスト・属性でだけ指定できる。
{}
の中でオブジェクトを記述する場合、{}
が連続することになる。
最初は違和感があるが、慣れたらルールに従った記法であることが分かる。
style属性にはオブジェクトを渡さなければならないのは、よく忘れるので覚えておく。
オブジェクトの値をJSXに埋め込む。 渡す値がオブジェクトであった場合も、適用されるルールは同じ。
propsをコンポーネントで受け渡しする方法を知るのが目標。 https://react.dev/learn/passing-props-to-a-component
https://react.dev/learn/describing-the-ui 読む。
コンポーネント作成の基本を学ぶのがゴール。