網上搜到的幾個 React CoffeeScript 綁定

補充:

思考之後以爲使用 $ = React.DOM 來寫 $.div {} 的語法更好
並且不會遇到 this 被綁架的問題, 更貼近官方文檔裏的寫法.
因此下面的方案你們先看看熟悉下, 再考慮下是否直接用 $.div 實際編程

---

Facebook 的 React, 不熟悉狀況本身看文檔..
React 是在 JS 代碼中使用模版生成的 Virtual DOM 的, 可是用了 .jsx 文件
.jsx 特殊之處是代碼裏能夠直接嵌入 HTML, 再預處理爲 .js 內容
做爲括號厭惡者, 我很是在意有沒有 CoffeeScript 語法能夠完成這個事情
網站找到幾個:

atom/react-coffee

https://github.com/atom/react-coffee (倉庫不存在了...)

目測是 CommonJS 規範加載:

class Welcome extends Component
  render: ->
    @div ->
      @text "Hello"
      @span @props.name

component = new Welcome(name: "World")
element = component.buildElement()

atom/reactionary

https://github.com/atom/reactionary

element =
  div className: "greeting", key: "fancy-key",
    div className: "header",
      h1 "Hello World"
    div className: "body",
      p "Each and every one of you"

elucidata/react-coffee

https://github.com/elucidata/react-coffee

目測 CommonJS 規範:

{div}= React.DOM

class UserChip extends React.Component
  @staticMethod: -> # becomes a static method on the React Component
    "hello"

  render: ->
    (div null, "Hello")

module.exports= UserChip.toComponent()

snd/react-kup

https://github.com/snd/react-kup

目測 CommonJS

# react-kup doesn't come with react.
# require your favorite version ...
react = require 'react'
# ... and tell react kup to use it
reactKup = require('react-kup')(react)
# react-kup has been tested against react@0.10.0-rc1
# which is recommended

HelloMessage = React.createClass
  render: ->
    that = this
    reactKup (k) ->
      k.div "Hello #{that.props.name}"

mountNode = document.getElementById('example')
component = new HelloMessage({name: 'John'})

React.renderComponent component, mountNode

yang/reactive-coffee

https://github.com/yang/reactive-coffee

main = ->
  currentTask = rx.cell(tasks.at(0)) # "View model" of currently selected task

  $('body').append(
    div {class: 'task-manager'}, [
      h1 {}, bind -> ["#{tasks.length()} task(s) for today"]
      ul {class: 'tasks'}, tasks.map (task) ->
        li {class: 'task'}, [
          input {type: 'checkbox', init: -> @change => task.isDone.set(@is(':checked'))}
          span {class: 'descrip'}, bind -> [
            "#{task.descrip.get()} (#{task.priority.get()})"
          ]
          a {href: 'javascript: void 0', init: -> @click => currentTask.set(task)}, [
            'Edit'
          ]
        ]
      button {init: -> @click => tasks.push(new Task('Task', 'none', false))}, [
        'Add new task'
      ]
      taskEditor {
        task: bind -> currentTask.get()
        onSubmit: (descrip, priority) ->
          currentTask.get().descrip.set(descrip)
          currentTask.get().priority.set(priority)
      }
    ]
  )

jsdf/coffee-react

https://github.com/jsdf/coffee-react
https://github.com/jsdf/coffee-react-transform

須要預處理..

NeatComponent = React.createClass
  render: ->
    {showTitle, neat} = @props

    <div className="neat-component">
      {<h1>A Component is I</h1> if showTitle}
      Coffeescript really saves a lot of typing...
      {<p>is this component neat?<br />{neat}x{times}</p> for times in [1..10]}
    </div>

---

以上來自 Google 和 GitHub 搜索, 之後要有遇到再添加.

最後, 加上我作的比較粗糙的版本: https://github.com/jiyinyiyong/coffee-react-dom

Comment = React.createClass
  render: ->
    props = @props
    dom -> @div class: 'comment',
      @h2 class: 'comment-author', props.author
      props.children

---

返回博客首頁: http://blog.tiye.me