react-jadeでjadeテンプレートから仮想DOMを出力する

常日頃Reactに足りないのはテンプレートエンジンだ！と主張していたのだけど、react-jadeは試した感じ信頼できそうな感じだった。

jade公式なんで信頼できそう。信頼できそう、とは変なパースミスとか起こらないだろうという意味
jadejs/react-jade

var React = require('react');
var jade = require('react-jade');
var dummyTemplate = 'button(onClick=onClick) this is button';

var template = jade.compile(dummyTemplate);

var Foo = React.createClass({
  onClick: function(){
    console.log('clickcckckckckc');
  },
  render: function(){
    template({onClick: this.onClick});
  }
});

React.renderToString(Foo({})) //=> render!

ちゃんと関数インスタンスを関数インスタンスとして渡せる！ってのが多分他のテンプレートエンジンとのいちばん大きな違いだと思う。

プレコンパイル(jade.compile)にそこそこ時間かかるっぽいので、たぶんrender時じゃなくてロード時にプレコンパイルするのがたぶん正しい。

探したら一応webpack用のローダーがあった。
nw/react-jade-loader