ReactJS中的语法错误

我开始学习ReactJS，我正在按照关于入门的书中的说明进行操作。我的目录结构是这样的：ReactJS中的语法错误

app/App.js 
node_modules 
index.html 
package.json 
webpack.config.js

我认为问题的罪魁祸首是来自CLI此错误消息：

ERROR in ./app/App.js 
Module build failed: SyntaxError: c:/code/pro-react/my-app/app/App.js: Unexpected token (6:6) 
    4 | render() { 
    5 |  return (
> 6 |  <h1>Hello World</h1> 
    |  ^
    7 | ); 
    8 | } 
    9 | }

的App.js内容是：

import React from 'react'; 

class Hello extends React.Component { 
    render() { 
    return (
     <h1>Hello World</h1> 
    ); 
    } 
} 

React.render(<Hello />, document.getElementById('root'));

这里是package.json的内容：

{ 
    "name": "my-app", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "node_modules/.bin/webpack-dev-server --progress", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.4.5", 
    "babel-loader": "^6.2.1", 
    "webpack": "^1.12.11", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "dependencies": { 
    "react": "^0.14.6" 
    } 
}

和webpack.config.js内容是：

module.exports = { 
    entry: __dirname + "/app/App.js", 
    output: { 
    path: __dirname, 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loader: 'babel' 
    }] 
    } 
};

我从CLI启动应用程序使用以下命令：

npm start

当我去http://localhost:8080的开发工具有一个错误信息：

GET http://localhost:8080/bundle.js 404 (Not Found)

但正如我所说，我认为罪魁祸首是它不喜欢的语法，所以它不使bundle.js文件。请让我知道我做错了什么。

来源

2016-01-23 SBel

我想这是因为你使用babel-6没有babel presets，在这种情况下，你需要babel-preset-es2015和babel-preset-react，

# For ES6/ES2015 support 
npm install babel-preset-es2015 --save-dev 

# Fot JSX support 
npm install babel-preset-react --save-dev

然后更改或使用query你，而不是

{ 
    test: /\.jsx?$/, 
    loader: 'babel', 
    query: { 
    presets: ['es2015', 'react'], 
    } 
}

webpack配置可以创建内容为.babelrc的文件

{ 
    "presets": ["es2015", "react"] 
}

还需要安装react-dom和使用ReactDOM.render instaed或React.render

来源

2016-01-23 13:08:53

谢谢。这工作。 – SBel

是的，用ReactDOM.render替换React.render的使用使Dev Tools中的弃用消息消失了。谢谢。 – SBel

ReactJS中的语法错误

回答

相关问题