创建你好世界反应应用程序

Question

我正在通过一个基本的Hello World React应用程序工作。 我正在使用 webpack/babel，但在构建项目时出现错误，我还提供了我正在使用的依赖项的版本。

索引.js

var React = require('react');
var ReactDom = require('react-dom');
require('./index.css');
class App extends React.Component {
render() {
return (
<div>
Hello World!
</div>
)
}
}
ReactDom.render( <App/>, document.getElementById('app') );

包.json

{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack"
},
"babel": {
"presents": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}

webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /.(js)$/, use: { loader: 'babel-loader', options: { presents: ['env', 'react'] } } },
{ test: /.css$/, use: [ 'style-loader', 'css-loader' ] }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Github Battle',
template: './app/index.html'
})
]
}

错误：

错误中的错误：子编译失败：模块生成失败： ReferenceError： [BABEL] C：\workspaces\javascript\git 中心战斗ode_modules\洛达什\洛达什.js：未知选项： C：\workspaces\javascript\github-battle\package.json.presents.检查 出 http://babeljs.io/doc s/用法/选项/了解更多信息 选项。 此错误的常见原因是存在 没有相应预设名称的配置选项对象。 例： 无效：{ presets: [{option: value}] }有效期：{ presets: [['presetName', {option: value}]] }有关预设配置的更多详细信息，请参阅 http://babeljs.io/docs/plugins/#pluginpresets-options。

'

如果您需要有关我的hello world项目的更多信息，请询问，我非常愿意尝试解决此问题。

Answer 1

你应该检查初始化 React 应用程序的官方方式，create-react-app。它为您处理所有工具，因此允许您非常快速轻松地启动应用程序。

Answer 2

从您的错误来看，它看起来像是 Babel 配置问题。

我看了一下我的一个简单的 React 项目，它有这组 babel devDependencies：

"devDependencies": {
"babel-core": "^6.24.0",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-react": "^6.23.0",
}

也许您需要设置"babel-preset-latest"选项。