[react:day1.2] とりあえず動的に何か表示したい欲求


## 環境
[ここと同じアプリをそのまま使ってます](https://qiita.com/ozepon/items/d5659f068ed1408f3c17)

## 何を表示しよう。。。
アイドルかな

## [アイドルネッサンス](http://idolrenaissance.com/)のメンバーの名前と写真を表示する

[アイドルネッサンスHP](http://idolrenaissance.com/)
![スクリーンショット 2018-01-30 19.18.04.png](https://qiita-image-store.s3.amazonaws.com/0/24013/4c635d17-1f89-94e9-eb8d-9f805b13e710.png "スクリーンショット 2018-01-30 19.18.04.png")

## イメージ図

tagの入れ子イメージ

```
	Member
		L MemberName
		L MemberImage
		
```

## まずは親になるMemberタグを作ってみよう

```bash
# appのrootにcomponentsディレクトリを作ってそこにtagを作る
mkdir components
```

Memberのカスタムコンポーネントを作成

```components/member.js
import React, { Component } from 'react';

export default class Member extends Component {
  render() {
    return (
      <h1> test name </h1>
    );
  }
}
```

index.jsでimportして表示

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Member from '../components/member';

ReactDOM.render(<Member/>, document.getElementById('root'));
registerServiceWorker();

```

errorになった
![スクリーンショット 2018-01-30 19.50.16.png](https://qiita-image-store.s3.amazonaws.com/0/24013/a43f24a0-93b6-a599-122d-4e32271d03df.png "スクリーンショット 2018-01-30 19.50.16.png")


index.jsからmember.jsのimportに失敗
errorメッセージをみるとsrcディレクトリ内に入れれば入れれば参照できるらしい

```bash
mv ./components/ ./src/
```

index.jsのimportのパスも変更

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
- import Member from '../components/member';
+ import Member from './components/member';
ReactDOM.render(<Member/>, document.getElementById('root'));
registerServiceWorker();

```

再度確認
![スクリーンショット 2018-01-30 20.04.09.png](https://qiita-image-store.s3.amazonaws.com/0/24013/fa7978a8-2a57-7442-e862-1da040b80081.png "スクリーンショット 2018-01-30 20.04.09.png")

でた〜😀

## 子要素のMemberNameとMemberImageを作成

```src/components/menber-name.js
import React, { Component } from 'react';

export default class MemberName extends Component {
  render() {
    return(
      <span>menber name</span>
    );
  }
}
```

```src/components/menber-image.js
import React, { Component } from 'react';

export default class MemberImage extends Component {
  render() {
    return(
      <span>membar image</span>
    );
  }
}
```

親のMemberでMemberNameとMemberImageをimportしてみる

```src/components/menber.js
import React, { Component } from 'react';
import MemberName from './member-name';
import MemberImage from './member-image';

export default class Member extends Component {
  render() {
    return(
      <h1> test name </h1>
      <MemberName/>
      <MemberImage/>
    );
  }
}
```

reload
![スクリーンショット 2018-01-30 20.24.51.png](https://qiita-image-store.s3.amazonaws.com/0/24013/ac6fa82b-86f2-05c5-e898-907aa5e5af56.png "スクリーンショット 2018-01-30 20.24.51.png")

またerrorに出会えました。
> Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

複数行ある場合は何か適当なタグでwrapしなきゃいけないみたいですね。
divタグで囲んで再表示

```src/components/menber.js
import React, { Component } from 'react';
import MemberName from './member-name';
import MemberImage from './member-image';

export default class Member extends Component {
  render() {
    return(
+      <div>
        <h1> test name </h1>
        <MemberName/>
        <MemberImage/>
+      </div>
    );
  }
}
```

でた〜〜〜〜😄
![スクリーンショット 2018-01-30 20.29.48.png](https://qiita-image-store.s3.amazonaws.com/0/24013/b904faf8-37b2-2b9b-0401-13fbfc1c1cd7.png "スクリーンショット 2018-01-30 20.29.48.png")

## dataを渡して表示してみる
各コンポーネントの土台はできたので次はデータから動的に表示してみる

### propsに出会う
コンポーネントをrenderする時にデータを引き渡せる。
そのデータを参照する為にコンポーネント内でpropsという変数を使う

試しにindex.jsからMemberにデータを渡してみる

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Member from './components/member';

// Memberに渡す変数
var testData = 'index.jsからお届け'
ReactDOM.render(<Member testData={testData}/>, document.getElementById('root'));
registerServiceWorker();
```

{this.props.testData}を表示してみる

```member.js
import React, { Component } from 'react';
import MemberName from './member-name';
import MemberImage from './member-image';

export default class Member extends Component {
  render() {
    return(
      <div>
        <h1>{this.props.testData}</h1>
        <MemberName/>
        <MemberImage/>
      </div>
    );
  }
}
```

![スクリーンショット 2018-01-30 20.38.49.png](https://qiita-image-store.s3.amazonaws.com/0/24013/f180089b-c10c-538e-b7d9-b82ffcc5f2dc.png "スクリーンショット 2018-01-30 20.38.49.png")

った〜〜😆

### tips
癖で ```var``` を使って宣言しているものがあるが時代的(ES6)に
```const```, ```let```で宣言した方がよい。以後、そうします。今からそうします。次の行から変えます！

## ではデータを渡していきましょう

index.jsでデータを宣言する

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Member from './components/member';

// Memberに渡す変数
const memberList = [
  {
    name:'宮本茉凜'
    ,image:'http://idolrenaissance.com/images/home/member/marin.jpg'
  }
  ,{
    name:'原田珠々華'
    ,image:'http://idolrenaissance.com/images/home/member/suzuka.jpg'
  }
  ,{
    name:'百岡古宵'
    ,image:'http://idolrenaissance.com/images/home/member/koyoi.jpg'
  }
  ,{
    name:'石野理子'
    ,image:'http://idolrenaissance.com/images/home/member/riko.jpg'
  }
  ,{
    name:'南端まいな'
    ,image:'http://idolrenaissance.com/images/home/member/maina.jpg'
  }
  ,{
    name:'比嘉奈菜子'
    ,image:'http://idolrenaissance.com/images/home/member/nanako.jpg'
  }
  ,{
    name:'野本ゆめか'
    ,image:'http://idolrenaissance.com/images/home/member/yumeka.jpg'
  }
  ,{
    name:'新井乃亜'
    ,image:'http://idolrenaissance.com/images/home/member/noa.jpg'
  }
];

ReactDOM.render(<Member memberList={memberList}/>, document.getElementById('root'));
registerServiceWorker();
```

Memberでlistを回して表示


```member.js
import React, { Component } from 'react';
import MemberName from './member-name';
import MemberImage from './member-image';

export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member) => {
          return (
            <div>
              <MemberName memberName={member.name}/>
              <MemberImage memberImage={member.image}/>
            </div>
          );
        })}
      </div>
    );
  }
}
```

子要素で引き渡された情報を表示

```menmber-name.js
import React, { Component } from 'react';

export default class MemberName extends Component {
  render() {
    return(
      <span>{this.props.memberName}</span>
    );
  }
}
```

```member-image.js
import React, { Component } from 'react';

export default class MemberImage extends Component {
  render() {
    return(
      <span>{this.props.memberImage}</span>
    );
  }
}
```

でた〜、が
![スクリーンショット 2018-01-30 21.00.58.png](https://qiita-image-store.s3.amazonaws.com/0/24013/ba0db7a1-8bad-3ff2-2685-abb11fa73885.png "スクリーンショット 2018-01-30 21.00.58.png")

データを表示できたけどconsoleにerrorが出る
> Warning: Each child in an array or iterator should have a unique "key" prop.

なんだろうか。。。

google先生の回答
「ループで回して生成する時はkeyをつけなさい」
「keyがあれば差分だけ再描画されるのである！」

keyはなんでも良さそうなのでmapのindexを設定する

```member.js
import React, { Component } from 'react';
import MemberName from './member-name';
import MemberImage from './member-image';

export default class Member extends Component {
  render() {
    return(
      <div>
        {this.props.memberList.map((member, index) => {
          return (
            <div key={index}>
              <MemberName memberName={member.name}/>
              <MemberImage memberImage={member.image}/>
            </div>
          );
        })}
      </div>
    );
  }
}
```

消えたん
![スクリーンショット 2018-01-30 21.13.11.png](https://qiita-image-store.s3.amazonaws.com/0/24013/8861b7e2-fcc7-bc99-8f28-e828ad6747b2.png "スクリーンショット 2018-01-30 21.13.11.png")

memberImageを画像が表示される様にする

```member-image.js
import React, { Component } from 'react';

export default class MemberImage extends Component {
  render() {
    return(
      <img src={this.props.memberImage}/>
    );
  }
}
```
![スクリーンショット 2018-01-30 21.16.32.png](https://qiita-image-store.s3.amazonaws.com/0/24013/a4f3fe22-6dc5-23dd-b04f-08d55e43c7b5.png "スクリーンショット 2018-01-30 21.16.32.png")

## Reactでstyleを設定する
個人的にはsassで書くのが一番しっくりくるのだが、どんなものがあるのか軽く調査してたら、、、

いろいろあるので次回！