title: Component undefined in ReactJS
body: <p>I'm playing around with ReactJS. I have defined three components, which are nested:</p>
  
  <p><strong>UserProfile.jsx</strong></p>
  
  <pre><code>var React = require('react');
  
  var UserProfile = React.createClass({
  
    getInitialState: function() {
      return {
        username: "zuck"
      };
    },
  
    render: function() {
      return (
        &lt;UserProfile&gt;
          &lt;ProfileImage username={this.props.username}/&gt;
          &lt;ProfileLink username={this.props.username}/&gt;
        &lt;/UserProfile&gt;
      );
    }
  
  });
  React.render(&lt;UserProfile username="zuck"/&gt;, document.body);
  
  module.exports = UserProfile;
  </code></pre>
  
  <p><strong>ProfileLink.jsx</strong></p>
  
  <pre><code>var React = require('react');
  
  var ProfileLink = React.createClass({
  
    render: function() {
      return (
        &lt;a href="//facebook.com/{this.props.username}"&gt;{this.props.username}&lt;/a&gt;
      );
    }
  
  });
  
  module.exports = ProfileLink;
  </code></pre>
  
  <p><strong>ProfileImage.jsx</strong></p>
  
  <pre><code>var React = require('react');
  
  var ProfileImage = React.createClass({
  
    render: function() {
      return (
        &lt;img src="//graph.facebook.com/{this.props.username}/picture"/&gt;
      );
    }
  
  });
  
  module.exports = ProfileImage;
  </code></pre>
  
  <p>My html file basically only includes the three jsx files (btw, is there a way to bundle all these into a single request during development?)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;React FB Link&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script type="text/javascript" src="UserProfile.jsx"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="ProfileLink.jsx"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="ProfileImage.jsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using beefy to handle and serve the JSX files, using <code>beefy *.jsx 8000 -- -t reactify</code>.</p>
  
  <p>The resulting files are (in truncated form):</p>
  
  <ul>
  <li><a href="http://pastebin.com/xcsX02z7" rel="nofollow">UserProfile.jsx</a></li>
  <li><a href="http://pastebin.com/gDL8Z8Gi" rel="nofollow">ProfileLink.jsx</a></li>
  <li><a href="http://pastebin.com/k2xDZy56" rel="nofollow">ProfileImage.jsx</a></li>
  </ul>
  
  <p>Loading the html page results in an error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: ProfileImage is not defined
    with reference to line 15 in <code>UserProfile.jsx</code>:</p>
  </blockquote>
  
  <pre><code>React.createElement(ProfileImage, {username: this.props.username}),
  </code></pre>