node.js - Reactjs:意外的 token

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 的接口(interface))

我已经通过自制程序安装了 Node :

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 的构建:我通过工具 -> 构建系统 -> 新构建系统为 Sublime Text 添加了一个新的“构建系统”并创建了文件:

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

保存到我的 osx 上的 me/Library/ApplicationSupport/SublimeText3/Packages/user/node.sublime.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]

<小时/>

还尝试使用 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。

   模块.导出= { 条目:'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。

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