reactとかいうものに興味がでた。なので手始めに以前phpで書いたツイッター検索スクリプトと非同期通信して検索結果を羅列するというものを作ってみた。で、できたのが以下のソース。jqueryだけで書いたほうがソースが少なくて済むんじゃないか？というのが最初の感想。
恩恵がよくわからんのは数をこなしてないからかも知れん。と思ってアマゾン書籍検索（これも以前phpで書いたものを流用）も作ってみたところ、このソースを使いまわすことで無茶苦茶簡単に書けてしまった。テンプレートって便利ですな。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>react test</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/jsx">
var TwsSet = React.createClass({
dataGet: function(kw){
$.ajax({
type: 'GET',
url: 'tw.php',
data: 'kw='+kw,
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function(json){
this.setState({data: json.statuses});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.dataGet("");
},
onClick: function(){
this.dataGet($('#kw').val());
},
render: function() {
return (
<div className="twsSet">
<SearchForm onClickButton={this.onClick}/>
<TwBox data={this.state.data}/>
</div>
);
}
});
var SearchForm = React.createClass({
render: function() {
return (
<form className="searchForm">
<input type="text" id="kw"/>
<input type="button" value="search" onClick={this.props.onClickButton}/>
</form>
);
}
});
var TwBox = React.createClass({
render: function() {
return (
<ul className="twBox">
{this.props.data.map(function(d) {
return <li key={d.id} className="cf">
<a target="_blank" href={"https://twitter.com/"+d.user.screen_name}><img src={d.user.profile_image_url} alt="*"/></a>
<b>{d.user.name}</b>
<div><a target="_blank" href={"https://twitter.com/"+d.user.screen_name+"/status/"+d.id_str}>{d.text}</a></div>
</li>;
})}
</ul>
);
}
});
React.render(
<TwsSet />,
document.getElementById('contents')
);
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
reactとjqueryを使ってこんなページを作ってみた。
http://xxx.s500.xrea.com/test/react00/
twitterとamazonの検索結果が動き回るだけのシロモノ。テキストボックスにキーワードを記入して送信ボタンを押すと検索結果が切り替わるようになっている。
何てことないように見えるけど仕上がりを見て感心した。移動しながらデータが切り替わるってことはDOM構造を保持したままデータだけ書き換えているってことだ。なかなかスマートですな。
従来の方法で普通に組んだ場合、データ更新時にhtmlタグも描画しなおすはず。
たぶんこんな感じ
http://xxx.s500.xrea.com/test/react00/index2.html
データが更新されるごとに検索結果の表示位置がスタート地点（検索フォームの直下）戻ってしまう。
reactを使わずともDOM構造を保持しつつデータだけ更新することは可能だろうけど、ソースが複雑になるんじゃないだろか？