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のチュートリアルでした。