JSX

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它可以让我们在 React 中创建元素更加简单，并且保留 HTML 代码的结构更直观，提高开发效率。

注意：JSX 是 JavaScript 的语法扩展，无法在浏览器中直接使用，在 create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 JavaScript 的标准语法。

JSX 语法规则

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时要用{}。
3. 类名指定不能用 class，要用 className。label 标签的 for 属性要写成 htmlFor
4. 内联样式，要用style={{key:value}}的形式去写。
5. 必须只能有一个根标签，可以使用 <> 幽灵标签，其实是 简写
6. 标签必须闭合，可以写单标签，例
7. 标签首字母
   • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
   • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
8. 如果 JSX 有换行，最好使用 () 包裹

JSX 使用

使用表达式

• 进行运算
• 三元运算
• 使用函数
• 使用 JSX
• 使用注释，格式{/* 注释*/}

条件渲染

使用分支语句 if/else 完成条件渲染
使用 三元运算符 完成条件渲染
使用 逻辑运算符 完成条件渲染

列表渲染

style

• style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串
• React 会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加

JSX 的使用基本就这些内容了，我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。