技術標籤：reactjses6reactwebpack

WEBPACK+ES6+REACT入門2/7-在專案中使用react以及JSX語法介紹

• 前言
• 開始之前
• 步驟

前言

因本人專案需求，需要進行前端技術學習，特將學習內容整理如下。
因為對前端的技術十分陌生，希望各大神批評指正！
為了方便交流與學習，特將本筆記整理為七大部分，以下內容為第二部分。

開始之前

因webpack各版本配置不同，在執行install命令時，可配置需求所用版本。命令舉例：npm install [email protected] [email protected] -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表示開發和上線，都需要用到）

//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：在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 [email protected] [email protected] [email protected] -D。
7、安裝babel語法，命令為：npm install [email protected] [email protected] [email protected] -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/
               },
          ]
     },

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語法介紹結束。