# 我们写的 JSX 最后变成了什么样子

# React17 之前

# 利用 babel 将 JSX 转换成 React.createElement 的函数的形式，从而转换成 ReactElement

原始的 jsx 代码

	<div>
	<TextComponent />
	<div>hello,world</div>
	let us learn React!
	</div>

babel 转换之后的形式

	React.createElement(
	'div',
	null,
	React.createElement(TextComponent, null),
	React.createElement('div', null, 'hello,world'),
	'let us learn React!'
	);

ps: 因为用到了 React.createElement 所以早起的 React 才要求必须引入 React

React.createElement 执行之后得到的 ReactElement 的形式

# React17 之后

# 利用 babel 将 JSX 转换成_jsx 函数的形式，从而转换成 ReactElement

原始的 jsx 代码
babel 转换之后的形式
_jsx 执行之后得到的 ReactElement 的形式

# ReactElement 的类型定义

# React.createElement 函数实现

# _jsx 函数实现

前端 React React源码