Webpack_（第三章）_实现对React框架代码的打包

配置React代码的打包
react代码是一套非常先进的前端框架代码，我们如果想写react的代码，如何进行react代码的打包呢？

在babel 的官网上的preset配置项，执行npm install --sava--dev @babel/preset-react
如果想对react代码打包的话，可以借助babel的preset-react，帮助我们解析react中的语法，使用她我们就可以在项目中编写react的语法结构了

安装react框架
在项目中执行 npm install react react-dom -D 来安装react框架对应的内容

import '@babel/polyfill';

import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
  render () {
    return <div>Hello World</div>
  }
}
ReactDom.render(<App />, document.getElementById('root'))

react代码的含义是：使用react框架创建了一个组件，这个组件会在页面上渲染出div中 HelloWorld这样的内容，ReactDOM会将这个组件挂载到页面上html id为root的DOM节点上，这个节点上就会展示出HelloWorld的内容
运行项目，项目会报错，无法识别语法的内容，所以我们使用webpack结合babel直接打包是不行的，如果想用webpack结合babel打包react框架代码，需要使用npm install --sava--dev @babel/preset-react，并在babelrc中做配置

  "presets": [
    [
      "@babel/preset-env", {
        "useBuiltIns": "usage"
      }
    ],
    [
      "@babel/preset-react"  
    ]
  ]

babel在做打包的时候，转换一下react的语法，preset中的语法转换是有顺序的，会先执行preset-react转换react语法，之后再去执行preset-env，也就是从下往上的执行顺序，从右往左的执行顺序。
重新运行项目，就可以看到react语法可以正常运行了。

加粗样式