環境
何を表示しよう。。。
アイドルかな
アイドルネッサンスのメンバーの名前と写真を表示する
イメージ図
tagの入れ子イメージ
Member
L MemberName
L MemberImage
まずは親になるMemberタグを作ってみよう
# appのrootにcomponentsディレクトリを作ってそこにtagを作る
mkdir components
Memberのカスタムコンポーネントを作成
import React, { Component } from 'react';
export default class Member extends Component {
render() {
return (
<h1> test name </h1>
);
}
}
index.jsでimportして表示
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();
index.jsからmember.jsのimportに失敗
errorメッセージをみるとsrcディレクトリ内に入れれば入れれば参照できるらしい
mv ./components/ ./src/
index.jsのimportのパスも変更
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を作成
import React, { Component } from 'react';
export default class MemberName extends Component {
render() {
return(
<span>menber name</span>
);
}
}
import React, { Component } from 'react';
export default class MemberImage extends Component {
render() {
return(
<span>membar image</span>
);
}
}
親のMemberでMemberNameとMemberImageをimportしてみる
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/>
);
}
}
またerrorに出会えました。
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag
複数行ある場合は何か適当なタグでwrapしなきゃいけないみたいですね。
divタグで囲んで再表示
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にデータを渡してみる
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}を表示してみる
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でデータを宣言する
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を回して表示
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>
);
}
}
子要素で引き渡された情報を表示
import React, { Component } from 'react';
export default class MemberName extends Component {
render() {
return(
<span>{this.props.memberName}</span>
);
}
}
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を設定する
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を画像が表示される様にする
import React, { Component } from 'react';
export default class MemberImage extends Component {
render() {
return(
<img src={this.props.memberImage}/>
);
}
}
Reactでstyleを設定する
個人的にはsassで書くのが一番しっくりくるのだが、どんなものがあるのか軽く調査してたら、、、
いろいろあるので次回!