react jsx

基于vue的脚手架  构建一个以webpack 为主的工程化的目录  @vue/cli

"react-app-polyfill": "^1.0.6",处理兼容的

create-react-app 脚手架
   $ npm i create-react-app -g
   $ create-react-app  xxx
   或者
   $ npx create-react-app xxx   【yarn】
----------------
@vue/cli  可以让用户自己创建一个  vue.config.js 来修改默认的webpack配置（简单）
create-react-app 默认把所有的webpack配置项隐藏到node_modules中，如果我们需要修改，我们需要把配置项暴露处理（会webpack的到源码上去修改，相对复杂一些）
   $ yarn eject  
      -> package.json
      -> scripts
      -> config
在react中，开发的组件 xxx.jsx ，在webpack中支持jsx文件的编译和解析（和JS没区别）；这样vscode就可以识别jsx语法了

{JS表达式：执行有返回值的}

jsx 内使用的是函数式编程，不能用forEach 因为他没有返回值，只能map 因为他有返回值

    <></> :Fragment 空文档标记标签

    {} 大括号存放js表达式(执行又返回结果的)

    ->null/undefined 孔

    ->不能直接写对象(对象不是一个合法的元素，除几个特殊情况)

      + 设置行内样式，样式属性值必须是对象，不能是支字符创

      + 数组是可以的(变为没有逗号分隔的字符串)

      + 如果是jsx虚拟DOM对象是可以的

    ->设置样式类名用的是className

https://www.babeljs.cn/repl

第一步 babel转换

第二步通过createElement执行，生成一个虚拟DOM对象(jsx对象/jsx元素)

new 类组件
    getDefaultProps  获取属性默认值
    constructor   getInitialState 初始化状态
    把属性等信息挂载到实例上
    componentWillMount   第一次渲染之前
    render  渲染
    componentDidMount

 函数组件 没有周期函数，没有状态，只有一个属性，还不能改