MeteorがReactを公式サポートしたので、チュートリアルをやってみる
これまで頑なにBlazeテンプレートを貫いてきたMeteorに変化の兆し。どうやらreactテンプレートを正式に採用したらしいです。今回はそのチュートリアルをやってみたいと思います。
本家チュートリアル
完成品
デモ：http://reace-meteor-encodows.meteor.com/
レポジトリ:https://github.com/endows/react-meteor-example
ステップ１ HelloWorld
まずはreact + meteorでHelloworldしてみましょう。
git clone https://github.com/endows/react-meteor-example
cd react-meteor-example
git checkout hello-world
meteor
するとこんな画面になると思います。
東京グールの鈴谷什造くんが覗き込んでます。ちょっとファイルを見てみましょう。
# react-meteor-example.jsx
var App = React.createClass({
render () {
return (
<div>
<img src='http://lohas.nicoseiga.jp/thumb/4521080i?'/></img>
<h1>Hello worldですぅ!!!!</h1>
</div>
);
}
});
if (Meteor.isClient) {
Meteor.startup(function () {
React.render(<App />, document.getElementById('root'));
});
}
見事にTemplate.**がありません。美しきコード！Blazeから解放されたことを実感しますねー
ステップ２ inputとlistを表示
git checkout reactive-collection
meteor
# react-meteor-example.jsx
...
Meteor.methods({
insertTask: function (task) {
// Validate the data
check(task, {
content: String
});
// Insert into MongoDB and Minimongo
Tasks.insert(task);
}
});
...
これで入力とlist表示ができるはずです。注目すべきは、直接CollectionにinsertせずにMeteor.call()を使っている点。この辺がFluxっぽいですよね。
やってみた感想
正直React初心者でしたが、案外できました。Meteorパッケージはビルドやインクルードを意識しなくていいことですよね。React入門としてもよかったと思います。React使いの人には朗報なのでしょうが、自分はまだコードとビューがごちゃごちゃになったjsx記法になれません。
まずはriotあたりから慣れていこうと思います。以上、React + Meteorのチュートリアルでした。
Author And Source
この問題について(MeteorがReactを公式サポートしたので、チュートリアルをやってみる), 我々は、より多くの情報をここで見つけました https://qiita.com/endotakashi/items/c0d90a29197dc712ecda著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .