React全家桶-jsx语法（3）

目录

一、定义

二、jsx语法规则

三、注意区分js语句（代码）和js表达式

四、注意事项

---

一、定义

       jsx是一种JavaScript语法扩展（全称：JavaScript XML），是基于ECMAScipt新特性的，React定义的一种带属性树结构的语法。
       运用于React架构中，其格式比较像是模版语言，但事实上完全是在JS内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
       本质上，JSX为我们提供了创建React元素方法：
               React.createElement(component, props, ...children)
的语法糖。

二、jsx语法规则

1. 定义虚拟DOM时，不要写引号；
2. 标签中混入JS表达式时，要用{}；
3. 样式的类名指定不要用class，要用className；
4. 内联样式要用style={{key:value}}的形式；
5. 只有一个根标签；
6. 标签必须闭合；
7. 标签首字母：
          1）若小写字母开头，则将该标签转为HTML中同名元素，若HTML中无该标签对应的同名元素，则报错；
          2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

三、注意区分js语句（代码）和js表达式

       js语句（代码）：

1. if(){}
2. for(){}
3. switch(){case:xxxx}

       js表达式：

1. 变量名
2. 算数表达式
3. 属性访问表达式
4. 函数调用表达式、方法
5. 函数声明
6. 函数定义表达式
7. 关系表达式
8. 逻辑表达式

四、注意事项

1. 使用JSX时要引入React库；
2. 自定义组件首字母一定要大写；
3. 元素标签名不能使用表达式；
4. 内联设置style属性时要两层大括号。