React
Reactとは
ぐぐるとmizchiさんのブログエントリが出てくる。
VirtualDOMという技術を使っているようだ。
VirutalDOMだけ切り出した成果物も存在する。
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ディレクトリに吐出されるようにする。
初歩
初歩として、このような形になった。
charset="UTF-8"/>
</span>React js tutorial<span class="nt" style="box-sizing: border-box; color: rgb(0, 0, 128);">
id="content">
main.js
var CommentBox = React.createClass({
render: function() {
return (
className="commentBox">
Hello, world! I am a CommentBox.
);
}
});
React.render(
/>,
document.getElementById('content')
);
の内容はCommentBox(Reactのインスタンス)の内容が展開されて、
DOMが構築されるんだなあ。
このまま進めていってみよう。
var Comment = React.createClass({
render: function() {
return (
className="comment">
className="commentAuthor">
{this.props.author}
{this.props.children}
);
}
});
var CommentList = React.createClass({
render: function() {
return (
className="commentList">
author="Pete Hunt">This is one comment
author="Jordan Walke">This is *another* comment
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
className="commentForm">
Hello, world! I am a CommentForm.
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
className="commentBox">
Comments
/>
/>
);
}
});
React.render(
/>,
document.getElementById('content')
);
CommentListの中で、Commentを使っている。
Commentの定義は以下のとおりになっている。
var Comment = React.createClass({
render: function() {
return (
className="comment">
className="commentAuthor">
{this.props.author}
{this.props.children}
);
}
});
return (
className="commentList">
author="Pete Hunt">This is one comment
author="Jordan Walke">This is *another* comment
);
CommentList内で、Commentを構築しているが、
author Attribute及びThis is one commentなど
this.props.authorとthis.props.childrenで
引っ張るようにしているのか。
this.propsのpropsは
propertiesの略で、Componentに包み込んだ(内包した)Componentの内容を呼び出したい場合に利用するようだ。
JSON形式で表現したデータをComponentで利用する
charset="UTF-8"/>
</span>React js tutorial - Markdown -<span class="nt" style="box-sizing: border-box; color: rgb(0, 0, 128);">
id="content">
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 (
className="comment">
className="commentAuthor">
{this.props.author}
dangerouslySetInnerHTML={{__html: rawMarkUp}} />
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment){
return (
author={comment.author}>
{comment.text}
);
});
return (
className="commentList">
{commentNodes}
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
className="commentForm">
Hello, world! I am a CommentForm.
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
className="commentBox">
Comments
data={this.props.data}/>
/>
);
}
});
React.render(
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の使い方とか、なんとなくわかってきた。
0 件のコメント:
コメントを投稿