JSX:
1.全称:JavaScriptXML,
2.react定义的一种类似于XML的JS扩展语法:XML+JS
3.作用:用来创建react虚拟DOM(元素)对象
var ele=
Hello,world!
注意:他不是一个字符串,也不是HTML/XML,它最终产生的就是一个JS对象
4.标签名/属性任意:HTML标签/属性或者其他标签/属性
5.基本语法规则:
遇到 < 开头的代码 以标签语法解析
遇到 { 开头的代码 以JS语法解析;标签中的JS必须用{}包裹起来
6.babel.js的作用
浏览器不能直接解析JSX代码,需要babel转译为JS代码才能运行;
在使用JSX代码之前加type=“text/babel”声明
将数据数组转化为标签数组:
work2//将数据数组转换为标签数组,使用map方法
const ul=(
- {names.map((name,index)=>
- {name})}
);
reactDom.render(ul,document.getElementById("example1"))
这是个例子
效果: