title: Learning ReactJS: Uncaught SyntaxError: Unexpected token import
body: <p>I'm new to ReactJS. I'm trying out the code from egghead.io and I keep getting the following error:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token import
  </code></pre>
  
  <p>I have loaded babel twice now and have followed along the lesson as described, but it just won't load into the html page. Here is the codes:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  
     &lt;head&gt;
        &lt;meta charset = "UTF-8"&gt;
        &lt;title&gt;Setup&lt;/title&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;div id = "app"&gt;&lt;/div&gt;
        &lt;script src = "main.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App2';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
  </code></pre>
  
  <p>app2.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  
  class App extends React.Component {
    render(){
      let txt = this.props.txt
      return &lt;h1&gt;{txt}&lt;/h1&gt;
    }
  }
  
  App.propTypes = {
    txt: React.PropTypes.string,
    cat: React.PropTypes.number.isRequired
  }
  
  App.defaultProps = {
    txt: 'this is the default txt'
  }
  
  ReactDOM render(
    &lt;App cat={5}/&gt;,
    document.getElementById('app')
  )
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "es6-react-setup",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "react": "^0.14.3",
      "react-dom": "^0.14.3"
    },
    "devDependencies": {
      "babel-core": "^6.14.0",
      "babel-loader": "^6.2.5"
    }
  }
  </code></pre>
  
  <p>Please help.</p>