jsx部分

jsx语法规范：

1. 定义虚拟dom，不要写引号包裹
2. 标签混入 js表达式 需要用{}包裹
3. 样式类名需要使用className
4. 内联样式需要写在{}中，以{key:value}形式描述
5. 只能有一个根标签
6. 标签必须闭合
7. 标签首字母大写为组件、小写为html元素

...
<script type="text/babel">
  const myClass= "lpl"
    const msg = "hello,world"
    //虚拟dom
    const VDOM = (
      <div className={myClass}>
        <span style={{color:'red',fontSize:'20px'}}>{msg}</span>
      </div>
    }
    //渲染虚拟DOM
    ReactDOM.render(VDOM,document.getElementById("container"))
  </script>

<script type="text/babel">
  /**
  js语句和js表达式
  1. 表达式：一个表达式会产生一个值，可以被放在任何一个需要值的地方
      a) a
      b) arr.map(function(){})
      c) a+b
      d) function test(){}
      e) demo(1)
  2.语句
      (1)if(){}
      (2)for(){}
      (3) switch(){}
      (4) while{}
  **/

    //mock 数据
    const data = ['Angular','React','Vue' ]
    //创建虚拟dom
    const VDOM = (
      <div>
        <h1>前端js列表</h1>
        <ul>
          {
            data.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
    //渲染虚拟DOM
    ReactDOM.render(VDOM,document.getElementById("container"))
</script>

模块与组件、模块化与组件化的理解

1. 模块

提供特定功能的js程序，一般就是一个js文件
业务逻辑负责，代码越来越多
复用js/简化js

2. 组件

来实现局部功能效果的功能集合
一个界面功能复杂
复用编码，提高运行效率

3. 模块化 AMD CMD

4. 组件化 VUE REACT