title: ES6 with React and Browserify
body: <p>So I am trying to use ES6's import statement with React and browserify to create a web app. I am having some hurdles and here is the first one. </p>
  
  <p>Here is my index.js:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  var Start = React.createClass({
    getText: function() {
      return 'hi'
    },
  
    render: function() {
      return (
        &lt;h1 className="jumbotron"&gt;{this.getText()}&lt;/h1&gt;
      );
    }
  });
  
  ReactDOM.render(
    &lt;Start /&gt;,
    document.getElementById('example')
  )
  </code></pre>
  
  <p>Here is my index.html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="example"&gt;&lt;/div&gt;
      &lt;script src="../build/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are my node dependencies:</p>
  
  <pre><code>  "dependencies": {
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "babelify": "^7.2.0",
      "react": "^0.14.3",
      "react-dom": "^0.14.3"
    }
  </code></pre>
  
  <p>Here is the command I use to try to transpile my code with watchify:</p>
  
  <pre><code>watchify -t [ babelify --presets [ react ] ] index.js -o ../build/bundle.js
  </code></pre>
  
  <p>Here is the error I get:</p>
  
  <pre><code>/Users/httpnick/react/csgo-cache/public/js/index.js:1
  import React from 'react';
  ^
  ParseError: 'import' and 'export' may appear only with 'sourceType: module'
  </code></pre>
  
  <p>I was fighting this all weekend and not sure what to do. If I remove the imports and just use <code>require()</code>s it works, but import just does not like to work for me. Any help fixing this issue or things I could check would be greatly appreciated.. I really want to get into ES6 with React.</p>