Probleme beim Reagieren mit dem webpack-dev-server

Question

Ich versuche zu lernen, reagiere mit webpack und reduziere redux (schwer zu finden Guides, um die drei zusammen zu lernen ...) Wie auch immer, ein Problem mit Konfiguration. Jede Hilfe wird geschätzt. Vielen Dank!

EDIT: @ FakeRainBrigand Lösung

arbeitete

Mein Fehler ist

webpack.config.js

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

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     modules: ['node_modules', 'src'], 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      use: ['react-hot-loader', 'babel-loader'] 
     } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ] 
}; 

index.jsx

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './components/app'; 

render(<App/>, document.getElementById('app')); 

app.jsx

import React from 'react'; 

export default class App extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>My Blog</h1> 
     </div> 
    ) 
    } 
} 

package.json

{ 
"name": "blog", 
"version": "1.0.0", 
"main": "index.jsx", 
"license": "MIT", 
"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
}, 
"dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
}, 
"devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "react-hot-loader": "^1.3.1", 
    "webpack": "^2.3.2", 
    "webpack-dev-server": "^2.4.2" 
} 
} 

Ich bin neu in beide reagieren und webpack so vielleicht ist viel einfacher, als ich denke, es ist. Jede Hilfe wird sehr geschätzt.

Answer 1

Es sieht aus wie Sie eine .babelrc Datei vermissen. Sie können generate one here, oder verwenden Sie einfach diese und installieren Sie die Abhängigkeiten.

{ 
    "plugins": [ 
    "transform-class-properties", 
    "transform-object-rest-spread" 
    ], 
    "presets": [ 
    [ 
     "env", 
     { 
     "targets": { 
      "browsers": [ 
      "> 1%" 
      ] 
     } 
     } 
    ], 
    "react" 
    ] 
} 

Installieren

npm install --save-dev babel-preset-env babel-preset-react babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread