JSX（ JavaScript XML）简介及语法规则

• 1、JSX简介
• 2、JSX的作用
• 3、jsx语法规则
• 4、babel.js的作用
• 5、jsx的练习

1、JSX简介

  全称: JavaScript XML，是一个JavaScript的语法扩展。

2、JSX的作用

  用来简化创建虚拟DOM

   写法：var ele =

Hello JSX!

  注意：
  1、它不是字符串, 也不是HTML/XML标签
  2、它最终产生的就是一个JS对象

3、jsx语法规则

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入JS表达式时，要用{ }{myData}
3. 样式的类名指定不要用class，要用className(避开es6中的class类)。className="title"
4. 内联样式要用{{style:value}}的形式，在css中带有-的属性，取消-转换为小驼峰。style={{color: "red", fontSize: "30px"}}
5. 虚拟DOM只有一个根标签
6. 标签必须闭合
7. 标签首字符
     （1）若小写字母开头，则将该标签转为html中同名元素，躲在html中无该标签的同名元素，则报错；
     （2）若大写字母开头，react就去渲染对应的组件，多组件没有定义，则报错。
8. 标签中的注释要写在 {} 中；
9. 当变量是 Number、String 类型时，可以直接显示；
10. 当变量是 Number、String 类型时，可以直接显示；
11. 对象类型不能作为子元素（not valid as a React child）
12. 数组会自动展开；

代码示例：

运行结果：

4、babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

5、jsx的练习

注意：1、js表达式和js语句的区别；2、只能循环数组；3、循环绑定key，key需要唯一（绑定下标有一定的问题，后面会逐步学习解决）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！