React中安装babel识别jsx语法

在js文件中，默认不能写 这种类似于 HTML的标记； 否则打包会失败； 所以可以使用babel来转换 这些JS中的标签

**最基本的创建虚拟DOM元素**
<h1 id="myh1" title="this is a h1">这是一个大大的h1</h1>
const myh1 = React.createElement('h1',null或者一个对象{id:"myh1",title:'this is a h1'},‘这是一个大大的h1’)
ReactDom.render('myh1',document.getElementById('app'))

**jsx语法（用时需要）**
const mydiv = <div id="mydiv" title="div aaa">这是一个div元素</div> 
如果不下载babel的话这中html语法在js里面是不允许的，直接报错  

这种在js中，混合写入类似于HTML的语法，叫做jsx语法；符合XML规范的JS;
jsx语法的本质，还是在运行的时候用balbe转换成了 React.creatElement的形式

1：安装bable能够识别转换jsx语法的

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react  -D(负责转换jsx语法把它转换为React.createElement这种语法的)

2：安装好之后在webpack.config.js里面进行配置

3：在根目录创建.babel文件

配置是好的，但是在运行的时候，报错，如下图

图上大致就是用一个合适的loder解决这个问题， 但是现在loader已经都下载和配置好了，目前正在解决