開始之前

因webpack各版本配置不同，在執行install命令時，可配置需求所用版本，命令舉例：npm install react@16.2.0 react-dom@16.2.0 -S，此命令為開發和上線環境下（-S）安裝對應版本的react和react-dom，實際安裝時，各版本如下所示，

 "react": "^16.2.0",
 "react-dom": "^16.2.0"
 "babel-core": "^6.26.0",
 "babel-loader": "^7.1.4",
 "babel-plugin-transform-runtime": "^6.23.0",

步驟

1、運行命令npm install react react-dom -S，安裝react和react-dom，(-S表示開發和上線，都需要用到）
react：用以創建組件和虛擬dom，同時此包包含了組件的生命周期
react-dom：用以進行dom操作，最主要的場景：ReactDom.render()
2、在index.js中編碼如下：

//1、引入react和react-dom，接受的成員名稱，必須這么寫
import React from 'react' //創建組件、虛擬dom元素、生命周期
import ReactDOM from 'react-dom'//把創建好的組件和虛擬dom放到頁面展示

//2、創建虛擬dom元素  
//引數1：創建元素型別，字串，表示元素名稱
//引數2：物件或者null，表示當前dom元素屬性
//引數3：子節點，包括其他虛擬dom或文本子節點
//引數n：其他子節點
//html寫法參考：
//<h1 id='myh1' title='this is a h1'>這是h1</h1>
const myh1 = React.createElement('h1',null,'這是h1')

//3、使用reactdom把虛擬dom渲染到頁面上
//引數1：要渲染的虛擬dom
//引數2：指定頁面上一個容器
   ReactDOM.render(
 	myh1,
   document.getElementById('app')
   )

3、此時，<h1>標簽并無屬性，原因：在index.js代碼第25行，在創建虛擬dom元素時，引數二dom元素屬性傳遞的值為null，<h1>標簽并無屬性，chrome顯示如下圖所示：

4、將引數二修改為接受的物件，更改index.js代碼如下：

const myh1 = React.createElement(
'h1',
{id:'myh1',title:'this is a h1'},
'這是h1')

此時，頁面中只有一個<h1>，現在需求在<h1>外面包裹一層<div>，方法為再添加一個虛擬dom元素，并完成兩個虛擬dom屬性的嵌套關系，
5、在index.js中修改代碼如下：

//1、引入react和react-dom，接受的成員名稱，必須這么寫
import React from 'react' //創建組件、虛擬dom元素、生命周期
import ReactDOM from 'react-dom'//把創建好的組件和虛擬dom放到頁面展示

//2、創建虛擬dom元素  
//引數1：創建元素型別，字串，表示元素名稱
//引數2：物件或者null，表示當前dom元素屬性
//引數3：子節點，包括其他虛擬dom或文本子節點
//引數n：其他子節點
//html寫法參考：
//<h1 id='myh1' title='this is a h1'>這是h1</h1>
const myh1 = React.createElement(
   'h1',
   {id:'myh1',title:'this is a h1'},
   '這是h1')

const mydiv = React.createElement（
   'div',
   null,
   '這是div',
   myh1  //追加節點，完成虛擬dom元素的嵌套
）
//3、使用reactdom把虛擬dom渲染到頁面上
//引數1：要渲染的虛擬dom
//引數2：指定頁面上一個容器
  ReactDOM.render(
	//myh1，
     mydiv, //將嵌套后的div渲染到頁面上
     document.getElementById('app')
  )

渲染頁面上的dom結構，最好的方式是通過html代碼實作，
但是在以上操作時，都是在js檔案中實作，js檔案不允許使用html代碼標記，存在打包失敗的問題，
在react中，允許使用，實作方式是使用babel轉換js標簽，

jsx

jsx：在js中混合寫入類似html的語法，即符合xml規范的js，jsx語法的本質：在運行時，被轉換成react.createElement形式，
為練習以上描述內容，新建index.js，代碼如下：

 //1、引入react和react-dom，接受的成員名稱，必須這么寫
import React from 'react' //創建組件、虛擬dom元素、生命周期
import ReactDOM from 'react-dom'//把創建好的組件和虛擬dom放到頁面展示

//2、創建虛擬dom元素
const mydiv = <div id="mydiv" title = "this is a div">這是一個div</div> 

//3、使用reactdom把虛擬dom渲染到頁面上
//引數1：要渲染的虛擬dom
//引數2：指定頁面上一個容器
   ReactDOM.render(
	  mydiv, //將嵌套后的div渲染到頁面上
	  document.getElementById('app')
   ) 

6、安裝babel等插件，命令為：npm install babel-core@6.26.0 babel-loader@7.1.4 babel-plugin-transform-runtime@6.23.0 -D，
7、安裝babel語法，命令為：npm install babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-stage-0@6.24.1 -D，
8、在webpack.config.js檔案的module中添加loader等所有第三方模塊配置規則，代碼如下：

module.exports={
     mode:'development',//development:開發環境 production：產品環境
     //webpack4.x中，有一個很大的特性：約定大于配置 約定的默認打包入口路徑為：src->index.js 
     //所以將index.html檔案重命名為index.js
     plugins:[
          htmlWebPackPlugin
     ],
     module:{//所有第三方模塊的配置規則
          rules:[//第三方匹配規則
               {
                 test:/\.jsx?/,
                 use:'babel-loader',
                 exclude:/node_modules/
               },
          ]
     },

配置.babelrc

9、專案根目錄下添加babel的組態檔.babelrc，并添加如下配置：

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

10、現在可在頁面中添加html語法標記，

 //1、引入react和react-dom，接受的成員名稱，必須這么寫
import React from 'react' //創建組件、虛擬dom元素、生命周期
import ReactDOM from 'react-dom'//把創建好的組件和虛擬dom放到頁面展示

//2、創建虛擬dom元素
const mydiv = <div id="mydiv" title = "this is a div">
	這是一個div
	<h1>這是一個h1</h1>
	</div> 

//3、使用reactdom把虛擬dom渲染到頁面上
//引數1：要渲染的虛擬dom
//引數2：指定頁面上一個容器
   ReactDOM.render(
	  mydiv, //將嵌套后的div渲染到頁面上
	  document.getElementById('app')
   ) 

第二部分專案中使用react以及JSX語法介紹結束，