React JS : Module Build Failuer, error showing in render colon

I am getting error like this Module build failed: SyntaxError It gives me error in colon of render function

Here it is my code :

webpack.config.js

module.exports = {
entry : './main.js',
output : {
    path : './',
    filename : 'index.js'
},
devServer : {
    inline : true,
    port : 3333
},
module : {
    loaders : [
        {
            test : /\.js$/,
            exclude : /node_modules/,
            loader : 'babel',
            query :{
                presets : ['es2015', 'react']
            }
        }
    ]
}

package.json

{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.9.0",
    "babel-loader": "^5.3.2"
  }

main.js

    import React from 'react';
import ReactDom from 'react-dom';

var Heading = React.createClass({
    render : function() {
        return <th>{this.props.heading}</th>;
    }
});

var Headings = React.createClass({
    render : function(){
        var headings = this.props.headings.map(function(heading) {
            return(<Heading heading = {name}/>);
        });
        return (<thead><tr>{headings}</tr><thead>);
    }
});

var Row = React.createClass({
    render : function() {
        return  (
            <tr>
                <td>{this.props.changeSet.when}</td>
                <td>{this.props.changeSet.who}</td>
                <td>{this.props.changeSet.description}</td>
            </tr>
        );
    }
});

var Rows = React.createClass({
    render : function() {
        var rows = this.props.changeSets.map(function(changeSet) {
            return(<Row changeSet = {changeSet} />);
        });
        return <tbody>{rows}</tbody>;
    }
});

var App = React.createClass({
    render : function() {
        return  (
            <table className='table'>
                <Headings headings={this.props.headings} />
                <Rows changeSets={this.props.changeSets} />
            </table>
        );
    }
});


/* Data Declaration */
var data = [
    { 
        "when": "2 minutes ago",
        "who": "Jill Dupre",
        "description": "Created new account"
    },
    {
        "when": "1 hour ago",
        "who": "Lose White",
        "description": "Added fist chapter"
    },
    {
        "when": "2 hours ago",
        "who": "Jordan Whash",
        "description": "Created new account"
    }
];
var headings = ['When','Who', 'Description'];

/* Call to Render Function for entire app */
ReactDom.render(<App headings={headings} changeSets={data} />, document.getElementById('container'));

Can somebody please provide a solution for it. I have included babel-core also but can't figure out what's wrong.