JSX transformation not working

[davedx]

Hi there,

I've been using ReactJS a lot at work so was excited about this project. :)

I'm currently having trouble as my JSX file doesn't seem to get transformed and/or be found by Meteor. I have a components directory with home.jsx in it with this code:

/** @jsx React.DOM */
var Home = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Home</h1>
        <a href={home()}>Home</a>
            </div>
        );
    }
});

And in the root of my project a router:

RouteCore.map(function() {
  this.route('/', function(ctx) {
    return Home({});
  });
});

But I get this when I hit /:

W20140306-08:27:36.576(1)? (STDERR) Error while rendering path: / ; error: ReferenceError: Home is not defined

Any ideas what might be happening? This is with an existing project that also has Iron-Router, so I'm not sure if it might be conflicting.

[mystor]

I think that the reason why you are getting that error is that Home is being declared local to the jsx file, and you are trying to access it from a different file.

Meteor wraps each file in the project with a (function() {})() call, so when you declared var Home = ... you only declared the Home component local to the file. To declare Home globally, you can simply remove the var keyword.

In addition, I should note that your call <a href={home()}>Home</a> will probably throw an error as home() is not defined. I assume you want home() to return the url '/'. You will probably want to declare a Routes global variable and put the return value from this.route() as a property of it.

/** @jsx React.DOM */
var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Home</h1>
        <a href={Routes.home()}>Home</a>
      </div>
    );
  }
});

Routes = {};
RouteCore.map(function() {
  Routes.home = this.route('/', function(ctx) {
    return Home({});
  });
});

[davedx]

Aha, understood! Thanks for the detailed explanation. I will give it another try. :)