javascript - React.js 语法错误

Question

我已经完成了 React/Elixir“learnphoenix.io”教程，现在正在处理路由和 View 部分。我有一个编译错误

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (6:22)

  4 | import { default as Home } from   "./components/Home"
  5 | import { default as Settings } from   "./components/Settings"
> 6 | const App =   props   => (<div>{props.children}</div>)
    |                         ^
  7 | ReactDOM.render(
  8 |       <Router history={hashHistory}>
  9 |               <Route path="/" component={App}>

 @ multi main
webpack: bundle is now VALID.

我是 React 新手，所以不太了解。

编辑1: 有 webpack.config.js :

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'babel']
        },
        include: path.join(__dirname, 'app')
      }
    ]
  },
  resolve: {
    extensions: [ '', '.js' ]
  }
}

应用程序/index.js:

import React from "react"
import ReactDOM from "react-dom"
import { Router, Route, IndexRoute, hashHistory }   from "react-router"
import { default as Home } from "./components/Home"
import { default as Settings } from "./components/Settings"
const   App =   props   => (<div>{props.children}</div>)
ReactDom.render(
        <Router history={hashHistory}>
                <Route path="/" component={App}>
                        <IndexRoute component={Home}/>
                        <Route path="settings"  component={Settings}/>
                </Route>
        </Router>,
        document.getElementById("root")
)

app/Home/index.js:

import React from "react"

export class Home extends React.Component {
  render() {
    return (<div>Home component</div>)
  }
}

export default Home

Answer 1

这是正确的 jsx ES6 语法，但它看起来像是保存为 .js。

您需要在构建过程中进行转译步骤，可能需要使用 Babel