通過對webpack4.x構建專案的基本瞭解。使用webpack4.x和react.js構建react專案步驟：

1. webpack4.x搭建專案準備

2. react專案搭建：

• (1)、執行cnpm i react react-dom -S安裝包
  
  • react：專門用於建立元件和虛擬DOM的，同時元件的生命週期都在這個包中
  • react-dom：專門進行DOM操作的，最主要的應用場景，就是ReactDOM.render()
• (2)、在index.html頁面中，建立容器

<!-- 建立一個容器，將來渲染的虛擬DOM，會放到容器內顯示 -->
<div
 
 id="app"></div>

• (3)、匯入包

// 1. 這兩個匯入時候，接收的成員名稱，必須這麼寫
import React from 'react'   // 建立元件、虛擬dom元素，生命週期
import ReactDOM from 'react-dom'    // 把建立好的元件和虛擬dom放到頁面上展示的

• (4)、建立虛擬DOM元素

// 2. 建立虛擬DOM元素
// 引數1：建立的元素的型別，字串，表示元素的名稱
// 餐數2：是一個物件或null,表示當前這個DOM元素的屬性
// 引數3：子節點（包括其他 虛擬DOM 獲取 文字子節點）
// 引數n: 其他子節點
 

// <h1 id="myh1" title="this is a h1">這是銀行股IE大大的h1</h1>
var myh1 = React.createElement('h1',{id: 'myh1', title: 'this is a h1'},'這是銀行股IE大大的h1');

• (5)、渲染：

// 3. 使用ReactDOM把虛擬DOM渲染到頁面上
// 引數1：要渲染的那個虛擬DOM元素
// 引數2：指定頁面上的DOM元素放到一個容器,接收的是一個dom元素而不是一個選擇器
ReactDOM.render(myh1,document.getElementById('app'
 
));

PS：在執行完 npm run dev 時，頁面會渲染相應的效果，但是會報以下錯誤：

出現這個問題的原因是因為在index.html中引入的打包的main.js檔案應該放到頁面最後，不應該放到頭部。

3. JSX的安裝和使用

• 什麼是JSX語法：就是符合xml規範的JS語法；（語法相對來說，要比HTML嚴謹的多）
• 如何啟用JSX語法？
  
  • 安裝babel外掛
    
    • cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    • cnpm i babel-preset-env babel-preset-stage-0 -D
  • 安裝能夠識別轉換的JSX語法的包babel-preset-react
    
    • cnpm i babel-preset-react -D
  • 新增.babelrc配置檔案

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

• JSX語法的本質：並不是直接把jsx渲染到頁面上，而是內部先轉換成了createElement形式，再渲染的；
  
  • 新增babel-loader配置項：

module.exports= {
    module: { // 所有第三方模組的配置規則
        rules: [ // 第三方匹配規則
            {test: /\.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}
        ]
    }
}

• 建立虛擬dom的JSX寫法

// var myDiv = React.createElement('div',{id: 'mydiv', title: 'div title'},'這是一個div元素');
const myDiv = <div id="mydiv" title="div aa">這是一個div元素<h2>這是一個大大的h2標籤</h2></div>