2016年04月17日

React+ES6でカウンター

React+ES6でカウンターサンプルを作ってみました。

import React from 'react';
import {render} from 'react-dom';
//Conter Component
class Conter extends React.Component {
render () {
return (
<p>{this.props.count}</p>
)
}
}
//Countup Component
class Countup extends React.Component {
click(){
this.props.countup()
}
render () {
return (
<button onClick={this.click.bind(this)}>countup</button>
)
}
}
//App Component
class App extends React.Component {
constructor(props) {
super(props);
this.state = { count:0 };
}
countup(){
this.setState({ count: this.state.count+1});
}
render () {
return (
<div>
<Conter count={this.state.count}/>
<Countup countup={this.countup.bind(this)}/>
</div>
)
}
}
//render
render( <App/ >, document.getElementById('app'));

タグ:REACT ES6
posted by ねこまんま at 16:38 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック