Blockchain code Metaverse VR

Crypto×VR×SmartContract(389)

スポンサーリンク

//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での発生内容を直接=>の後にかけるのでかなり便利。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.