3:react 使用babel启用jsx

原因

import React,{Component} from 'react'
import reactDOM from 'react-dom'

const myh1 = React.createElement('h1',{id:"666"},'这是一个h1');

//这种麻烦，使用html是最好的标记语言

 const myh1 = 
这是一个div标签

react做了一层封装，
但js文件中默认不能写html这种标记，在js中，混合写入类似于html的语法，叫jsx语法
安装babel解决,可将myh1转换成React.createElement语法。

reactDOM.render(
    myh1,
    document.getElementById("root")
);

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env  babel-preset-stage-0 babel-preset-react -D

> bable-loader,babel-core 会出版本问题，请见babel版本问题 babel-loader7.x 配 babel-core 6.x
> 使用 `npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

.babelrc:

{
  "presets":["env","stage-0","react"],
  "plugins":["transform-runtime"]
}

webpack.config.js

 module:{//第三方模块
        rules:[
            {test:  /\.jsx|.js$/, use:'babel-loader',exclude:/node_modules/}
        ]
    }