react-kup is a simple, nonintrusive alternative to JSX for coffeescript
- use all coffeescript features naturally when building a react component's virtual-DOM
- tiny single file with just under 100 lines of simple, readable, maintainable code
- huge test suite
passing
with
code coverage
- continuously tested in Node.js (0.12, 4 and 5) and all relevant browsers:
- supports CommonJS, AMD and browser globals
- used in production
- npm package:
npm install react-kup - bower package:
bower install react-kup - no additional build step required
- no react mixin
- same concept as kup (kup is an html builder for nodejs) but builds up nested react elements instead of html strings.
- supports all tags supported by react
- changelog
npm install react-kup
bower install react-kup
> var reactKup = require('react-kup');lib/react-kup.js supports AMD.
sets the global variable reactKup when
neither CommonJS nor
AMD are available.
TodoList = React.createClass
render: ->
that = this
createItem = (itemText) ->
reactKup (k) ->
k.li itemText
reactKup (k) ->
k.ul that.props.items.map createItem
TodoApp = React.createClass
getInitialState: ->
items: ['Buy Milk', 'Buy Sugar']
text: 'Add #3'
onChange: (e) ->
this.setState({text: e.target.value})
handleSubmit: (e) ->
e.preventDefault()
nextItems = this.state.items.concat([this.state.text])
nextText = ''
this.setState({items: nextItems, text: nextText})
render: ->
that = this
reactKup (k) ->
k.div ->
k.h3 'TODO'
k.build TodoList,
items: that.state.items
k.form {
onSubmit: that.handleSubmit
}, ->
k.input
onChange: that.onChange
value: that.state.text
k.button "Add ##{that.state.items.length + 1}"