JSX代码npm build上的意外标记

Question

我之前已经意识到这一点，但我已经尝试过这些答案了，但它们还没有成功。

我开始学习反应，我在构建应用时遇到了麻烦。我看起来很长很难看到依赖，但他们看起来像我这样的初学者。我已将react代码放在一个单独的文件main.js中，它应该将某些内容呈现到index.html组件中。

npm错误说：

Unexpected token (24:12)
|     renderNormal() {
|         return (
|             <div className="container">
|                 <div className="content">{this.props.children}</div>
|                 <button onClick={this.edit} className="button-primary">Edit</button>

这是我的packages.json依赖项：

  "devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"webpack": "^3.6.0"
},

最后，这是我的.babelrc：

{
  "presets": ["react", "env"],
  "plugins": ["transform-react-jsx", "react-html-attrs"]
}

使用npm 3.10.10