React简单认识JSX react jss

jsx是js的扩展，让你可以在js文件中书写html标签。react的开发者就非常喜欢jsx的简洁性，并且大部分代码库都使用它。

JSX规则：

1. 只能返回一个根元素

jsx是js的扩展，让你可以在js文件中书写html标签。jsx虽然很像HTML看，但是底层还是被转换为js对象，你不能在一个函数中返回多个对象，所以就需要父元素或者空标签来包裹。

2. 标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />

3. 使用驼峰式命名法给所有大部分属性命名

jsx转换为js时，jsx中的属性也会变为js中的键值对。在项目中常常用到变量的方式读取这些属性，但是js对变量的命名有限制，例如-或者class这样的保留字。例如原来的class类名，在jsx中是className

示例：简单来看一下

// react中
//Fragment就是空标签，它的简写就是<>
//<>推荐写法
export default function Header(){
 return (
  <>
   <h1>头部</h1>
   <span>这是头部内容</span>
  </>
 )
}