一,什么是JSX
语法
1.JSX
是扩展的javascript
语法,JSX
可以生成 React
元素。
二,JSX
形式
1.JSX
语法类似于一个字符串和HTML
元素,但又都不是。
const element = <h1>好好学React</h1>
三,JSX
模板语法
1.JSX
有类似Vue
的模板语法
(1)使用大括号绑定HTML
元素内容:
const element = <h1> call me {maybe} </h1>
(2)使用大括号绑定属性:
const element = <h1 id={num}> hello world</h1>
2.同vue
,JSX
模板语法中可以使用表达式
const element = <h1 id={1+1}> hello world</h1>
3.符合语法的JSX
可以包含子元素,但只能有一个根元素。
四,JSX
编译
1.JSX
的编译过程如下图所示
1.JSX
编译成的React
元素是一个对象。如下图所示。