Я изучаю как React, так и Webpack. Теперь я написал компонент, который отображает имя ;-)Webpack не понял Синтаксис React
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);
я импортировать его с React и ReactDOM:
import React from 'react';
import ReactDOM from 'react-dom';
import './components/posts/index.js';
Я использую Webpack обрабатывать мои JS:
module.exports = {
entry: [
'./_babel/index.js'
],
output: {
path: __dirname + '/_js',
filename: 'index.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
К сожалению, когда я бегу webpack
, я получаю
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>
Продвинутый я просто что-то забыл, но я не могу найти что-то.
Какая версия babel .. 5 или 6? – azium