Impossibile chiamare una classe come funzione, il router React mostra l'errore nella console se utilizzo il formato es6

Question

Im utilizzando l'estensione del router di risposta per definire percorsi di risposta nella mia applicazione. tutto funziona perfettamente, ma il problema è che se uso la sintassi es6 per definire la classe App.js rispetto a index.js "non è possibile chiamare una classe come funzione". in caso di modifica del formato file App.js su App.jsx risolvere il problema. Come posso definire il file index.jsx nel formato .jses6? o un modo corretto per risolvere questo problema? questi sono il mio file router di risposta e il file app.js. Ecco collegamento github della biblioteca reagire-router 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')) 

Ora reagire file di router è // App.js il 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; 

** Modificato: ** Ho seguito webpack loader config

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

Answer 1

La classe deve estendere React.Component, non React.createClass.

ad es.

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

Answer 2

Sul file di configurazione del pacchetto Web e cercare un caricatore babel che test un file jsx. modificare jsx a js