React自学 11.19

 11.19日

三 使用React.createElement实现虚拟DOM嵌套

    1. 渲染页面上的DOM结构，最好的方式就是写HTML代码，React实现了在JS中写HTML的功能

    //HTML就是最优秀的标记语言

    //所以我们不想用上面的API，而想直接写HTML代码

   所以出现了下面这样的  

   const mydiv=<div id="div" title="div  aaa">这是一个div元素</div>

   但是这条语句，并不符合JS的语法，

   JS文件中，默认不能写这种类似于HEML的标记；否则 打包失败；

   但是我们可以使用babel来转换这些JS中的标签；

   这种在JS中，混合写入类似于HTML的语法，叫做JSX语法；符合XML规范的JS；

  注意：JSX语法的本质，还是在运行的时候，被balbel转换成了React.creatElement（）这样的形式

 

  2. 如何启动JSX语法？

   安装babel插件

    ·运行cnpm install babel-core babel-loader babel-plugin-transform-runtime -D

    ·运行cnpm install babel-preset-env babel-preset-stage-0 -D

   安装能够识别转换JSX语法的包 babel-preset-react

    ·运行 cnpm install babel-preset-react -D