webpack ---> React to use in the project

Description:

Divided into two steps:

1. First, import reactand react-dom: to ensure the creation and use of virtual DOM
2. Use babel转码器: Because of too many DOM structure, each use React.createElement create virtual DOM development will bring a lot of pressure, so the use of writing html by babelconverting to React grammar transcoder, can greatly improve development efficiency

• Project source code

---

Use react in the project

1. Run cnpm i react react-dom -Sthe installation package

• react: designed to create virtual components and DOM, while the life cycle of components in this package
• react-dom: specifically DOM manipulation, the most important application scenarios, is ReactDOM.render () [ps]:. dom package react by creating an in-memory it is necessary to get the react-dom-memory DOM
• -S: On behalf of the project from development to on-line package should be used
• -D: Used when development tools

2. In the index.html page, create a container:

<!-- 容器,将来使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中 -->
<div id="app"></div>

3. Import packages:

import React from 'react'
import ReactDOM from 'react-dom'

4. Create a virtual DOM elements:

const myh1 = React.createElement('h1', { title:'啊,栗子', id: 'myh1'}, '糖炒栗子')

5. Rendering:

ReactDOM.render(myh1, document.getElementById('app'));

---

Use template string

1. For complex UI structure, the use of React.createElement create virtual DOM wording will be very complicated.
2. HTML is the best markup language.
3. Think, in the form of handwritten labels to create a virtual DOM.
   If the direct use of the following forms of writing, will get an error:
   [writing]: const mydiv = <div id="mydiv" title="div aaa">这是一个div元素</div>
   [error]: You may need an appropriate loader to handle this file type
   [reason]: In the js file, the default can not write HTML-like tags, otherwise packed fail
   [solution]: You can use a variety of packages to convert these labels in the JS.

---

JAX syntax:

• JS in JS, HTML-like syntax for mixed written, in line with the XML specification
• JSX nature of grammar, or at run time, is converted into React.createElement form transcoder to perform
  [interview]: JSX is rendered directly in the page Well no, it will be converted to React.createElement through the transcoder? form of execution

---

Babel to use the JSX converted to DOM can run in the browser

1. How to enable jsx grammar?

• Install babelplug-ins
  • run cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • run cnpm i babel-preset-env babel-preset-stage-0 -D
• Installation packages can be identified jsx grammar babel-preset-react
  • run cnpm i babel-preset-react -D
• In webpack.config.jsadd matching rules.
  • In webpack, the default package can only handle .jsextension type of file
  • Like .png、.vuenot take the initiative process
  • So you want to configure third-party loader

// webpack.config.js
module:{
  rules:[
    { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
  ]
}

• Add .babelrcprofile

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