脚本宝典收集整理的这篇文章主要介绍了网上搜到的几个 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()
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
@L_777_13@
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
以上是脚本宝典为你收集整理的网上搜到的几个 React CoffeeScript 绑定全部内容，希望文章能够帮你解决网上搜到的几个 React CoffeeScript 绑定所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。