【React入門】学習メモ #2

この記事は[React Advent Calendar 2020](https://qiita.com/advent-calendar/2020/react) 17日目の記事です。

前回の記事は[こちら](https://qiita.com/masa99_it/items/3c27f04045bb7b675425)

# はじめに

React学習の備忘録です。
間違い等ございましたら、ご指摘いただけますと幸いです

## ブラウザ表示の流れ

ファイルは下記の順番に変換されます。
App.jsに記述されているJSXは最終的にHTMLに変換されてブラウザに表示されます。

1. ↓**App.js**
2. ↓**index.js**
3. ↓**index.html**
4. **ブラウザ（chrome, firefox..）**

## コンポーネント

コンポーネントとは、**「部品」**や**「パーツ」**といった意味で、
Reactでは、**コンポーネントを組み合わせてUIを構築**します。

コンポーネントの定義方法

- クラスコンポーネント（class）
- 関数コンポーネント（function）

### クラスコンポーネントの構成

```Sample.jsx
import React from 'react';  //reactをimport

class Sample extends React.Component {  //React.Componentを継承
  render() {
    return(
      {/* JSX */}
    );
  }
}
```

### 関数コンポーネントの構成

```Sample.jsx
import React from 'react';  //reactをimport

const Sample = (props) => {
  return(
    {/* JSX */}    
  )
};
```

### コンポーネントがブラウザに表示されるまで

コンポーネントを**App.js**で呼び出して、表示させることで最終的にブラウザに表示されます。
流れは以下です。

1. ↓**Sample.jsx**
2. ↓**App.js**
3. ↓**index.js**
4. ↓**index.html**
5. **ブラウザ（chrome, firefox..）**

### コンポーネントを表示

コンポーネントをApp.jsで呼び出すためには、コンポーネントを**export**する必要があります。
下記はクラスコンポーネントの例です。

```Sample.jsx
import React from 'react';
class Sample extends React.Component {
  render() {
    return(
      {/* JSX */}
    );
  }
}
export default Sample;  //Sampleコンポーネントをexportする
```

App.jsでは、
1. 呼び出すコンポーネントをimportして読み込む
2. JSX内でコンポーネントを記述する

```App.js
import React from 'react';
import Sample from './Sample';  //【1】Sampleコンポーネントをimportする
class App extends React.Component {
  render() {
    return(
      <Sample />  {/* 【2】Sampleコンポーネントを読み込む */}
    );
  }
}
```

## props

**props**とは、コンポーネントから渡される引数的なものです。

以下、引用
>
- immutable data（不変のデータ）
- passed in from parent（親から渡される）
- can't change it（変更不可）
- can be defaulted & validated (デフォルト値の設定と検証が可能)

### propsの渡し方

`「props（プロパティ）名 = 値」`という形式で渡す

```App.js
render() {
  return(
    <Human
      name = 'masa'  {/* プロパティ: name, 値: 'masa' */}
      age = 21  {/* プロパティ: age, 値: '21' */}
    />
  );
}
```

### propsの取得

`this.props`で取得できます。

```Human.jsx
render() {
  return(
    <div>
      <div className="human-name">
        { this.props.name }  {/* nameプロパティを取得 */}
      </div>
      <div className="human-age">
        { this.props.age }  {/* ageプロパティを取得 */}
      </div>
    </div>
  );
}
```

## mapメソッドの使い方

コンポーネントの数が多くなるとその分、コンポーネントもpropsも記述しないといけなくなり、コードが肥大化してしまします。そのようなケースにmapメソッドを使用します。

mapメソッドを使用することによって、以下のメリットがあります。

- 冗長なコードを記述せずに済む（肥大化防止）
- propsのプロパティと値を配列にまとめることで管理が楽になる
- コンポーネントを何個も記述せずに済む

```App.js
class App extends React.Component {
  render() {
    // 配列
    const humanList = [
      { name: 'masa', age: 21 },
      { name: 'tomoaki', age: 24 },
      { name: 'naoki', age: 15 },
      { name: 'takahiro', age: 51 },
      { name: 'haru', age: 37 }
    ]
    return(
      <div>
        {humanList.map((human) => {
          return(
            <Human
              name = { human.name }
              age = { human.age }
            />
          )
        })}
      </div>
    );
  }
}
```

mapメソッドでは、配列の格propsが**humanList.mapの引数(human)**に格納されてます。
それからコンポーネント側で、**{ human.name }や{ human.age }**でpropsを渡しています。

# 備考

良ければ、続きの記事も見て頂けますと幸いです。

[【React入門】学習メモ #3](https://qiita.com/masa99_it/items/b9531d4b58c8ba8f6cd8)

参考記事

[Reactにおけるstateとpropsの違い](https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50)