//tips
//smart contract
Reactのevent処理の続きを確認する。classの中でのみ使用するstateを組み込む。stateは値が変更されると再度レンダリングされ、最新の内容を反映するというもの。
//stateを定義する
//stateを持てるはclassのみ
//新しいclassインスタンスが作成されたら実行される
constructor(prop){
//superで親クラスを呼ぶ
super(prop);
this.state={term:''};
}
//必ずrenderを返す
render(){
//eventにてstate状況を設定する
return(
<div>
<input onChange={event=>this.setState({term:event.target.value})} />;
Value of the input:{this.state.term}
</div>
);
}
//stateが変化した時に再度レンダリングされる
Value of the input:{this.state.term}では入力内容の最新のものがすぐに反映される。
Stateを使用したレンダリングを実装したい際は、functionではなくclassを使う方が適切なよう。
Index.jsの方もapiでYouTubeから引っ張ったvideoのリスト表示をさせる。
import YTSearch from 'youtube-api-search';
//import { extend } from 'lodash-es';
const API_KEY=‘aaaaa’…;
//時間経過とともにビデオリストは変更するのでclassに変更
class App extends Component{//function(){
constructor(props){
super(props);
this.state={videos:[]}
//検索ワードで動画データを取得
//ビデオリスト作成源
YTSearch({key:API_KEY,term:'surfboards'},(videos)=>{
this.setState({videos});//{videos:videos}キーとバリューが同じ場合には省略可能
//this.setState({videos:videos})
});
}
render(){
return(
<div>
<SearchBar />
</div>//JSXはhtml表記をjsでかけるもの
);
}
これに連動させるvideo_list.jsを次に記述。
import React from 'react';
const VideoList=(props)=>{
return(
<ul className="col-md-4 list-group">
{props.videos.length}
</ul>
);
//ブートストラップ名のようcol-md-4 list-group
};
export default VideoList;
このVideoListをindex.jsにインポートし、render実行項目に追加することで内容を表示させる。
render(){
return(
<div>
<SearchBar />
<VideoList videos={this.state.videos}/>
</div>//JSXはhtml表記をjsでかけるもの
);
}
この入れ子形式をうまく利用して、Videolistにvideolistitemの内容を付与するためvideo_list.jsを下記のように編集した。
const videoItems= props.videos.map((video)=>{
return <VideoListItem video={video}/>
});//mapによりループ処理をシンプルにする
return(
<ul className="col-md-4 list-group">
{videoItems}
</ul>
);
リストで追加した項目を現段階では区別できていないので下記のようにする。
const VideoListItem=({video})=>{
const imageUrl=video.snippet.thumbnails.default.url;
//サムネイルとタイトル付きの項目を返す
return (
<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl}/>
</div>
<div className="media-body">
<div className="media-heading">{video.snippet.title}</div>
</div>
</div>
</li>
);
};
export default VideoListItem;
これによりついにYouTube apiから取得した情報で画像imageとタイトル分を取得し、ブラウザに表示させることができた。これは便利すぎる。
さらにvideoの詳細項目についてもvideo_detail.jsで確認する。
import React from 'react';
const VideoDetail=({video})=>{
if(!video){
return <div>Loading</div>;
}
const videoId=video.id.videoId;
const url=`https://www.youtube.com/embed/${videoId}`;//+videoId;
return (
<div className="video-detail col-md-8">
<div className="embed-responsive embed-esponsive-16by9">
<iframe className="embed-responsive-item" src= {url}></iframe>
</div>
<div className="details">
<div>{video.snippet.title}</div>
<div>{video.snippet.description}</div>
</div>
</div>
);
};
export default VideoDetail;
videos[0]の詳細を表示させることができた。ただ、動画の挿入がなぜかできないのでそちらは質問し、リストにしているものもクリックできるように実装していく。
