JSX 编译是如何触发的？

Question

我目前正在学习 React 并设置了一个简单的“Hello, world”-示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
  </body>
</html>

顺便说一句。为了了解基础知识，我故意没有使用像 create-react-app 这样的工具链。

以下代码片段实际上是 Web 浏览器无法理解的内容，因为它不标准 JavaScript。

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

是JSX（JavaScript语法扩展），所以需要编译。例如与巴别塔。我知道我在 html 文件的头部包含了 Babel 编译器。 但我不清楚实际编译过程何时以及如何发生。

Babel-package 中是否有在实际渲染之前调用并通过包含的 <script src=""> 标签编译文件的回调？

Answer 1

Babel 脚本执行以下操作：

添加一个DOMContentLoaded listener
Loads all the scripts 如果脚本有 src
Transforms the code and injects a <script> 评估新转换的代码。

JSX 编译是如何触发的？

How is the JSX-compilation triggered?

javascript

reactjs

compilation

babeljs

jsx