//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によってイベントからメソッドを実行できるようになる。
