关于JSX，我在官网上截了一段拿过来展示：

jsx的一大特点就是很方便，对比以下jsx和js的截图，当标签嵌套层数过多的时候，jsx的优点就体现出来了

jsx和js渲染的效果是一样的

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

1、以案例的形式学习之-------如果页面想展示数组，且是动态获取的。效果如下： 第一步：先模拟数据，先在页面中看下效果 页面展示： 这样的效果肯定不对 const data = [< li > a < /li>, < li >b< /li >, < li >c< /li >] 如果返回的数据直接带标签包裹，肯定就能直接展示了。 但是后端返回的都是纯数据，不会有后台会这样返数据的。

假如我不用数组，我用对象的形式试一下 页面直接不展示了，打开控制台，报错如下： 对象类型不允许作为React的合法节点，只找到了key，如果你想遍历数组，请使用array代替。

多遇到报错，对学习多多益善，遇到的多了，都会变成自己的经验

2、先用for循环来展示数据，这里出现了红色波拉线 出现的原因是：这里用了js语句的原因 关于表达式和语句的区别：

1 js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方 如：1、a 一个变量名就是一个表达式，只不过如果没有提前定义的话，会报错a未定义 2、 a+b 当进行加减乘除运算的时候都会返回一个值 3、demo（1） 函数调用，有返回值会返回返回值，没有定义返回值也会返回underfiend 4、arr.map() 数组的map方法或其他有返回值的方法，加工数组后会返回一个新的数组 5、function demo（）{} 定义一个函数的时候，拿变量接，也会有返回值，返回值就是函数本身 2、js语句也称为js代码，只控制代码走向，不产生返回值 1、if（）{} 2、for（）{} 3、switch（）{case：xxx}

正确写法： 页面效果： 其实还有个点要注意，控制台出现一个报错，每一个节点都需要唯一的key 所以数组循环的时候，别忘了key