Reactjs：意外的令牌

Question

我正在尝试按照这里的教程进行操作：https://facebook.github.io/react/docs/getting-started.html

只需尝试在 Sublime Text 3 或 webpack 中构建以下内容：

// ReactTest.js
var React = require('react');
var ReactDOM = require('react-dom');

console.log("Hello");

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

我已经安装了 Sublime Text 3，以及通过 Package Control 安装以下包：

• Babel 语法高亮
• Sublime Linter (3) 用于错误检查
• Sublime Linter-contrib-eslint（eslint 的接口）

我已经通过自制软件安装了节点：

brew install node

使用 NPM 安装以下内容：

npm install webpack -g
npm install --save react react-dom babel-preset-react babel-preset-es2015
npp install jsxhint -g
npm install -g jshint

据我了解，这应该是我运行两个选项所需的一切：

---

1. 使用 Sublime Text 3 的构建：我通过 Tools -> Build System -> New Build System 为 Sublime Text 添加了一个新的“构建系统”并创建了文件：

   { "cmd" : ["/usr/local/bin/node", "$file"], "selector":"source.js" }

保存到我的操作系统上的 me/Library/ApplicationSupport/SublimeText3/Packages/user/node.sublime.build。

我运行 Tools -> Build 来构建结果：

/Users/me/Desktop/Test/ReactTest.js:8
  <h1>Hello, world!</h1>,
  ^
SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3
[Finished in 0.1s with exit code 1]
[cmd: ['/usr/local/bin/node', '/Users/me/Desktop/Test/ReactTest.js']]
[dir: /Users/me/Desktop/Test]
[path: /usr/bin:/bin:/usr/sbin:/sbin]

---

1. 还尝试通过以下命令使用 webpack 做同样的事情：

   webpack ReactTest.js Bundle.js

结果：

ERROR in ./ReactTest.js
Module parse failed: /Users/me/Desktop/Test/ReactTest.js Line 8: Unexpected token <
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|   <h1>Hello, world!</h1>,
|   document.getElementById('example')
| );

谁能告诉我我做错了什么？

编辑：对所有这些技术来说都是全新的。这是我在 Sublime Text 中的项目的屏幕截图。

编辑 2：我从网上复制的 .babelrc 文件：

{
  "plugins": ["transform-react-jsx"],
  "ignore": [
    "foo.js",
    "bar/**/*.js"
  ]
}

Answer 1

1. 如果您在代码中使用 JSX，则必须使用 webpack 中的加载器转译为 js。

   module.exports = { 条目：'ReactTest.js'， 输出： { 路径：path.join(__dirname, './dist'), 文件名：'bundle.js' }, 模块： { 装载机：[ { 测试：/.js$/， 排除：/node_modules/， 装载机：'巴别塔'， 询问： { 预设：['react', 'es2015'] } } ] } };

2. 如果您使用的是 ES2015 语法，请确保在根路径中配置了 .babelrc

3. 在您的 webpack.config.js 中复制并使用以下 webpack 配置
4. 在根文件夹中运行 webpack
5. 在 index.html 中包含 bundle.js。

如果您遇到任何困难，请告诉我