は、私は新しいですサーバーの実行エラー+ Reduxの+のWebPACK +バベル[ToDoリスト]

Question

に反応反応し、藤堂一覧をやってますが、私はyarn run build

エラーをしようとすると、私はエラーを取得していますので、私は自分のサーバーを起動することはできません

ERROR in ./src/index.js 
Module parse failed: C:\Users\PixyDigital\Desktop\Getto\src\index.js Unexpected token (8:4) 
You may need an appropriate loader to handle this file type. 
| 
| render(
|  <Provider store={store}> 
|   <App /> 
|  </Provider>, 
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js 
webpack: Failed to compile. 

index.js

import React from "react" 
import {render} from "react-dom" 
import {Provider} from "react-redux" 
import store from "./stores/store" 
import App from "./components/app.js" 

render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 

    document.getElementById("app") 
) 

webpack.config.js

module.exports = { 
    entry: __dirname + "/src/index.js", 
    output:{ 
     filename: "bundle.js", 
     path: __dirname + "/dist" 
    }, 
    module:{ 
     loaders:[ 
      { 
       test:/\.css$/, 
       loader:"style-loader$css-loader" 
      }, 
      { 
       test:/\.jsx$/, 
       loader:"babel-loader", 
       exclude:/node_modules/ 
      } 
     ] 
    }, 
    resolve:{ 
     extensions:['*','.js','.jsx','.css'] 
    }, 
    devServer:{ 
     contentBase: __dirname + "/dist" 
    } 
} 

package.json

{ 
    "name": "todoApp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "license": "MIT", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack-dev-server --inline --hot" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "style-loader": "^0.18.2", 
    "webpack": "^3.1.0", 
    "webpack-dev-server": "^2.5.1" 
    }, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-hot-loader": "^1.3.1", 
    "react-redux": "^5.0.5", 
    "redux": "^3.7.1" 
    } 
} 

は、どのように私は私の問題を解決することができ、あなたが任意のアイデアを持っていますか？

ありがとうございました。

Answer 1

 { 
      test:/\.jsx?$/, 
      loader:"babel-loader", 
      exclude:/node_modules/, 
      options: { 
       presets: ["react"] 
      } 
     } 

UPD：これは、バーベルがJSXをそのままの状態で変換しないためです。

Also i'd recommend to configure babel using .baberlc file