React
Reactが最近騒がれてるので、
よくわからないからReactjs tutorialを少しこなしてみた。
Reactとは
ぐぐるとmizchiさんのブログエントリが出てくる。
Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想
VirtualDOMという技術を使っているようだ。
[JavaScript] 仮想DOMを提供する『React』について少し調べてみた
VirutalDOMだけ切り出した成果物も存在する。
https://github.com/Matt-Esch/virtual-dom
Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話
react-toolsのインストール
React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。
Chromeで開発することが多い、というかDeveloper tool入れたし、
開発中何かしらサーバ立ててやるのがよいのだろうか、と思ったけど
JSXをjsにコンパイルするのが楽そうだ。
JSXにプリコンパイルするものがあるようだ。
console.logで一つ一つ出てくるのは親切だな。
npm install -g react-tools
jsxというコマンドラインツールがインストールされる。
jsxコマンド
jsxで書かれたものをjava scriptとしてコンパイルする。
jsx形式で書かれたファイルはsrcディレクトリに置いて、
javascript形式にコンパイルされたファイルをdestディレクトリに吐出されるようにする。
jsx --watch src/ dest/
初歩
初歩として、このような形になった。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>React js tutorial</title>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="./dest/main.js"></script>
</body>
</html>
- main.jsは以下のとおり。
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
- レンダリング結果。
の内容はCommentBox(Reactのインスタンス)の内容が展開されて、
DOMが構築されるんだなあ。
このまま進めていってみよう。
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
CommentListの中で、Commentを使っている。
Commentの定義は以下のとおりになっている。
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
CommentList内で、Commentを構築しているが、
author Attribute及びThis is one commentなど
this.props.authorとthis.props.childrenで
引っ張るようにしているのか。
this.propsのpropsはpropertiesの略で、Componentに包み込んだ(内包した)Componentの内容を呼び出したい場合に利用するようだ。
JSON形式で表現したデータをComponentで利用する
JSON形式のデータをComponent内で利用することもできるようだ。
Showdown.jsを利用し、Markdown形式のパースを行う形になっているセクションがあるが、
そこが気になった。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>React js tutorial - Markdown -</title>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="./dest/main.js"></script>
</body>
</html>
var converter = new Showdown.converter();
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
var Comment = React.createClass({
render: function() {
var rawMarkUp = converter.makeHtml(this.props.children.toString())
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkUp}} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment){
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data}/>
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox data={data}/>,
document.getElementById('content')
);
data Objectの内容をCommentBox Componentで展開し、
レンダリングすることがわかった。
サーバ側と通信し、コメントを保存する
comments.jsonファイルにdataの内容を保存する
もっとTutorialを進めていくと
comments.sonにコメントを追加する内容になる。
サーバ側でcomments.jsonを配信しなければならないので、
react-tutorial リポジトリから
サーバとサンプルファイル一式をgit cloneして手元に持ってくることにした。
> git clone git@github.com:reactjs/react-tutorial.git
> cd react-tutorial
> python server.py
> open http://localhost:3000/index.html
Your nameとSay something…を追加していく
更新された。
が、react-tutorialにあるserver.pyだと、
_comments.jsonファイルへの更新は含まれていないので、ちょこっと改造する
diff --git server.py server.py
index 7edb6f6..7ffda64 100644
--- server.py
+++ server.py
@@ -47,6 +47,8 @@ class MyHandler(SimpleHTTPRequestHandler):
# Save the data
comments.append({u"author": form.getfirst("author"), u"text": form.getfirst("text")})
+ with open('_comments.json', 'w') as f:
+ f.write(json.dumps(comments))
sendJSON(self)
else:
SimpleHTTPRequestHandler.do_POST(self)
_comments.jsonにファイルが保存される形にしてみた。
> python server.py
> open http://localhost:3000/index.html
ページを開いた後、保存を繰り返し、
サーバを止めて、再起動する。
_comments.jsonには、入力した内容が保存されている
[{"text": "Hey there!", "author": "Pete Hunt"}, {"text": "fufafuga", "author": "hogehoge"}, {"text": "uooo", "author": "mogemoge"}]
JSXの概念や、React.jsの使い方とか、
なんとなーくわかってきたような。
サーバサイドレンダリングとか、まだわかってないところばかりなので
いじっていこう。
https://github.com/petehunt/react-server-rendering-example
https://github.com/mhart/react-server-example