react高质量笔记3

　　虽然平凡，但时时想着超越平凡  React JSX1. JSX
　　1、JavaScript XML：一种类似于XML的JS扩展语法: JS + XML本质是 React . createElement ( component ,  props , ... children ) 方法的语法糖
　　2、作用: 用来简化创建虚拟DOM
　　3、写法： var   ele  =   Hello JSX! 
　　注意1：它不是字符串, 也不是HTML/XML标签
　　注意2：它最终产生的就是一个JS对象
　　4、标签名任意: HTML标签或其它标签
　　5、标签属性任意: HTML标签属性或其它
　　6.基本语法规则 1.定义虚拟DOM时，不要写引号。 2.标签中混入JS表达式时要用{}。 3.样式的类名指定不要用class，要用className。 4.内联样式，要用style={{key:value}}的形式去写。 5.只有一个根标签 6.标签必须闭合 7.标签首字母 	(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。 	(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
　　7、babel.js的作用
　　1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
　　2) 只要用了JSX，都要加上type=＂text/babel＂, 声明需要babel来处理2. 渲染虚拟DOM(元素)
　　1、 语法:  ReactDOM . render ( virtualDOM ,  containerDOM )
　　2、作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
　　3、参数说明
　　1) 参数一: 纯js或jsx创建的虚拟dom对象
　　2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个p)1. 案例
　　动态展示如下列表
　　
　　【js语句(代码)】与【js表达式】
　　1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：     (1). a     (2). a+b     (3). demo(1)     (4). arr.map()     (5). function test () {}
　　2.语句(代码)：下面这些都是语句(代码)：     (1).if(){}     (2).for(){}     (3).switch(){case:xxxx}
　　结语：
　　放心，闭上眼，睡一觉，反正明天也不一定比今天好。
　　回复`react笔记` ，可以获得全套笔记