Webpack doesn't understand React's syntax - reactjs

Question

I am learning both React and Webpack. Now I have written a component that displays a name ;-)
const app = document.getElementById('app');
class World extends React.Component {
constructor(props) {
super(props);
this.name = 'Tomek';
this.callByName = this.callByName.bind(this); /* Or bind directly when calling */
}
callByName() {
alert(this.name);
}
render() {
return (
<div>
<h2>Hello, {this.name}</h2>
<button onClick={this.callByName}>Alert</button>
</div>
)
}
}
ReactDOM.render(<World />, app);
I import it with React and ReactDOM:
import React from 'react';
import ReactDOM from 'react-dom';
import './components/posts/index.js';
I use Webpack to process my JS:
module.exports = {
entry: [
'./_babel/index.js'
],
output: {
path: __dirname + '/_js',
filename: 'index.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
Unfortunately, when I run webpack, I get
ERROR in ./_babel/components/posts/index.js
Module build failed: SyntaxError: /Users/tomek/Sites/wordpress/wp-content/themes/Devoid/_babel/components/posts/index.js: Unexpected token (17:6)
render() {
return (
<div>
<h2>Hello, {this.name}</h2>
<button onClick={this.callByName}>Alert</button>
</div>
Propably I just forgot something, but I can't seem to find what.

Answer 1

You need to add the react loader to your webpack.config.js. I also suggest adding ES2015 loader. Try this:
module.exports = {
entry: [
'./_babel/index.js'
],
output: {
path: __dirname + '/_js',
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {presets: ['es2015']}
},
{
test: /\.jsx$/,
loader:'babel-loader',
query: {presets: ['es2015', 'react']}
}
]
}
};