让我们先从原生 JS 开始，一步步过渡到 React，毕竟 React 也是用一行行 JS 代码搭建的，对吧

我们会用这个仅有 3 行的 React app 作为这一节的核心内容

const element = <h1 title="foo">Hello</h1>
const container = document.getElementById("root")
ReactDOM.render(element, container)

简单分析这段代码

• 第一行定义了一个 React element
• 第二行我们使用 DOM API 获取到了 id 为 root 的根节点，称其为 container（容器）
• 最后一行负责将第一行的 element 渲染到 container 中

现在，让我们去掉所有 React 代码，回到原生 JavaScript 中！

const element = <h1 title="foo">Hello</h1>

第一行的 element 是使用 JSX 定义的，它甚至不是有效的 JavaScript，所以，为了能够使用原生 JS 替换它，首先，我们需要将其改为有效的 JS 代码。

JSX 通过类似 Babel 这样的工具转换为 JS。这一转换过程通常也很简单：将标签替换为 createElement 这一函数的调用，再把标签名、props 和 children（子元素）以参数的形式传递给它

const element = React.createElement(
	"h1", // 标签名
	{ title: "foo" }, // 标签上的 props
	"Hello" // 标签内的子元素，这里是一个文本节点
)

React.createElement 依据传入的参数创建一个对象，再加上一些额外的验证，就没了！所以我们可以安全地将这个函数调用替换成它的输出（返回值）

const element = {
	type: "h1",
	props: {
		title: "foo",
		children: "Hello",
	},
}

而这就是一个 element，一个有 type 和 props 属性的对象（好吧，其实还有更多，但是我们只关注这两个）

• type 代表了我们想要创建的 DOM 节点，是当你要创建一个 HTML 元素时，传递给 document.createElement 的标签名。它也可以是一个函数，但我们会在后面提到这一点
• props 是另外一个对象，包含了所有来自 JSX 属性的键值。它也有一个特殊的属性：children