React基础1

Hello,React!

虚拟DOM的两种创建方式

使用jsx创建虚拟DOM

使用js创建虚拟DOM

通过以上对比可以发现随着虚拟DOM层级嵌套结构越复杂，原始js的写法也就越复杂，所以react引入jsx的写法就是希望更简单的创建虚拟DOM。而jsx的写法最终还是会经过babel翻译成浏览器可以理解的js写法，所以可以将jsx写法创建虚拟DOM看作是原始js写法创建虚拟DOM的语法糖（可以理解为一种简写形式，一种更便捷的方式）。

jsx语法规则

1.定义虚拟DOM时不要写引号
2.标签中混入JS表达式时要用{}


3.样式的类名指定不要用class，要用className


4.内联样式要用{{key:value}}的形式写


5.虚拟DOM必须只有一个根标签

7.jsx中创建虚拟DOM中的标签不是html标签，而是jsx中的标签，最终babel会将jsx中的标签转换成html中的标签。babel转换jsx标签时会根据标签首字母进行判断：
（1）若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错


（2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

练习：动态展示列表