React.jsをCoffeeScriptとjadeで書く

はじめに

ここあたりの記事を読んでRiot.jsなら素でできるCoffeeScriptとJadeの組み合わせがReactでも出来そうだと気づいたので試行錯誤中、 よさ気な書き方を見つけた話です。

結論

こうです。

https://gist.github.com/uzimith/145a0cf8e342dc46ac96

React = require('react')
jade = require('react-jade')
_ = require('lodash')

class Counter extends React.Component
  constructor: ->
    @state =
      count: 0
  tick: =>
    @setState count: @state.count + 1
  render: =>
    jade.compile("""
      #counter
        span Count :
        button(onClick=tick)= count
    """)(_.assign {}, @, @props, @state)

React.render(React.createFactory(Counter)(), document.getElementById('container'))

React.jsの俺的主なキツさの原因である今どき生HTML, なんかめっちゃ多いthis, React.CreateComponet, getInitialStateとかいう意味不明なメソッド等々が まとめて解決されて良さそうです。

コメント

Qiitaを見ていたら@mizchiさんがreact-jadeを使ってるとのことで下記のプロジェクトを見てたら template(_.extend {}, @, @props, @state)とjadeテンプレートを呼び出していました。

thisに定義されている関数とpropsとstateの値をマージしてテンプレートに渡す手法がまさに自分の求めていたものでさすが利用者は違いますね。

俺専用ReactのSVGスケッチ環境作った - mizchi’s blog

react-jadeにはjade.compileFile()といった関数もあるのでいざとなったらテンプレートのファイル分割も簡単にできるのも利点になりそうです。

browserifyで使ってるライブラリ

まだreact-jadeがreact v0.13 betaに対応していないので依存関係削除してインストールしてますが 多分問題無いと思うのでリリースされたら対応されるんじゃないでしょうか。

所感

React.CreateElementやReact.DOMなどを生で駆使するとかラッパーを書いて頑張るとか考えたんですが 他で定義したコンポーネントがタグを書くだけで呼び出せるあたり、この手法が一番良さそうです。