Javascript Babel JS编译器如何将用户定义组件语法（JSX）转换为常规函数调用？

考虑下面的代码

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

问题2: Babel如何区分有效的HTML标记和用户定义的标记之间的区别

---

据我所知，有效的HTML标记

被编译成
React.createElement（“div”，null，“组件中的div”），然后用户定义的组件标记（JSX）
被编译成
DivComponent（）
Q1：按属性Q2：按大写字母Q1：按属性Q2：按大写字母
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);

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