創(chuàng)建項目并啟動

1. 全局安裝 npm install -g create-react-app
2. 切換到想創(chuàng)建項目的目錄，使用命令：create-react-app 項目名稱

?

3. cd 項目文件夾, npm start 啟動項目

創(chuàng)建項目遇到的問題

1. create-react-app : 無法加載文件

?

解決辦法：

1.以管理員身份打開windows PowerShell

2.輸入set-ExecutionPolicy RemoteSigned，輸入A 回車，再次輸入get-ExecutionPolicy發(fā)現(xiàn)出現(xiàn)RemoteSigned就可以了！

功能界面的組件化編碼流程

1. 拆分組件：拆分頁面，抽取組件

2. 實現(xiàn)靜態(tài)組件：使用組件實現(xiàn)靜態(tài)頁面效果

3. 實現(xiàn)動態(tài)組件：

4. 1. 動態(tài)顯示初始化數(shù)據(jù)

   2. 1. 數(shù)據(jù)類型
      2. 數(shù)據(jù)名稱
      3. 保存在哪個組件？

   3. 交互

腳手架配置代理

方法一：在package.json中追加如下配置

"proxy":"請求的地址"  
"proxy":"http://localhost:5000"   

缺點：不能配置多個代理

工作方式：上述方式配置代理，當(dāng)請求了3000不存在的資源時，那么該請求會轉(zhuǎn)發(fā)給5000 （優(yōu)先匹配前端資源）

方法二：創(chuàng)建代理配置文件

1. 創(chuàng)建代理配置文件：在src下創(chuàng)建文件 setupProxy.js 使用commonjs語法
2. 編寫setupProxy.js配置具體代理規(guī)則：

const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要轉(zhuǎn)發(fā)的請求(所有帶有/api1前綴的請求都會轉(zhuǎn)發(fā)給5000)
      target: 'http://localhost:5000', //配置轉(zhuǎn)發(fā)目標(biāo)地址(能返回數(shù)據(jù)的服務(wù)器地址)
      changeOrigin: true, //控制服務(wù)器接收到的請求頭中host字段的值
      /*
          changeOrigin設(shè)置為true時，服務(wù)器收到的請求頭中的host為：localhost:5000
          changeOrigin設(shè)置為false時，服務(wù)器收到的請求頭中的host為：localhost:3000
          changeOrigin默認(rèn)值為false，但我們一般將changeOrigin值設(shè)為true
      */
      pathRewrite: {'^/api1': ''} //去除請求前綴，保證交給后臺服務(wù)器的是正常請求地址(必須配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

說明：

1.優(yōu)點：可以配置多個代理，可以靈活的控制請求是否走代理

2.缺點：配置繁瑣，前端請求資源時必須加前綴

問題：react setupProxy.js導(dǎo)致項目無法啟動

更換為高版本 http-proxy-middleware

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react腳手架已經(jīng)安裝
module.exports = function(app){
app.use(
    proxy.createProxyMiddleware('/api',{ //遇見/api1前綴的請求，就會觸發(fā)該代理配置
        target:'http://localhost:5000', //請求轉(zhuǎn)發(fā)給誰
        changeOrigin:true,//控制服務(wù)器收到的請求頭中Host的值
        pathRewrite:{'^/api':''} //重寫請求路徑，下面有示例解釋
    }),
    proxy.createProxyMiddleware('/api2',{
        target:'http://localhost:5001',
        changeOrigin:true,
        pathRewrite:{'^/api2':''}
    }),
   )
}

消息訂閱-發(fā)布機(jī)制

1. 工具庫：PubSubJS

2. 下載：npm install pubsub-js -save

3. 使用：

4. 1. import PubSub from ‘pubsub-js’
   2. 使用：PubSub.publish()發(fā)布，PubSub.subscribe()訂閱

5. 要在組件的componentWillUnmount中取消訂閱

fetch發(fā)送請求（關(guān)注分離的設(shè)計思想）

1. 概念：是一種全局方法，提供一種簡單，合理的方法跨網(wǎng)絡(luò)請求資源。請求是基于Promise，是專門為了取代傳統(tǒng)的xhr而生的。
2. 使用語法：

fetch(url,options).then((response)=>{
 //處理http響應(yīng)
  },(error)=>{ 
  //處理錯誤
  } )

3. 讀取內(nèi)容方法：response對象根據(jù)服務(wù)器返回不同類型數(shù)據(jù)，提供了不同的讀取方法
   response.text() 得到文本字符串
   response.json() 得到j(luò)son對象
   response.blob() 得到二進(jìn)制blob對象
   response.formData() 得到formData對象
   response.arrayBuffer() 得到二進(jìn)制arrayBuffer對象

4. fetch默認(rèn)不帶cookie，傳遞cookie時，必須在header參數(shù)內(nèi)加上credentials:‘include’，才會像xhr將當(dāng)前cookie帶有請求中文章來源地址http://www.zghlxwxcb.cn/news/detail-617384.html

到了這里，關(guān)于React從入門到實戰(zhàn)-react腳手架，消息訂閱與發(fā)布的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！