はじめに

Reactのコンポーネントについて学んだので、アウトプットとして書いていきます。

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

コンポーネントごとにコードを書いていき、そのコンポーネントを組み合わせてUIを作成していくのがReactでの開発です。

コンポーネント化するメリット

• 同じコンポーネントを使いまわせる。
• 記述量を減らすことができる
• 親からコンポーネントを呼び出すときに、少しデータを変えることで、同じコンポーネントでも、表示を変えることができる。
• 他のコンポーネントに影響を与えないで、UIを作っていける
• 状態を閉じ込めて、ユーザーのアクションを作ることができる
• メンテナンス性が抜群に良い

といったことが挙げられます。

コンポーネント化の手順

コンポーネントするために、別ファイルを作成して、コンポーネント化したいコードを書く
↓
importしたいファイル内のコードを埋め込みたい場所で、例えば以下のように記述。

↓
ファイルの一番上でimport文を書く。
のような感じです。
次はpropsについて説明していきます。

propsとは

propsとは、Reactの機能の一つで、動的に画面の表示を変えるために使います。ちなみに、propsはプロパティの略です。

propsを使うメリット

・コード量を減らすことができる。
・コードのメンテナンス性を上げることができる。

propsを使ってコンポーネント化

以下がコンポーネント化の例になります。
ここでは、index.tsxファイルに加え、aboutページを加えて、その中のタイトル部分をコンポーネント化しました。
以下のHeadline.tsxファイルのコードはタイトル部分のコードになっていて、同じコードを二つのページで書かなくていいように、Headline.tsxファイルに書いて、後から

という形で呼び出しています。

こちらのコードは、タイトルの部分を動的に変えるために、「props」を用いています。
そして、Headline.tsxで、以下のようにすることで、動的に画面の表示を変えることができます。

about.tsxでは、

のように記述しているので、画面の表示も動的な変わっています。

このようにコンポーネント化と、動的に画面の表示を変えることができました。
以上になります。
[cv:issue_marketplace_engineer]