Javascript 尝试在reactjs中渲染时出现网页包问题

您好，我是react js的新手，正在尝试构建一个测验应用程序..当尝试这样做时，我在调用渲染时遇到了一个错误

以下是webpack.config文件：-

module.exports = {
  entry: {
    app: './src/index.js'
  },

  // Add resolve.extensions.
  // '' is needed to allow imports without an extension.
  // Note the .'s before extensions as it will fail to match without!!!
  resolve: {
    extensions: ['', '.js', '.jsx', '.es6.js']
  },

  output: {
    path: __dirname,
    filename: 'app/js/main.js'
  },
  module: {
    loader: [
//      {
//        test: /\.css$/,
//        loaders: ['style', 'css'],
//       // include: PATHS.app
//
//      },
      // Set up jsx. This accepts js too thanks to RegExp
     {
  test: /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
 presets:['es2015','react'],
  loader: 'jsx-loader'
//  query: {
//    presets: ['react']
//        }
     }
    ]
  }
};

以下是我的index.js文件：-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(
    <App />,
    document.getElementById('example')
);

//React.createElement(People, {})

以下是my package.json：-

{
  "name": "react_quiz",
  "version": "1.0.0",
  "description": "quiz with the help of reactjs",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pratham",
  "license": "ISC",
  "devDependencies":{
      "babel-core":"5.8.*",
      "babel-loader":"5.3.*",
      "webpack":"1.12.*"
  },
  "dependencies":{
      "react":"15.0.1",
      "react-dom":"15.0.1"
  }
}

---

我已经在这个网站上试用了所有不同的网站和解决方案，但到目前为止没有一个对我有帮助。错误出现在

而不是
jsx loader
try use

注意-确保已安装这些软件包







更新

您还可以将
预设
选项从
webpack.config
移动到
.babelrc

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

我这样做的原因之一是因为我之前安装了npm模块。。正如@alexander所指出的，我删除了npm模块，并使用了他在下面建议的命令和代码更改。。这对我来说是可行的
{
  "name": "react_quiz",
  "version": "1.0.0",
  "description": "quiz with the help of reactjs",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pratham",
  "license": "ISC",
  "devDependencies":{
      "babel-core":"5.8.*",
      "babel-loader":"5.3.*",
      "webpack":"1.12.*"
  },
  "dependencies":{
      "react":"15.0.1",
      "react-dom":"15.0.1"
  }
}

  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: { presets: ['es2015', 'react'] }
    }]
  }

npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

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