react-kup

react-kup

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}"

look at the tests for additional examples

contributing

changelog

license: MIT