react-templatesをさわってみた

ReactJSを「もしプロダクトに使うことになったら」という点でちょいちょい最近見ているのですが、必要かどうかは別としてまず思いつく疑問の１つに、テンプレートの部分を別ファイルに切り出すことはできないか、というものがあると思います。

イメージ的にはこんなの。

sample.js

var HelloMessage = React.createClass({
  render: function() {
    return HelloMessageTemplate; //ココ!!
  }
});

で、調べればこういうのはもちろんあるもので、react-templatesというの（これ書いている時点ではスター数が900ちょいくらい）をさわってみた。

概要

.rtというファイルにテンプレートを書いていって、それを.jsファイルにコンパイルして使うというもの。自分はCommonJSを利用しているのですが、それにも対応済みとのこと。

(amd|commonjs|es6|typescript|none)

インストール

npm install -g react-templates

自分はgulp使っているので

npm install --save-dev gulp-react-templates

ただし今回はgulpでの操作はなし。

変換する

helloTemplate.rt

<p>test</p>

このような.rtをつくって

rt ./templates/helloTemplate.rt --modules commonjs 

とすると、helloTemplate.rt.jsというファイルが生成される。

helloTemplate.rt.js

'use strict';
var React = require('react/addons');
var _ = require('lodash');
module.exports = function () {
    return React.createElement('p', {}, 'test');
};

組み込む

あとは以下のように書いて無事表示されることが確認できました。

var HelloTemplate = require('./templates/helloTemplate.rt.js');

var HelloMessage = React.createClass({
  render: function() {
    return HelloTemplate
  }
});

テンプレートだけ切り出して、環境による処理分けなど出来ないかなみたいなところで少しさわってみました。
ここらへんにまつわるところで有益な情報あれば教えていただけると助かります m(＿ ＿)m