You may need an appropriate loader to handle this file type. with webpack
<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>