title: You may need an appropriate loader to handle this file type. with webpack
body: <p>Following this great tutorial -<a href="https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack" rel="nofollow">https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack</a> - I am trying to learn React. </p>
  
  <p>The source code looks like this:</p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  
  class App extends React.Component {
    render () {
      return &lt;p&gt; Hello React!&lt;/p&gt;;
    }
  }
  
  render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Then I am making a bundle via <code>webpack -d</code> and the following webpack.config.js:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  var BUILD_DIR = path.resolve(__dirname, 'client/public');
  var APP_DIR = path.resolve(__dirname, 'client/app');
  
      var config = {
          entry: APP_DIR + '/index.jsx',
          output: {
              path: BUILD_DIR,
              filename: 'bundle.js'
          },
  
          loaders : [
              {
                  test : /\.jsx?/, // Files to be processed - *.js and *.jsx
                  include : APP_DIR, // Where to look for *.js and *.jsx
                  loader : 'babel' // folder name
              }
          ]
      };
  
      module.exports = config;
  </code></pre>
  
  <p>The bundle end with this error:</p>
  
  <blockquote>
    <p>Module parse failed: C:\DEV\PAT\POC-MERN\client\app\index.jsx
    Unexpected token (6:15) You may need an appropriate loader to handle
    this file type. </p>
  </blockquote>
  
  <pre><code> class App extends React.Component { 
       render(){ 
           return &lt;p&gt; Hello React!&lt;/p&gt;;  &lt;---- This line
       }
   }
  </code></pre>
  
  <p>I believe it's something trivial. I just don't see it. Do you have any ideas?</p>