Provides support for an equivalent of JSX syntax in Coffeescript (called CJSX) so you can write your Facebook React components with the full awesomeness of Coffeescript.

car-component.coffee

# @cjsx React.DOM
Car = React.createClass
  render: ->
    <Vehicle doors=4 locked={isLocked()}  data-colour="red" on>
      <FrontSeat />
      <BackSeat />
      <p>Which seat can I take? {@props.seat}</p>
    </Vehicle>

transform

cjsx-transform car-component.coffee

output

Car = React.createClass
  render: ->
    Vehicle({"doors": 4, "locked": (isLocked()), "data-colour": "red", "on": true},
      FrontSeat(null),
      BackSeat(null),
      React.DOM.p(null, "Which seat can I take? ", (@props.seat))
    )

coffee-react-transform simply handles preprocessing your coffeescript with JSX-style markup. Instead of using it directly, you may want to make use of one of these more high-level tools:

• For a drop in replacement for the coffee executable check out coffee-react.
• If you want to be able to require() cjsx files on the server use node-cjsx or coffee-react.
• If you want to use cjsx via a browserify transform, take a look at coffee-reactify or cjsxify.
• For an equivalent to react-quickstart see react-coffee-quickstart.

npm install -g coffee-react-transform

cjsx-transform [input file]

Outputs Coffeescript code to stdout. Redirect it to a file or straight to the Coffeescript compiler, eg.

cjsx-transform examples/car.coffee | coffee -cs > car.js

transform = require 'coffee-react-transform'

transformed = transform('...some cjsx code...')

cake test or cake watch:test

Tags nested within other tags' attributes may not be rewritten properly, eg.

<Component1>
  <Component2 attr2={<Component3 attr3={ 1 + 1 } />} />
</Component1>

Instead you should write:

component3 = <Component3 attr3={ 1 + 1 } />

<Component1>
  <Component2 attr2={component3} />
</Component1>

which is probably more readable anyway.

The custom file extension recently changed from .csx to .cjsx to avoid conflicting with an existing C# related file extension, so be sure to update your files accordingly (including changing the pragma to @cjsx). You can also just use .coffee as the file extension. Backwards compatibility will be maintained until the next major version.