Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
Download
80736 views
Tweet
Share
Share

Coffee-React

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 coffee, using coffee-react-transform and coffee-script to transform CJSX to Javascript. You can also require() CJSX components under node for server-side rendering.

Example

neat-component.cjsx

NeatComponent = React.createClass
  render: ->
    <div className="neat-component">
      {<h1>A Component is I</h1> if @props.showTitle}
      <hr />
      {<p key={n}>This line has been printed {n} times</p> for n in [1..5]}
    </div>

compile it

$ cjsx -cb neat-component.cjsx

neat-component.js

// Generated by CoffeeScript 1.9.1
var NeatComponent;

NeatComponent = React.createClass({
  render: function() {
    var n;
    return React.createElement("div", {
      "className": "neat-component"
    }, (this.props.showTitle ? React.createElement("h1", null, "A Component is I") : void 0), React.createElement("hr", null), (function() {
      var i, results;
      results = [];
      for (n = i = 1; i <= 5; n = ++i) {
        results.push(React.createElement("p", {
          "key": n
        }, "This line has been printed ", n, " times"));
      }
      return results;
    })());
  }
});

Installation

npm install -g coffee-react

Version compatibility

  • 3.x - React 0.13.x

  • 2.1.x - React 0.12.1

  • 2.x - React 0.12

  • 1.x - React 0.11.2

  • 0.x - React 0.11 and below

Usage

$ cjsx -h

Usage: cjsx [options] path/to/script.cjsx -- [args]

If called without options, `cjsx` will run your script.

  -b, --bare         compile without a top-level function wrapper
  -c, --compile      compile to JavaScript and save as .js files
  -e, --eval         pass a string from the command line as input
  -h, --help         display this help message
  -j, --join         concatenate the source CoffeeScript before compiling
  -m, --map          generate source map and save as .map files
  -n, --nodes        print out the parse tree that the parser produces
      --nodejs       pass options directly to the "node" binary
      --no-header    suppress the "Generated by" header
  -o, --output       set the output directory for compiled JavaScript
  -p, --print        print out the compiled JavaScript
  -s, --stdio        listen for and compile scripts over stdio
  -l, --literate     treat stdio as literate style coffee-script
  -t, --tokens       print out the tokens that the lexer/rewriter produce
  -v, --version      display the version number
  -w, --watch        watch scripts for changes and rerun commands

Output compiled JS to a file of the same name:

$ cjsx -c my-component.cjsx

Require .cjsx files under node

As with the coffee-script module, you need to register .cjsx with the module loader:

require('coffee-react/register')

Component = require('./component.cjsx')

Spread attributes

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'
React.createElement(React.DOM.div, React.__spread({"color": "blue"}, extraProps)

Breaking Changes in 1.0

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 React.createDescriptor.

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 React.createElement.

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.