https://github.com/snd/react-kup
react-kup is a simple, nonintrusive alternative to JSX for coffeescript
https://github.com/snd/react-kup
Last synced: about 1 month ago
JSON representation
react-kup is a simple, nonintrusive alternative to JSX for coffeescript
- Host: GitHub
- URL: https://github.com/snd/react-kup
- Owner: snd
- License: mit
- Archived: true
- Created: 2014-03-10T13:28:38.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-04-20T11:44:32.000Z (almost 9 years ago)
- Last Synced: 2024-10-16T07:35:51.453Z (6 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 67.4 KB
- Stars: 21
- Watchers: 6
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: contributing.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-cn - react-kup - A simple, non-intrusive alternative to jsx for coffeescript (Uncategorized / Uncategorized)
- awesome-react - react-kup - A simple, non-intrusive alternative to jsx for coffeescript
- awesome-learning-resources - react-kup - A simple, non-intrusive alternative to jsx for coffeescript (Uncategorized / Uncategorized)
- awesome-react - react-kup - react-kup is a simple, nonintrusive alternative to JSX for coffeescript ` 📝 5 years ago` (React [🔝](#readme))
README
# react-kup
[](https://www.npmjs.org/package/react-kup)
[](https://travis-ci.org/snd/react-kup/branches)
[](https://saucelabs.com/u/reactkup)
[](http://codecov.io/github/snd/react-kup?branch=master)
[](https://david-dm.org/snd/react-kup)
**[react](http://facebook.github.io/react/)-[kup](https://github.com/snd/kup) is a simple, nonintrusive alternative to [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) for [coffeescript](http://coffeescript.org/)**
- 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](src/react-kup.coffee)
- [huge test suite](test/react-kup.coffee)
passing [](https://travis-ci.org/snd/react-kup/branches)
with [](http://codecov.io/github/snd/react-kup?branch=master)
code coverage
- continuously tested in Node.js (0.12, 4 and 5) and all relevant browsers:
[](https://saucelabs.com/u/reactkup)
- supports CommonJS, [AMD](http://requirejs.org/docs/whyamd.html) 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**](https://github.com/snd/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](CHANGELOG.md)
```
npm install react-kup
```
```
bower install react-kup
```
``` javascript
> var reactKup = require('react-kup');
```
[lib/react-kup.js](lib/react-kup.js) supports [AMD](http://requirejs.org/docs/whyamd.html).
sets the global variable `reactKup` when
neither CommonJS nor
[AMD](http://requirejs.org/docs/whyamd.html) are available.
```coffeescript
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](test/react-kup.coffee)
### [contributing](contributing.md)
### [changelog](CHANGELOG.md)
### [license: MIT](LICENSE)