Kann eine Klasse nicht als eine Funktion aufrufen, React Router Show Fehler in der Konsole, wenn ich es6 Format

Question

Im verwenden Reagieren Router-Erweiterung, um reagieren Routen in meiner Anwendung zu definieren. Jede Sache in Ordnung, aber das Problem ist, dass, wenn ich ES6-Syntax zu Klasse App.js als index.js definieren "kann nicht eine Klasse als Funktion aufrufen". wenn Änderung App.js Dateiformat zu App.jsx es mein Problem beheben. Wie kann ich index.jsx Datei in .jses6 Format definieren? oder einen geeigneten Weg, um dieses Problem zu lösen? das sind meine Reagiere Router-Datei und app.js Datei. Hier Github Link reagieren-Router Bibliothek 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')) 

reagieren nun Routerdatei ist // App.js

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; 

Datei ** Editiert: ** Ich habe folgende webpack loader config

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

Answer 1

Ihre Klasse sollte React.Component, nicht React.createClass.

z.B.

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

Answer 2

Auf Webpack-Konfigurationsdatei und suchen Sie nach einem Babel Loader, der test eine jsx-Datei. Ändern Sie jsx zu js