Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. (If you are interested in writing one, you probably should look at CoffeeScriptRedux). Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
Example
Let's see how JSX look like with an example:
<div classname="MarkdownEditor"> <h3>Input</h3> <textarea onkeyup="{this.handleKeyUp}" ref="textarea"> {this.state.value} </textarea> </div> |
which desugars to the following
React.DOM.div({className: 'MarkdownEditor'}, [ React.DOM.h3({}, 'Input'), React.DOM.textarea({onKeyUp: this.handleKeyUp, ref: 'textarea'}, this.state.value ) ]) |
We can easily translate it to CoffeeScript:
{div, h3, textarea} = React.DOM (div {className: 'MarkdownEditor'}, [ (h3 {}, 'Input'), (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'}, @state.value ) ]) |
Structure
The translations rules are really easy. The only gotcha is to write the tags wrapped in parenthesis lisp-style. This is the best way I found not to get caught with indentation issues.
# Empty element # <div></div> (div {}) # Text children: You use a string literal # <div>foo</div> (div {}, 'foo') # Interpolation: You ignore the {} and write the expression as is # <div>{this.state.text}</div> (div {}, @state.text) # Multiple children: You use the [] notation # <div> <b r=""> <b r=""> </b></b></div> <b r=""><b r=""> (div {}, [ (br {}), (br {}) ]) # Attributes: You write them using {} notation # <div onclick="{this.onClick}"></div> (div {onClick: @onClick}) </b></b> |
Demos
I've re-written all the React front-page examples using CoffeeScript. The translation was really easy.
