react-kup

react-kup is a simple, nonintrusive alternative to JSX for coffeescript

Usage no npm install needed!

<script type="module">
  import reactKup from 'https://cdn.skypack.dev/react-kup';
</script>

README

react-kup

NPM Package Build Status Sauce Test Status codecov.io Dependencies

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 Build Status with codecov.io code coverage
  • continuously tested in Node.js (0.12, 4 and 5) and all relevant browsers: Sauce Test Status
  • 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