Cannot call a class as a function, React router show error in console if i use es6 format

Question

Im using react router extension to define react routes in my application. every thing in working fine, but the issue is that if i use es6 syntax to define class App.js than index.js "cannot call a class as a function". if change App.js file format to App.jsx it resolve my issue. How does i can define index.jsx file in .js es6 format ? or any proper way to resolve this issue? these are my react router file and app.js file. Here is github link of react-router library https://github.com/reactjs/react-router

index.jsx

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './app/App'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}/> 

  </Router>
), document.getElementById('app'))

Now react router file is // App.js file

import React from 'react';
import { Link } from 'react-router'

class App extends React.createClass{
  constructor(props) {
      super(props);
    }
  render() {
    return (
        <div>
         This is a App.js file write in es6.
        </div>
      )
  }
}


export default App;

**Edited: ** I have following webpack loader config

{
            test:  /(\.js|\.jsx)$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
             presets:['es2015','react']
           }
        }

Answer 1

Your class should extend React.Component, not React.createClass.

e.g.

class App extends React.Component {
    render() {
        return <div>Hello, world</div>;
    }
}