Webpack, React'ın sözdizimini anlamıyor

Question

Hem React hem de Webpack öğelerini öğreniyorum.

module.exports = { 
    entry: [ 
     './_babel/index.js' 
    ], 
    output: { 
     path: __dirname + '/_js', 
     filename: 'index.js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } 
     ] 
    } 
}; 

: Ben JS işlemek için WebPack kullanmak

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import './components/posts/index.js'; 

: Artık Bir isim ;-)

const app = document.getElementById('app'); 

class World extends React.Component { 
    constructor(props) { 
    super(props); 
    this.name = 'Tomek'; 

    this.callByName = this.callByName.bind(this); /* Or bind directly when calling */ 
    } 

    callByName() { 
    alert(this.name); 
    } 

    render() { 
    return (
     <div> 
     <h2>Hello, {this.name}</h2> 
     <button onClick={this.callByName}>Alert</button> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<World />, app); 

Ben tepki ile ithalat ve ReactDOM görüntüleyen bir bileşeni yazdım Ne yazık ki, webpack çalıştırdığımda,

ERROR in ./_babel/components/posts/index.js 
Module build failed: SyntaxError: /Users/tomek/Sites/wordpress/wp-content/themes/Devoid/_babel/components/posts/index.js: Unexpected token (17:6) 
    render() { 
    return (
     <div> 
     <h2>Hello, {this.name}</h2> 
     <button onClick={this.callByName}>Alert</button> 
     </div> 

Muhtemelen bir şeyi unuttum, ama ne olduğunu anlayamıyorum.

Answer 1

Tepkime yükleyicisini webpack.config.js dosyasına eklemeniz gerekir. Ayrıca, ES2015 yükleyici eklemeyi öneriyorum. Bunu deneyin:

module.exports = { 
    entry: [ 
     './_babel/index.js' 
    ], 
    output: { 
     path: __dirname + '/_js', 
     filename: 'index.js' 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: {presets: ['es2015']} 
     }, 
     { 
      test: /\.jsx$/, 
      loader:'babel-loader', 
      query: {presets: ['es2015', 'react']} 
     } 
     ] 
    } 
};