Separate jsx files

[podo]

I’m having difficulties figuring out how to separate react components into jsx files and loading one of them as a child into another.

var PostsList = ReactMeteor.createClass({
  ...
  render: function() {
    var children = this.state.posts.map(function(post) {
      return <Post key={post._id} title={post.title}/>
    })

    return (
      <div className="posts">
        { children }
      </div>
    );
  }
});

var Post = ReactMeteor.createClass({
  render: function() {
    return (
      <div className="post">
        {this.props.title}
      </div>
    );
  }
});

This seems to work as a single file, but I’m thinking if it’s possible to load have Post as a separate jsx template, because I’m getting this error:

Exception from Tracker afterFlush function: Post is not defined
ReferenceError: Post is not defined
    at http://localhost:3000/client/views/postsList.jsx.js?2f15d1d2d163aef174c55b73f6c1dd1b386e7851:16:34

[giantelk]

Without using Meteor you would use require and export with something like Browserify. Maybe Meteor will bundle/build if the files were renamed to .js On Mar 29, 2015 11:55 AM, "Giedrius Jaloveckas" notifications@github.com wrote:

I’m having difficulties figuring out how to separate react components into jsx files and loading one of them as a child into another.

var PostsList = ReactMeteor.createClass({ ... render: function() { var children = this.state.posts.map(function(post) { return })

return (
  <div className="posts">
    { children }
  </div>
);

} }); var Post = ReactMeteor.createClass({ render: function() { return (

{this.props.title}

);

} });

This seems to work as a single file, but I’m thinking if it’s possible to load have Post as a separate jsx template.

— Reply to this email directly or view it on GitHub https://github.com/reactjs/react-meteor/issues/51.

[podo]

Apparently, removing var from all templates fixed this, because adding var limits scope of the variable only to the same file.

[rgstephens]

Thanks, @podo