環境

ここと同じアプリをそのまま使ってます

何を表示しよう。。。

アイドルかな

アイドルネッサンスのメンバーの名前と写真を表示する

アイドルネッサンスHP

イメージ図

tagの入れ子イメージ

	Member
		L MemberName
		L MemberImage

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

# 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になった

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

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();

再度確認

でた〜😀

子要素の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

また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>
    );
  }
}

でた〜〜〜〜😄

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>
    );
  }
}

った〜〜😆

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>
    );
  }
}

でた〜、が

データを表示できたけど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>
    );
  }
}

消えたん

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

member-image.js

import React, { Component } from 'react';

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

Reactでstyleを設定する

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

いろいろあるので次回！