ReactのJSXの代わりにJadeを使う
CoffeeScript+JadeでReactを使えるか試してみました。
CoffeeScriptでの記述方法は以下のリソースを参考にしました。
なかなか情報がありませんでしたが、本家以外では以下のリソースを参考にさせていただきました。
React.jsをCoffeeScriptとjadeで書く
react-jadeでjadeテンプレートから仮想DOMを出力する
react-jade-loader
バンドルはwebpackを利用し、Jadeはreact-jade-loader
で変換しています。
サンプル
サンプルはReact v0.13.0 Beta 1と同じ内容のものからJadeを使うによう変更したものをGitHubへ置いています。
https://github.com/notice/react-jade - GitHub
gulp+webpackでビルドできるところまで書いてあります。
Webサーバはお好きなもので。
自作Componentを含めたJadeの変換をどうすればいいのかよくわかりませんでしたが、react-jadeのドキュメントとトランスパイルされたソースコードを見ながらやってみました。
Jadeソース
app.jadeからcounterコンポーネントを呼び出しています。プロパティが正しく反映されるかどうか調べます。
div
Counter(initialCount=1)
div
span Count :
button(onClick=tick)= count
CoffeeScriptソース
app.jadeをreact-jade-loaderでコンパイルしておいて、React.createFactoryで生成したファクトリを渡すことでレンダリングすることができました。
React = require 'react'
_ = require 'lodash'
Counter = require 'counter'
tmpl = require './app.jade'
class App extends React.Component
constructor: (props) ->
super props
render: => tmpl(_.assign {Counter: React.createFactory Counter}, @, @props, @state)
module.exports = App
React = require 'react'
_ = require 'lodash'
tmpl = require './counter.jade'
class Counter extends React.Component
@propTypes = initialCount: React.PropTypes.number
@defaultProps = initialCount: 0
constructor: (props) ->
super props
@state = count: props.initialCount
tick: =>
@setState count: @state.count + 1
render: => tmpl(_.assign {}, @, @props, @state)
module.exports = Counter
ReactにはマークアップとViewのロジックは密であるべきという思想があるようなんで、この方法だと、これに反してしまうのかもしれません。
Author And Source
この問題について(ReactのJSXの代わりにJadeを使う), 我々は、より多くの情報をここで見つけました https://qiita.com/notice_inc/items/654ce9b547a1fd5fb9be著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .