react总结之jsx是什么，jsx语法规则

文章目录

目录

一、jsx是什么？

二、jsx的优点

三、jsx语法规则

---

一、jsx是什么？

jSX 代表 Javascript XML。它是 Javascript 和 Html 的融合。它是一种类似于 HTML 的标记语法，用于描述应用程序的 UI 外观。总体上使代码易于理解和调试，避免了复杂的 javascript DOM     结   构。我们也可以用纯旧的 JavaScript 编写，这使得开发更快更容易。

二、jsx的优点

优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化

2. JSX 是类型安全的，在编译过程中就能发现错误

3. 使用 JSX 编写模板更简单快速

三、jsx语法规则

1.创建虚拟DOM时，不要写引号；

2.标签中要混入js表达式，要是用{}

3.标签中样式的类名要用className指定

4.标签中的内联样式要用style={{color:'white'}}，注意属性名转为小驼峰

5.只能有一个根标签

6.标签必须闭合

7.关于标签首字母

8、一定注意区分：【js语句(代码)】与【js表达式】

9、jsx注释：注释使用{/**/}

10、条件运算符：使用{}可以做条件判断，但是不能是太复杂的条件判断，只能写表达式

11、属性表达式，jsx支持动态设置属性值用{}包裹

let img = '图片路径';

<img src={img} alt="" />

      12、在jsx语法内的标签一定要闭合如

<img src='' alt = '' />   <br/>

      13、img标签要加上 alt属性