Blockchain code Metaverse VR

Crypto×VR×SmartContract(462)

スポンサーリンク

//tips

//smart contract

コンポーネントはJSXの中で<コンポーネント名/>としてかけ、コンポーネントは

Function コンポーネント名(引数){
return JSXによる表示}

などの形で関数で表すこともでき、タグから、こちらに飛ばすことができる。

さらにクラスとしてコンポーネントを使用することで、応用幅が広がり、ページへのブロック単位での表示を実行できるようになる。

react_appフォルダでの表示へ戻る。

これはアクセスすると、publicフォルダのindex.htmlが読み込まれ、その際にsrcフォルダのindex.jsを一緒に実行、そのindex.jsの中でappコンポーネントが表示されるという形式になっている。

Index.jsでは

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

のようにappコンポーネントをidのrootに組み込んで表示している。

<React.StrictMode>は厳格モードのことでこれは削除しても問題ない。

最終的に表示されるのはapp.jsの内容なのでそちらを編集していくことになる。

まずはこちらの形に書き換え。

import React, { Component } from 'react'
import './App.css'

class App extends Component {
render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<p className="subtitle">This is sample component.</p>
<p>これはサンプルのコンポーネントです。</p>
<p>簡単なメッセージを表示します。</p>
</div>
</div>
}
}

export default App

その際にapp.cssにスタイルを一部追加。

Npm startで無事に変更内容が表示されたのを確認できた。

今度はrect.jsを作成。Appとは異なるコンポーネントであるrectコンポーネントを作成。

import React, { Component } from 'react'

class Rect extends Component {
x = 0
y = 0
width = 0
height = 0
color = "white"
style = {}

constructor(props){
super(props)
this.x = props.x
this.y = props.y
this.width = props.w
this.height = props.h
this.color = props.c
this.radius = props.r
this.style = {
backgroundColor:this.color,
position:"absolute",
left:this.x + "px",
top:this.y + "px",
width:this.width + "px",
height:this.height + "px",
borderRadius:this.radius + "px"
}
}

render(){
return <div style={this.style}></div>
}
}

export default Rect

これをApp.jsに読み込ませる。
import React, { Component } from 'react'
import './App.css'
import Rect from './Rect'

class App extends Component {
render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<p className="subtitle">draw rectangle.</p>
<Rect x="200" y="200" w="200" h="200" c="#6ff9" r="25" />
<Rect x="300" y="300" w="200" h="200" c="#f6f9" r="75"/>
<Rect x="400" y="400" w="200" h="200" c="#6669" r="100" />
</div>
</div>
}
}

export default App

うまく部品を表示できそうな気配がしてきた。

さらにここからは現在の値を扱うステートも併せて考えていく。propsは値を読み取り出すことはできるが変更することはできないので、そちらを補っていく。

ステートを変化させてリアルタイムの表示を実現させる。これがreactの中心機能で、通常のプロパティ変更の場合、再度reactdom.renderを呼び出して表示を更新する必要があった。

このstateはconstructorで値を初期化する。

import React, { Component } from 'react'
import './App.css'

class App extends Component {
constructor(props){
super(props);
this.state = {
msg:'Hello Component.',
}
}

render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<p className="subtitle">Show message.</p>
<p className="alert alert-warning">{this.state.msg}</p>
<p className="alert alert-dark">{this.props.msg}</p>
</div>
</div>
}
}

export default App

今度はsetStateによってstateの値を追加して、表示を変える。下記のようにapp.jsに変更を加えることで'Hello’から始まり、毎秒カウントが増える表示を追加できた。

class App extends Component {
constructor(props){
super(props)
this.state = {
msg:'Hello',
count:0,
}
let timer = setInterval(()=>{
this.setState({
count: this.state.count + 1,
msg: "[ count: " + this.state.count + " ]"
})
}, 1000)
}

クリックなどのイベント処理をした場合若干変更が必要で

onClick={this.doAction}

は事前に下記のように設定する必要がある。

this.doAction=this.doAction.bind(this)

doAction(event){
This.setState({

})
}

このbindによってイベントからメソッドを実行できるようになる。

 

人気の記事

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.