Blockchain code Metaverse VR

Crypto×VR×SmartContract(461)

スポンサーリンク

//tips

//smart contract

基本的な部分からスタート。以前はgithubのファイルをベースにショートカットしてしまったので今度は細かいところも見ておく。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<h1>React</h1>
<div id="root">wait...</div>
</body>
</html>

unpkg.comはCDNと呼ばれるサイトの一つでjsのスクリプトをオンライン経由で提供してくれる。

ここでは、reactとreact-domを読み込んでおり、以前使用した時と同じ。

Reactとの機能を使うためにJsを組み込む。

<script>
let dom = document.querySelector('#root');
let element = React.createElement(
'p', {}, 'Hello React!'
)
ReactDOM.render(element, dom)
</script>

Divタグの部分をreactによって書き換えて

<div id="root">wait...</div>

から

<div id="root"><p>Hello React!</p></div>

としている。これがreactの機能。htmlのブロックを取得して、編集できる。

React.createElementでは、htmlのタグとして組み込まれている中身をjsオブジェクトとして扱うエレメントを作成。このエレメントに対してReactDOM.renderで上書きすることで、中身を書き換えている。特に属性が必要ない場合は{}を挿入する。

もちろんイベント付けも可能で、onclick="doCount();”をdivに追加し、実行されるたびにカウント表示を上げ続けることもできる。

<body>
<h1>React</h1>
<div id="root" onclick="doCount();">wait...</div>
<script>
let counter = 0;
let dom = document.querySelector('#root');
doCount();

function doCount(){
counter++;
let element = React.createElement(
'p', {}, "count: " + counter
)
ReactDOM.render(element, dom)
}
</script>
</body>

React表示の基本は更新の必要性が生じたら仮想DOMという仕組みのエレメントを使いレンダリングする。普通のDOMではなく、仮想DOMでDOMを操作するのはDOMでは頻繁な更新に耐えられない処理スピードを補うため。

基本の表示や更新の仕組みがわかったところで、ここからはコンポーネントという部品を使い、もっとすっきり表していく。

ここからはnode.jsを利用してappを作成。
ターミナルから下記を実行。これによりreactアプリ用のreact_appフォルダを作成してくれる。

npx create-react-app react_app

これで作成したフォルダにはnode_module,public,srcフォルダが含まれている。

publicは公開フォルダで、htmlやcssなどの公開されるフォルダが保管される。srcはreactで作成したファイルがまとめられる。

このプロジェクトを公開するためにはサーバにアップロードする必要があるが、その際にはnpm run build を行い、別途公開用のファイルを作成する。

このbuildフォルダの中身をそのままwebサーバにアップロードすればreact_appのアプリケーションを公開できる。

アップロードの方法はレンタルサーバによって異なるとのこと。

ビルドの際にはpackage.jsonのパスの指定を見直すことを忘れない。

またReactの動作確認には、ソースコード表示ではダメでreact動作状況に応じて表示する解析ツールが必要になる。

ブラウザにReact developer toolsを拡張機能として追加するとソースコードの検証のタグにreact特有の解析が追加される。

Htmlタグをjsの中で使えるJsxも使っていく。jsxはtype/babelで書かれ、babelというコンパイラによってコンパイルされるようになる。babelはdappのところでも出てきた。

これによりcreateelementを使用しなくても直接htmlの形式で記載することができる。jsxで記述した値はそのまま仮想DOMのelementオブジェクトとして扱うことができる。

ただ、作成するのは常に一つのエレメントになるため複数のタグを表示したい場合は<div>で囲み、divエレメントを表示させるという形にする。

setInterval(()=>{処理},1000);

1000msごとに処理が実行されるようになる。

また、自動更新されるステート変数も用意されている。

Reactのプログラムではコンポーネントが非常に重要な役割を持っており、私の作成したデモのブロックも全てコンポーネントで分割して管理することになる。

人気の記事

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 , 2022 All Rights Reserved Powered by AFFINGER5.