这个React代码在CodePen上为什么可以工作，即使没有选择预处理器？

Question

我在 CodePen 上有这段代码：https://codepen.io/anon/pen/OdOyJX，它运行得非常好，但我对它为什么能够运行感到困惑。

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

在JavaScript设置中，没有选择预处理器，因此我期望JSX语法会失败，因为"<"是无效的标记。 这是为什么在CodePen上可以工作的原因？

- Hamdi Douss

---

这并不解释为什么这段代码可以工作。<div>Hello, world!</div>并不是正确的JS语法，而且如果没有一个转译器（或者Codepen预处理器），这段代码甚至不会被正确解析。 - Hamdi Douss

有一些JSX预处理正在进行，结果如下 => ReactDOM.render( React.createElement('div', null, '你好，世界！'), document.getElementById('root')); //# sourceURL=pen.js - Keith

看起来像 CodePen，如果没有选择 JS 预处理器，则默认使用 Babel。例如，使用 async / await 获取所有 _asyncToGenerator 的内容。 - Keith

谢谢@Keith。这个有文档记录吗？在预处理器中选择Babel的目的是什么？ - Hamdi Douss

Answer 1

如果你现在查看你的Pen，它看起来确实无法识别JavaScript中的<，但是如果你打开Babel，它会正常工作。

当你提出这个问题时，Babel可能已经默认打开了！

- Cassidy

Answer 2

CodePen自动添加了Babel支持，如此处所述。

- idan

---

你提到的文章指出，你应该选择Babel作为JS预处理器。没有提到如果你不选择任何预处理器（就像在问题的CodePen中），Babel会被自动选择。 - Hamdi Douss