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

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

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

## コンポーネント化の手順
コンポーネントするために、別ファイルを作成して、コンポーネント化したいコードを書く
↓
importしたいファイル内のコードを埋め込みたい場所で、例えば以下のように記述。
![img](/mosaic-code.jpg)
↓
ファイルの一番上でimport文を書く。
のような感じです。
次はpropsについて説明していきます。

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

## propsを使うメリット
・コード量を減らすことができる。
・コードのメンテナンス性を上げることができる。

## propsを使ってコンポーネント化
以下がコンポーネント化の例になります。
ここでは、index.tsxファイルに加え、aboutページを加えて、その中のタイトル部分をコンポーネント化しました。
以下のHeadline.tsxファイルのコードはタイトル部分のコードになっていて、同じコードを二つのページで書かなくていいように、Headline.tsxファイルに書いて、後から
![img](/mosaic-code.jpg)
という形で呼び出しています。
![img](/mosaic-code.jpg)
こちらのコードは、タイトルの部分を動的に変えるために、「props」を用いています。
そして、Headline.tsxで、以下のようにすることで、動的に画面の表示を変えることができます。
![img](/mosaic-code.jpg)
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)
![スクリーンショット 2023-04-06 21.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/d81cf245-9f05-e9b4-e98f-bf22395100cc.png)

about.tsxでは、
![img](/mosaic-code.jpg)
のように記述しているので、画面の表示も動的な変わっています。
![img](/mosaic-code.jpg)

![スクリーンショット 2023-04-06 21.53.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/b8202630-dfe1-1498-5ffe-7d3de0f86a9a.png)

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

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

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

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

## コンポーネント化の手順
コンポーネントするために、別ファイルを作成して、コンポーネント化したいコードを書く
↓
importしたいファイル内のコードを埋め込みたい場所で、例えば以下のように記述。
```
// Footerファイルを別で作成していた場合
<HeadLine />
```
↓
ファイルの一番上でimport文を書く。
のような感じです。
次はpropsについて説明していきます。

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

## propsを使うメリット
・コード量を減らすことができる。
・コードのメンテナンス性を上げることができる。

## propsを使ってコンポーネント化
以下がコンポーネント化の例になります。
ここでは、index.tsxファイルに加え、aboutページを加えて、その中のタイトル部分をコンポーネント化しました。
以下のHeadline.tsxファイルのコードはタイトル部分のコードになっていて、同じコードを二つのページで書かなくていいように、Headline.tsxファイルに書いて、後から
```
<Headline title="index page"/>
```
という形で呼び出しています。
```
title="index.page"
```
こちらのコードは、タイトルの部分を動的に変えるために、「props」を用いています。
そして、Headline.tsxで、以下のようにすることで、動的に画面の表示を変えることができます。
```
{props.title}
```
```index.tsx
import Head from 'next/head'
import { Inter } from 'next/font/google'
import { Headline } from '@/components/Headline'
import styles from '@/styles/Home.module.css'
import { Links } from '@/components/Links'
import { Title } from '@/components/Title'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Index Page</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.description}>
        <Headline title="index page"/>
        <Title />
        </div>
        <Links />
      </main>
    </>
  )
}

```

```Headline.tsx
import React from 'react';
import { Inter } from 'next/font/google';
import styles from './Headline.module.css';


const inter = Inter({ subsets: ['latin'] })

export function Headline(props:any) {
    return (
        <>
            <p>
                Get started by editing&nbsp;
                <code className={styles.code}>{props.title}</code>
            </p>
        </>
    )
}
```
![スクリーンショット 2023-04-06 21.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/d81cf245-9f05-e9b4-e98f-bf22395100cc.png)

about.tsxでは、
```
<Headline title="about page">
```
のように記述しているので、画面の表示も動的な変わっています。
```about.tsx
import Head from 'next/head'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import {Links} from '@/components/Links'
import {Headline} from '@/components/Headline'
import { Title } from '@/components/Title'


const inter = Inter({ subsets: ['latin'] })

export default function About() {
  return (
    <>
      <Head>
        <title>About Page</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>


      <main className={styles.main}>
        <div className={styles.description}>
        <Headline title="about page">
        </Headline>
        <Title />
        </div>
        <Links />
    </main>
    </>
  )
}

```

![スクリーンショット 2023-04-06 21.53.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/b8202630-dfe1-1498-5ffe-7d3de0f86a9a.png)

このようにコンポーネント化と、動的に画面の表示を変えることができました。
以上になります。
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

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

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

続きを読むには単価診断を受けてください（30秒）