構文エラーReact.js

Question

React/Elixir "learnphoenix.io"チュートリアルを完了しました。ルートとビューの部分にあります。コンパイルエラーがあります

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. 

私は非常によく分かりません。

EDIT1：

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") 
) 

アプリ/ホーム/ index.js：

import React from "react" 

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

export default Home 

Answer 1

webpack.config.jsが あり

これは正しいjsx ES6構文ですが、.jsとして保存されているようです。

おそらくバベル

Answer 2

であなたのプリセットにこれを追加し、ビルドプロセスへにおけるtranspileステップを持っている必要があります：

[ 'es2015'、 'ステージ0'、 '反応']

これは

const App = props => (<div>{props.children}</div>) 

間違っていないとそれがtranspile必要があります。

"use strict"; 

var App = function App(props) { 
    return React.createElement(
     "div", 
     null, 
     props.children 
    ); 
}; 

しかし、あなたはreactギルギラ部分がありません。私は反応タグを使用していない場合に備えてエラーin Babelを欺いた。

はプリセットを評価：es2015、es2016、ステージ1行ラップ縮小化（Babili）バベル6.22.1

repl: Unexpected token (1:26) 
> 1 |  const App = props => (<div>{props.children}</div>) 
    |       ^

これは、脂肪の矢印構文と呼ばれ、小道具はステートレス関数のパラメータです。関数の名前を設定していて、JSXを返しています。

反応がない場合は、JSX部品をトランジルすることができず、そこからエラーが発生します。