テンプレートエンジンである Jade を React と組み合わせて使ってみます。

インストール

ES6 でプログラムを書くために babel を使います。 Jade の変換には react-jade を使います。それぞれインストールしておきます。

$ npm install -g browserify bablify
$ npm install -D react-jade
$ npm install -S react

Jade の変更用コード

Jade の変換にいい感じのコマンドなどがないようなので自分で書きます。 app.jade を app.js にコンパイルします。

var fs = require('fs');
var path = require('path');

var jade = require('react-jade');

var code = jade.compileFile(path.join(__dirname, 'app.jade'));
fs.writeFileSync('app.js', 'var React = require("react"); module.exports = ' + code);

これを node で実行すれば app.js ができます。

プログラム

変換される Jade とそれを利用する React プログラムを用意します。

// app.jade
div Hello, World!

// src.js
import React from 'react';

import renderApp from './app';

const App = React.createClass({
    render() {
        return renderApp();
    }
});

React.render(<App />, document.body);

Jade のコンパイル結果は仮想 DOM を返す関数になるので、それを render メソッドから使っています。

app.js を作ったあと browserify -o bundle.js -t babelify src.js というコマンドで bundle.js を作ります。 HTML からそれを読みこめば Hello, World! と表示されるはずです。

値を渡す

Jade に値を渡してみます。

App の定義に少し書き加えます。

const App = React.createClass({
    getInitialState() {
        return {
            name: 'Jade'
        };
    },
    render() {
        return renderApp(this);
    }
});

こうすれば Jade 側から state などの値を使うことができます。

div
  | Hello,
  = state.name
  | !

state.name を Jade から使っています。ほかにも if や each などの Jade の機能とも組み合わせて使うことができます。

まとめ

• react-jade で Jade を React 向けにコンパイルできる