【React学习】JSX本质

一、JSX介绍

JSX（JavaScript XML）是React框架中的一种语法扩展，它允许你在JavaScript代码中编写类似HTML的代码。JSX使得编写React组件的结构更加直观和简洁。JSX的结构类似HTML，但其实他是JavaScript的语法糖，通过Babel能够将JSX转换为普通的JavaScript函数。

二、JSX转换为JavaScript函数示例

JSX基本思路，类似于Vue中的h函数

const imgElem = <div id="div1">
	<p>some text</p>
	<img src={imgUrl}>
</div>

React.createElement("div", {
	id: "div1"
}, React.createElement("p", null, "some text"), React.createElement("img", {
	src: imgUrl
}));