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 预设。

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

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

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