title: Webpack and React -- Unexpected token
body: <p>I am new to React and Webpack. I am setting up my first project, when I try to run the webpack-dev-server my code does not compile!</p>
  
  <p><strong>Update</strong>
  Answer below is correct. I needed to add <code>'react'</code> to babel loader presets. You can see the full source for project here: <a href="https://github.com/cleechtech/redux-todo" rel="nofollow">https://github.com/cleechtech/redux-todo</a></p>
  
  <p><em>Error:</em></p>
  
  <pre><code>$ webpack-dev-server             
  http://localhost:8080/webpack-dev-server/
  webpack result is served from /
  content is served from ./dist
  Hash: d437a155a1da4cdfeeeb
  Version: webpack 1.12.14
  Time: 5938ms
      Asset     Size  Chunks             Chunk Names
  bundle.js  1.51 kB       0  [emitted]  main
  chunk    {0} bundle.js (main) 28 bytes [rendered]
      [0] multi main 28 bytes {0} [built] [1 error]
  
  ERROR in ./src/index.js
  Module build failed: SyntaxError: /Users/connorleech/Projects/redux-todo/src/index.js: Unexpected token (7:16)
  console.log(ReactDOM);
  
  ReactDOM.render(&lt;App /&gt;,document.getElementById('root'));
  </code></pre>
  
  <p><strong>src/index.js:</strong></p>
  
  <pre><code>var react = require('react');
  var ReactDOM = require('react-dom');
  var App = require('./components/App');
  
  console.log(ReactDOM);
  
  ReactDOM.render(&lt;App /&gt;,document.getElementById('root'));
  </code></pre>
  
  <p><strong>src/components/App.js</strong></p>
  
  <pre><code>var React = require('react');
  
  var App = React.createClass({
    render: function() {
      return (
          &lt;div&gt;
              &lt;h1&gt;I am app!&lt;/h1&gt;
          &lt;/div&gt;
      );
    }
  });
  
  console.log(App);
  
  module.exports = App;
  </code></pre>
  
  <p><strong>dist/index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;title&gt;Redux todo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Hello world&lt;/h1&gt;
  
      &lt;div id='root'&gt;&lt;/div&gt;
      &lt;script src='bundle.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And finally here is my webpack config and package.json:</p>
  
  <pre><code>module.exports = {
    // starting point
    entry: [
      './src/index.js'
    ],
    module: {
      loaders: [
        {
          test: /\.js?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015']
          }
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    // create bundle.js file
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './dist'
    }
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "redux-todo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/cleechtech/redux-todo.git"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/cleechtech/redux-todo/issues"
    },
    "homepage": "https://github.com/cleechtech/redux-todo#readme",
    "dependencies": {
      "react": "^0.14.8",
      "react-dom": "^0.14.8",
      "react-redux": "^4.4.1",
      "redux": "^3.3.1"
    },
    "devDependencies": {
      "babel-core": "^6.7.4",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "webpack": "^1.12.14"
    }
  }
  </code></pre>