ReactドキュメントのDescribing the UIを読みたい

[a-pompom]

https://react.dev/learn/describing-the-ui 読む。

コンポーネント作成の基本を学ぶのがゴール。

[a-pompom]

Your first component

Reactにおけるコンポーネントの役割を理解し、最初のコンポーネントを作成するのがゴール。

Components: UI building blocks

HTML, CSS, JSで分割されていた機能をコンポーネントという1つの形にまとめる。 機能が一か所にまとまることで、再利用しやすくなり、かつ保守しやすくなる。

コンポーネントの組み合わせでページやアプリケーションを構築していけば、フロントエンド開発をさらに効率化できるはず。

Defining a component

Reactのコンポーネントはマークアップで構成されるJavaScriptの関数。

Reactがexport defaultでexportしている理由はなんだろう。 →PHPのクラスみたいに1ファイル1コンポーネントであることを強制するためなのかな。

コンポーネントを()で囲むのは境界を分かりやすくするためかな。

Using a component

コンポーネントは、ほかのコンポーネントからも参照できる。 コンポーネントを組み合わせることでアプリケーションを構築することを示す第一歩みたいな感じ。

What the browser sees

ReactコンポーネントはJavaScriptの関数なので、ブラウザには描画結果であるHTMLが表示される。

[a-pompom]

Importing and Exporting Components

コンポーネントを再利用する最初の一歩として、コンポーネントをファイルに分けてみる。 複数ファイルに分割したコンポーネントをどうやって連携させるのか理解するのがゴール。

https://react.dev/learn/importing-and-exporting-components

The root component file

画面描画のエントリーポイントになるコンポーネントをroot componentと呼ぶ。

Exporting and importing a component

機能を表現するコンポーネントを作成し、export。 参照する箇所でimportすることで、1ファイルで管理していたのと同じ感触でコンポーネントを構成できそう。

Default vs named exports

1ファイル1コンポーネントの構成であれば、default exportsを使うのが良いらしい。 ただ、リファクタリングのことを考えると、named exportsの方が好みな気がする。

Exporting and importing multiple components from the same file

default/named exportsが混在していると、やっぱり分かりにくく感じる。 どちらか1つに統一したい。

[a-pompom]

Writing Markup with JSX

Reactがなぜマークアップとロジックを混ぜる設計を採用したのか知る。 JSXの基本を知るのが目標。

https://react.dev/learn/writing-markup-with-jsx

JSX: Putting markup into JavaScript

Webアプリケーションが複雑になってくると、JavaScriptでHTMLを生成・更新するようになる。 つまり、JavaScriptがマークアップに侵食していた。

それなら機能単位でまとめられた方が見やすいという発想から、コンポーネントへとつながる。 コンポーネントからマークアップを組み立てるのを補助するために、拡張記法としてJSXが生まれた。

Converting HTML to JSX

JSXはHTMLと一対一で対応しているわけではない。 いくつか異なるルールがあるので、知っておかなければならない。

The Rules of JSX

JSXは最終的にJavaScriptのオブジェクトに変換される。 つまり、関数は1つの値しか返せないので、複数のJSXを返すことはできない。

[a-pompom]

JavaScript in JSX with Curly Braces

JSXで動的な値や文字列を埋め込む方法を理解するのが目標。

https://react.dev/learn/javascript-in-jsx-with-curly-braces

Passing strings with quotes

コンポーネントに属性を渡す方法として、クォート、{}を紹介。 {}がJavaScriptとの橋渡しの役割を持つことだけ覚えておけばよい。

Using curly braces: A window into the JavaScript world

{}はテキスト・属性でだけ指定できる。

Using “double curlies”: CSS and other objects in JSX

{}の中でオブジェクトを記述する場合、{}が連続することになる。 最初は違和感があるが、慣れたらルールに従った記法であることが分かる。

style属性にはオブジェクトを渡さなければならないのは、よく忘れるので覚えておく。

More fun with JavaScript objects and curly braces

オブジェクトの値をJSXに埋め込む。 渡す値がオブジェクトであった場合も、適用されるルールは同じ。

[a-pompom]

Passing Props to a Component

propsをコンポーネントで受け渡しする方法を知るのが目標。 https://react.dev/learn/passing-props-to-a-component