今天的码农女孩开始学习react的知识

react介绍
    react是一个构建用户界面的js库，注重于ui，是mvc模式的v，表示视图层
    特点：代码开源，有较高的性能，代码逻辑简单
    优点：
    1.声明式设计，采用声明范式，可以轻松描述应用
    2.高效：通过dom的模拟器，最大限度的减少与dom操作
    3.灵活性：存在已知的库，与其他框架很好配合
    4.jsx：它是js的一个扩展语法，可以把js的对象渲染成页面上的标签
    5.组件：构建组件可以使代码得到复用，减少代码写作，提高浏览器加载速度
    6.单项响应数据流：比js传统绑定数据更简单
    语法：
    ReactDOM.render(
                <h1>hello world</h1>,
                document.getElementById("app")
     )
    注意：
    1.script标签里要写type="text/babel"
    2.创建的虚拟dom不要加单双引号，不是字符串类型，而是js的对象类型
    3.如果要创建多个虚拟dom，定义小括号括起来，并且只有一个大外包

jsx语法：
      jsx用来替代常规的js语法，可以用html语法在js里定义对象，让虚拟dom写作简单，减少函数定义，执行速度快，让类型更安全，编译过程就能发现错误
                <h1>{str}</h1> 获取变量
                <h2>{1+2+3}</h2> 定义表达式
                <h3>{flg?'yes':'no'}</h3> 定义三元表达式
                <h3>{str.replace("x","%")}</h3> 定义函数
    写注释
         {/*多行注释*/}需要加上花括号，否则输入到页面上
    样式
    1.定义className代替class
       <h3 className="big"></h3>
    2.虚拟dom定义行内样式 用两个花括号
       <p style={{color:"red",fontSize:"20px"}}>文字效果</p>
    3.切换class名称，用三元表达式
       <h2 className={flg?'box1':'box2'}>ssdgggkgkk</h2>

判断
          1.三元表达式判断
        <h3>{flg?'yes':'no'}</h3>
          2.if判断
        var num=6
                var dom=""
                if(num%2==0){
                        dom=<a href="#">偶数</a>
                }
                else{
                       dom=<span>奇数</span>
            }
        ReactDOM.render(
                         （<div>{dom}</div>）,
              document.getElementById("app")
        ）
    循环
          var arr=["a","s","d","f","g","h"]
                 var lis=arr.map(function(value,index,arr){
                           return <li key={index}>{index}-{value}</li>
                })
          ReactDOM.render(
                         （<div><ul>{lis}</ul></div>）,
              document.getElementById("app")
          ）