//tips
//smart contract
Reactによる記述の理解を継続していく。
前回の続きでブラウザにhiを表示させる。react+jsxを使用することで下記のように記述できることがわかった。
import React from 'react';//nodemodulesフォルダのreactを参照する
//これでreactフォルダにアクセスできる
import ReactDOM from 'react-dom';//nodemodulesフォルダのreactを参照する
//create a new component
//this component should produce html
const App=()=>{//function(){
return <div>Hi!</div>//JSXはhtml表記をjsでかけるもの
}
//take this component's generated html
//and put it on the page(in the DOM)
ReactDOM.render(<App />,document.querySelector('.container'));//react-domにAppの内容をサイトに反映するようにお願い
//Appをインスタンス化して渡す必要があるので<App />
//さらにhtmlの挿入先のclassを指定する
//index.htmlから挿入先の確認
これにてブラウザのhttp://localhost:8080/画面にHiの表示をすることができた。
ここからreactを使用し、videoや画像、文言などの複数コンポーネントを持ったページをシンプルに作成していく。
構成としては、
全体構成コンポーネント(index.js)
|-検索コンポーネント(search_bar.js)
|-Video表示コンポーネント(video_detail.js)
|-VideoViewListコンポーネント(video_list.js)
|-単体VideoViewコンポーネント(video_list_item.js)
とする。
今回の動画はYouTube APIを使用する。
このAPIの取得方法はgoogle developer console からAPIライブラリに入り、検索で「YouTube Data API v3」を見つけ、APIの有効化ボタンを押せば良い。
ここからさらにAPIキーを取得する必要があるので、認証情報を作成ボタンを押し、APIキーを入手。
const API_KEY=‘’に内容を保存。
さらにターミナルで
ReduxSimpleStarter-master % npm install --save youtube-api-search
を実行。
―saveとするとパッケージ間の関係を表すpackage.jsonの表示に反映される。
"youtube-api-search": "^0.0.5”が反映されていることが確認できた。
ここからはindex.jsではなく、細部のsearch_bar.jsの作成に移る。
import React from 'react';
const SearchBar=()=>{
return <input />
};
//index.jsとの接続をする必要がある
export default SearchBar;//これにより他のファイルからSearchBarを参照できる
index.js側でimport SearchBar from './components/search_bar'; とすることで外部のfunctionを呼び出すことが可能になる。
SearchBarをhiのかわりに表示させたい場合は以下のようにすれば良い。
const App=()=>{//function(){
return( <div>
<SearchBar />
</div>//JSXはhtml表記をjsでかけるもの
);
}
ここで突如パソコンがクラッシュしたよう。
再起動したところ、localhost8080の表示ができず、要因を探っていたら再度npm startを行わなければいかなかったことが判明。
これで無事に反映できるようになった。
補足でSearchBarの他の記述方も確認。
import React,{Component} from 'react';
//,{}を用いることでconst Component =React.Component;と同義にする
class SearchBar extends Component{//esxによる記述
//react.componentにアクセスできる。それらの機能を持ったクラス。
//classの場合はjxsを返す
//必ずrenderを返す
render(){
return <input />;
}
}
これは拡張できる分扱える範囲が増え、class使用が適切になる場合がある。ただ、基本的には先のfunctionを使用しておいて問題ないよう。
class SearchBar extends Component{//esxによる記述
//react.componentにアクセスできる。それらの機能を持ったクラス。
//classの場合はjxsを返す
//必ずrenderを返す
render(){
return <input onChange={this.onInputChange} />;
}
onInputChange(event){
//event内容を宣言
console.log(event.target.value);
}
}
これを短縮すると下記になる。
render(){
return <input onChange={(event)=>console.log(event.target.value)} />;
}
かなり見覚えがある形になってきた。onChangeでの発生内容を直接=>の後にかけるのでかなり便利。
