【React入門】学習メモ #2

この記事はReact Advent Calendar 2020 17日目の記事です。

前回の記事はこちら

はじめに

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

参考記事

Reactにおけるstateとpropsの違い