JSX 的全称是 JavaScript XML，它是一种 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。它的主要作用是让开发者更直观地描述 UI 的结构。
我们可以直接在 JS 代码中，把 JSX 语法当成一种表达式进行运算与赋值。
const
element
=
<
h1
>Hello,
JSX
!</h1 >
从长相上来说，它跟 html 标签几乎没有差别，但它不是 html。我们可以在 JavaScript 代码中任意拆分组合这些元素。
例如，一段完整的 html 元素如下：
1
<
div
>
2
<
header
>header </
header
>
3
<
span
>hello world.</
span
>
4
<
footer
>footer </
footer
>
5
</
div
>
而 JSX 可以这样写
1
const
header
=
<
header
>header </
header
>
2
3
const
div
=
(
4
<
div
>
5
{
header
}
6
<
span
>hello world.</
span
>
7
<
footer
>footer </
footer
>
8
</
div
>
9
)
还可以这样
10
const
header
=
<
header
>header </
header
>
20
30
function
footer
() {
40
return
<
footer
>footer </
footer
>
50
}
60
70
const
div
=
(
80
<
div
>
90
{
header
}
10
<
span
>hello world.</
span
>
11
{
footer
()
}
12
</
div
>
13
)
这样的灵活性，为开发者在拆分逻辑时提供了巨大的想象空间。我们可以抽离任意部分单独处理，也可以将任意部分通过合适的方式组合在一起。
注意：JSX 代码需要在 React 环境之下才有效。并且我们需要将具备 JSX 代码的模块文件以
.jsx或者.tsx为后缀名。
在 JSX 中，开发者可以在大括号中放置任何有效的 JavaScript 表达式。例如
const
element
=
<
div
>计算结果：
{
2
+
2
}
</
div
>
或者
10
function
formatName
(
user
) {
20
return
user.firstName
+
''
+
user.lastName;
30
}
40
50
const
user
=
{
60
firstName:
'Harper '
,
70
lastName:
'Perez '
80
};
90
10
const
element
=
(
11
<
h1
>
12
Hello,
{
formatName
(user)
}
!
13
</
h1
>
14
);
JSX 中的属性（类似于 HTML 的属性）可以是字符串，也可以是 JavaScript 表达式。
1
const
url
=
'https://example.com '
;
2
const
element
=
<
img
src
={
url
}
alt
=
"Example "
/>;
JSX 本身也是一个表达式 ，例如可以作为一个函数的返回结果。从视觉上看他是一个标签，但是当我们对其取值时，它本质是一个 JavaScript 对象 。
在开发环境中，Babel 会把 JSX 编译成为一个名为 React.createElement()
的函数调用，如下两种写法完全等效
1
const
element
=
(
2
<
h1
className
=
"greeting "
>
3
Hello, world!
4
</
h1
>
5
);
1
const
element
=
React.
createElement
(
2
'h1 '
,
3
{className:
'greeting '
},
4
'Hello, world!'
5
);
他们创建了一个这样的对象
1
// 注意：这是简化过的结构
2
const
element
=
{
3
type:
'h1 '
,
4
props: {
5
className:
'greeting '
,
6
children:
'Hello, world!'
7
}
8
};
标签元素是 React 组件的重要组成部分。
在开发中，我们通常会使用 JSX 的可任意拆分组合的特性，将整个项目拆分成许多模块，并最后组合成一个完整的 JSX，并使用 createRoot
渲染到已经存在的根 DOM 节点中。
1
import
React
from
'react '
;
2
import
{ createRoot }
from
'react-dom/client '
3
4
import
'./index.css '
;
5
import
App
from
'./App '
;
6
7
8
const
root
=
createRoot
(document.
getElementById
(
'root '
))
9
root.
render
(<
App
/>)
这些与 html 元素类似的标签元素，被称之为 React 元素。他们是不可变对象 。一个元素就像电影中的一帧，它代表了某个特定时刻的 UI。
我们可以利用 React 元素创建自定义组件。
1
function
Welcome
(
props
) {
2
return
<
h1
>Hello,
{
props.name
}
</
h1
>;
3
}
每个自定义组件，也可以看成是一个 React 元素。
1
const
element
=
<
Welcome
name
=
"Tony "
/>;
2
...
10
// bad
20
const
element
=
(
30
<
h1
>Title </
h1
>
40
<
p
>Content </
p
>
50
);
60
70
// good
80
const
element
=
(
90
<
div
>
10
<
h1
>Title </
h1
>
11
<
p
>Content </
p
>
12
</
div
>
13
);
1
// 而不是 class
2
const
element
=
<
div
className
=
"container "
>Content </
div
>;
1
// for ->htmlFor
2
const
element
=
<
label
htmlFor
=
"name "
>Name </
label
>;
1
const
element
=
<
div
2
style
={{
color
:
'red '
,
fontSize
:
'20px '
}}
3
>
4
Styled Text
5
</
div
>
;
本文主要内容在于阐述 JSX 语法并明确标签语言的本质，使用时重点要关注其可任意拆分组合的特性。他的灵活性在开发时非常有用。
JSX 最初是专门为 React 设计的，但是发展到现在，其他库也陆续支持了这种表达 UI 的方式，例如 Vue、Solidjs、Preact 等。