Unable to call class as function, show router error in console if I use es6 format

Question

I use the adapter extension to determine the routes in my application. everything works fine, but the problem is that if I use the es6 syntax to define the App.js class, than index.js “cannot call the class as a function”. if I change the format of the App.js file to App.jsx , this will solve my problem. How can I define an index.jsx file in .js es6 format? or any proper way to solve this problem? this is my file with my router and the app.js. file Here is the github link of the reactive 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 edit the router file // 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 a webpack bootloader configuration

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

Answer 1

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

eg.

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

Answer 2

In the webpack configuration file and find the loader loader that test represents the jsx file. change jsx to js