Webpack_ (Chapter III) _ to achieve packaged React framework code

React configuration code package
react Code is a very sophisticated front-end framework code, if we want to write code to react, how to react to package code it?

In the preset configuration items official website of babel, do npm install --sava--dev @babel/preset-react
if you want to react packaging code, you can help babel of preset-react, to help us resolve react syntax, using her we can write grammatical structures react in the project as

Installation react frame
performed in the project npm install react react-dom -Dto install the frame content corresponding to 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'))

meaning react code is: Use react framework to create a component, this component will render a div HelloWorld such content on the page, ReactDOM will mount the component onto the page html id to the root of the DOM node, the node HelloWorld will demonstrate the content
to run the project, the project will complain, we do not recognize what syntax, so we use webpack combine direct babel package is not enough, if you want to combine with webpack babel package react framework code, you need to use npm install --sava--dev @babel/preset-react, and babelrc to do configuration

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

In doing babel package when it react syntax conversion, preset syntax conversion is in order, will first perform the preset-react convert react grammar, then go execute preset-env, which is up from the bottom of the order of execution , the order of execution from right to left.
Run the project again, you can see react syntax can run normal.

Bold Style