Learning ReactJS: Uncaught SyntaxError: Unexpected token import
<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>