javascript - Babel JS 编译器如何将用户定义的组件语法 (JSX) 转换为常规函数调用？

Question

考虑下面的代码。

import React from "react";
import ReactDOM from "react-dom";

const element = <div>Div in Component</div>

function DivComponent() {
  return element
};

const rootElement = document.getElementById("root");

ReactDOM.render(<DivComponent />, rootElement);

问题 1：Babel 如何知道如何将JSX语法转换为常规函数调用，然后返回，然后HTML 标记编译为...<DivComponent/> DivComponent()elementdiv

React.createElement("div", null, "Div in Component");

在浏览器中呈现。它是否使用正则表达式或其他技术来替换 JSX 语法？

QUESTION 2: Babel 如何区分有效的 HTML 标签<div>和用户自定义标签<DivComponent/>？

据我了解，有效的 HTML 标记<div>被编译为React.createElement("div", null, "Div in Component");，然后用户定义的组件标记（JSX）<DivComponent/>被编译为DivComponent().

标签： javascriptreactjsbabeljsjsx