创建 hello world reactjs 应用程序答案

【问题标题】：Creating hello world reactjs app创建 hello world reactjs 应用程序
【发布时间】：2017-11-14 04:41:32
【问题描述】：

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

index.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') );

package.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'
    })
  ]
}

错误：

错误中的错误：子编译失败：模块构建失败：参考错误：[BABEL] C:\workspaces\javascript\git hub-battle\node_modules\lodash\lodash.js：未知选项： C:\workspaces\javascript\github-battle\package.json.presents。查看出http://babeljs.io/docs/usage/options/ 了解更多关于选项。此错误的常见原因是存在没有相应预设名称的配置选项对象。例子：无效：{ presets: [{option: value}] } 有效：{ presets: [['presetName', {option: value}]] } 更多预设配置详情请见http://babeljs.io/docs/plugins/#pluginpresets-options。

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

【问题讨论】：

这个错误告诉你你的 Babel 配置可能有问题。是否听从了它的建议并验证了您的配置？
请问你安装了 babel preset es2015 和 stage-0

标签： javascript reactjs webpack babeljs

【解决方案1】：

您应该查看启动 React 应用程序的官方方法，create-react-app。它为您处理所有工具，因此可以让您快速轻松地引导应用程序。

【讨论】：

我同意。这是最简单的方法，但在创建 hello world 应用程序时我不喜欢简单。我想知道更多关于幕后发生的事情。
然后您可以运行npm run eject。它将复制您项目中的所有工具，您将知道引擎盖下发生了什么。并且有很好的记录。
CRA 抽象了太多开发人员应该知道的内容。

【解决方案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" 选项。

【讨论】：