title: How to compile JSX with Babel into JavaScript
body: <p>I'm trying to compile the very simplest React tutorial using browserify. I've run:</p>
  
  <pre><code>sudo npm install browserify
  </code></pre>
  
  <p>Then as stated here <a href="http://babeljs.io/docs/setup/#browserify" rel="nofollow">http://babeljs.io/docs/setup/#browserify</a></p>
  
  <pre><code>sudo npm install --save-dev babelify
  </code></pre>
  
  <p>Then I have my file <code>js/script.jsx</code></p>
  
  <pre><code>var HelloMessage = React.createClass({
    render: function() {
      return &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;
    }
  });
  
  ReactDOM.render(&lt;HelloMessage name="John" /&gt;, mountNode);
  </code></pre>
  
  <p>And I'm running from the folder </p>
  
  <pre><code>browserify js/script.jsx -t babelify --outfile bundle.js
  </code></pre>
  
  <p>But then this happens:</p>
  
  <pre><code>djave at djaves-iMac-3 in /Volumes/djave/react
  $ browserify js/script.jsx -t babelify --outfile bundle.js
  SyntaxError: /Volumes/djave/react/js/script.jsx: Unexpected token (4:11)
    2 | var HelloMessage = React.createClass({
    3 |   render: function() {
  &gt; 4 |     return &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;
      |            ^
    5 |   }
    6 | });
    7 | 
  </code></pre>
  
  <p>What am I doing wrong? This is literally my first step into this area so it may be I've missed a pretty major step.</p>
  
  <p><em>More errors</em> (although I suspect this won't help too much!)</p>
  
  <pre><code> at Parser.pp.raise (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
   at Parser.pp.unexpected (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
   at Parser.pp.parseExprAtom (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:754:12)
   at Parser.pp.parseExprSubscripts (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:509:19)
   at Parser.pp.parseMaybeUnary (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:489:19)
   at Parser.pp.parseExprOps (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:420:19)
  </code></pre>