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')
);

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

用于语法突出显示的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

根据我的理解，这应该是我需要运行两个选项之一的所有内容：

使用Sublime Text 3的构建：我添加了一个新的构建系统＆＃39;用于工具的Sublime Text - ＆gt;构建系统 - ＆gt;新建系统并创建了文件：

{＆＃34; cmd＆＃34; ：[＆＃34; / usr / local / bin / node＆＃34;，＆＃34; $ file＆＃34;]，＆＃34; selector＆＃34;：＆＃34; source.js＆＃34; }

保存到我的osx上的 me / Library / ApplicationSupport / SublimeText3 / Packages / user / node.sublime.build 。

我运行工具 - ＆gt;构建以构建结果：

/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')
| );

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

编辑2：.babelrc文件，我已经从网上复制过了：

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

Answer 1

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

module.exports = { 条目：＆＃39; ReactTest.js＆＃39;，输出：{ path：path.join（__ dirname，＆＃39; ./ dist＆＃39;），文件名：＆＃39; bundle.js＆＃39; }，模块：{ 装载机：[ { 测试：/。js $ /， exclude：/ node_modules /，装载机：＆＃39; babel＆＃39;，查询：{ 预设：[＆＃39;反应＆＃39;，＆＃39; es2015＆＃39;] } } ] } };
如果您使用的是ES2015语法，请确保在根路径中配置.babelrc
复制并使用webpack.config.js中的以下webpack配置
在根文件夹

webpack

在index.html中包含bundle.js.

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

Reactjs：意外的令牌

1 个答案: