React - 通过 webpack 收集模块时出错

Question

美好的一天！

我是 React 的新手，我尝试创建我的第一个应用程序。但是我运行遇到了问题。当我通过 webpack 收集模块时，出现错误：

$ webpack
Hash: 3eddecfb03179fe8aace
Version: webpack 2.2.1
Time: 71ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.78 kB       0  [emitted]  main
   [0] ./src/index.js 269 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module parse failed: D:\Projects\FrontEnd\loftblog\src\index.js Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { render } from 'react-dom';
|
| render {
|   <div>
|     Hello react!

我的 index.js 文件：

import React from 'react';
import { render } from 'react-dom';

render {
  <div>
    Hello react!
  </div>,
  document.getElementById('root')
};

提前致谢！

Answer 1

您需要正确使用render功能：

render(
  <div>
    Hello react!
  </div>,
  document.getElementById('root')
);

（而不是 render { ... }）

Answer 2

我认为您在 webpack（在 loaders 部分）或 .babelrc 文件本身中缺少 Babel 配置。您需要告诉 Babel 处理您的代码并应用 react 预设。

如果您 post 您的 webpack.config.js 和 .babelrc 我们将能够指出具体缺失的部分。

否则，您可能需要查看 create-react-app 包，这是启动 React 应用程序的绝佳官方方式。

https://github.com/facebookincubator/create-react-app

React - 通过 webpack 收集模块时出错

React - error while collecting modules by webpack

frontend

npm

reactjs

webpack