Coffeescript compiler wrapper adding coffee-react-transform CJSX support
Coffee-React provides a JSX-like syntax for building React components with the full awesomeness of CoffeeScript.
Included is the
cjsx executable, which is wrapper for
You can also
require() CJSX components under node for server-side rendering.
NeatComponent = ReactcreateClass: -><div className="neat-component"><h1>A Component is I</h1> if @propsshowTitle<hr /><p key=n>This line has been printed n times</p> for n in 1..5</div>
$ cjsx -cb neat-component.cjsx
// Generated by CoffeeScript 1.9.1var NeatComponent;NeatComponent = ReactcreateClassvar n;return ReactcreateElement"div""className": "neat-component"thispropsshowTitle ? ReactcreateElement"h1" null "A Component is I" : void 0 ReactcreateElement"hr" nullvar i results;results = ;for n = i = 1; i <= 5; n = ++iresultspushReactcreateElement"p""key": n"This line has been printed " n " times";return results;;;
npm install -g coffee-react
Output compiled JS to a file of the same name:
$ cjsx -c my-component.cjsx
As with the
coffee-script module, you need to register
.cjsx with the module loader:
require'coffee-react/register'Component = require'./component.cjsx'
A recent addition to JSX (and CJSX) is 'spread attributes' which allow merging an object of props into a component, eg:
extraProps = color: 'red'speed: 'fast'<div color="blue" ... extraProps />
which is transformed to:
extraProps = color: 'red'speed: 'fast'ReactcreateElementReactDOMdivReact__spread"color": "blue"extraProps
React 0.12 will introduce changes to the way component descriptors are constructed, where the return value of
React.createClass is not a descriptor factory but simply the component class itself, and descriptors must be created manually using
React.createElement or by wrapping the component class with
In preparation for this, coffee-react-transform (and as a result, coffee-react) now outputs calls to
React.createElement to construct element descriptors from component classes for you, so you won't need to wrap your classes using
React.createFactory. However, for this to work you will need to be using at least React 0.11.2, which adds
If you want the older style JSX output (which just desugars into function calls) then you need to use the 0.x branch, eg. 0.5.1.
Additionally, as of 1.0.0, all input files will be CJSX transformed, even if they don't have a
.cjsx extension or
# @cjsx pragma.
requireCJSX files on the server (also possible with coffee-react/register).