React入门 - 认识react与jsx语法规则day01

React：Facebook开源，用于构建用户界面的Javascript库
解释：是一个将数据渲染为HTML视图的开源Javascript库

React全家桶： React-Router(路由)、PubSub(消息管理)、Redux(集中式状态管理)、Ant-Design(UI组将库)

1.React特点

（1）采用组件化模式、声明式编码，提高开发效率及组件复用率

（2）在React Native中可以使用React语法进行移动端开发

（3）使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

2.虚拟DOM与真实DOM

（1）虚拟DOM本质是object类型的对象

（2）虚拟DOM比较"轻"(属性少)，真实DOM比较"重"
         因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性

（3）虚拟DOM最终会被React转化为真实DOM，呈现在页面上 

3.jsx语法规则

（1）定义虚拟DOM时，不要写引号

（2）标签中混入JS表达式时要用{ }

（3）样式的类名指定要用className

（4）内联样式,要用style={{ key: value}}的形式去写

（5）只有一个根标签

（6）标签必须闭合

（7）标签首字母
        a.若小写字母开头，则将该标签转为html中同名元素，无则报错

        b.若大写字母开头，react就去渲染对应组件，无则报错

注意:区分【JS代码】与【JS表达式】

（1）表达式:会产生一个值，可以放在任何一个需要值的地方

（2）代码(语句）

4.jsx小练习：动态展示列表

 效果图如下：