React.js outputs to the jsc: ReferenceError: <component> is not defined

Question

I'm using the react-rails gem in a rails project. While javascript and jsx works consistently, my coffeescript files never seem to work. Note that I'm trying to use a pure coffeescript solution, with no interpolated jsx.

In my coffeescript file (its extension is *.js.coffee )

{div} = React.DOM

Hello = React.createClass
  render: ->
    (div {}, ['Hello ' + @props.name])

In my view:

= react_component 'Hello', name: 'World'

And this is the error I consistently get in my console:

ReferenceError: Hello is not defined

Answer 1

Taken from my GitHub issue in the react-rails repo, jakubmal answered:

CoffeeScript creates a closure, which will likely look like:

(function() {
  var div, hello;

  div = React.DOM.div;

  Hello = React.createClass({
    render: function() {
      return div({}, ['Hello ' + this.props.name]);
    }
  });
}).call(this);

making Hello inaccessible outside the closure.

What you could do is to assign Hello to window like:

window.Hello = React.createClass

or using a shortcut/trick:

@Hello = React.createClass

To keep your app structure clean, you will need to apply at least a namespace pattern here. http://addyosmani.com/blog/essential-js-namespacing/

Additionally, in the react-rails google group, Paul O'Shannessy wrote:

The helper is pretty naive and expects your components to be available as globals. Coffeescript wraps each file in a closure before they get joined by sprockets which violates the global assumption. This came up during development but we decided something for some people would be better than nothing for anybody.