react-02 JSX

1.额外的笔记：

4.关于虚拟DOM：
-本质是OBject类型的对象（一般对象）
-虚拟DOM比较“轻”，其属性方法比较少，真实DOM比较“重”。
-虚拟DOM最终会被React转化为真实DOM呈现在页面上
5.jsx规则
-定义虚拟DOM时，不要写引号
-标签中混入JS表达式时要用{} < h1>{data}< /h1>
-样式的类名指定不要用class，要用className < h1 className = {}>{data}</ h1>
-内联样式要用style = {{key:value}}的形式去写， < h1 style = {{color:‘red’}}>{data}</ h1 >
-只能有一个根标签
-标签必须闭合
-标签首字母：
（1）若小写字母开头，则将该标签转为HTML1中同名元素。若HTML
中无该标签对应的同名元素，则报错
（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
6.表达式与js语句(代码)
-表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方（产生值）
-代码：逻辑（不产生值），比如：if（）for()

2.jsx的小案例：我们要显示如下图的内容：

分析：一个会的标题，和一个ul
代码：

 <div id="test">
    
  </div>
  <!-- 引入核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <!-- /*此处一定要写babel，用于告诉浏览器我用的是jsx，靠babel给我翻译*/ -->
  <script type="text/babel">
    //1.创建虚拟DOM
    let arr = ['Angular','React','Vue']
    console.log(arr);
    const VDOM = (
     <div>
      <h2>前端JS框架列表</h2>
      <ul>{arr.map((item , index) => {return(<li key = {index}>{item}</li>)})}</ul>
      </div>
    )
    
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM , document.getElementById('test'))//render（）有两个参数，一个是虚拟dom数据，第二个是渲染节点
  </script>

这里值得注意的是li的key值，key值是就相当他的身份证，唯一的，所以用其索引当其key值，