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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.