1 必须在脚手架环境或者webpack环境下使用
浏览器本身是不识别jsx的 需要经过babel的转换才能渲染到页面上
2 React必须导入
jsx的本质实际上还是使用React.createElemenrt去创建元素 所以它始终是使用了React
3 jsx必须有一个根节点
第一种 可以使用一个空 div 来包裹
const element =(
<div>
<div>1</div>
<div>2</div>
</div>
)
预览:
第二种 可以使用一个空 <> 来包裹
const element =(
<>
<div>1</div>
<div>2</div>
</>
)
预览:
4 jsx与js更相似 而不是html
class ==> className 类名的书写方式
for ==> htmlFor
5 jsx里单标签必须使用闭合
<hr></hr>
<hr />
6 jsx里可以随意换行
当有多行jsx的时候 建议换行书写 提高阅读性
使用()包裹一段jsx结构