react-02

1. 使用React腳手架建立一個React應用

1). react腳手架

1. xxx腳手架: 用來幫助程序員快速建立一個基於xxx庫的模板項目
	* 包含了全部須要的配置
	* 指定好了全部的依賴
	* 能夠直接安裝/編譯/運行一個簡單效果
2. react提供了一個專門用於建立react項目的腳手架庫: create-react-app
3. 項目的總體技術架構爲: react + webpack + es6  + babel + eslint

2). 建立項目並啓動

npm install -g create-react-app
create-react-app react-app
cd react-app
npm start

3). 使用腳手架開發的項目的特色

模塊化: js是一個一個模塊編寫的
組件化: 界面是由多個組件組合編寫實現的
工程化: 實現了自動構建/運行/打包的項目

4). 組件化編寫項目的流程

拆分組件
實現靜態組件--->靜態頁面
實現動態組件
	動態顯示初始化數據
	交互

2. app1: 實現一個評論管理功能

1). 拆分組件:

應用組件: App
添加評論組件: CommentAdd
評論項組件: CommentItem
評論列表組件: CommentList

2). 肯定組件的state和props:

App: 
	* state: comments/array
CommentAdd
	* state: username/string, content/string
	* props: add/func
commentList
  	* props: comments/array, delete/func
CommentItem
	* props: comment/object, delete/func, index/number

3). 編寫靜態組件

拆分頁面
拆分css

4). 實現動態組件

1. 動態展現初始化數據
  * 初始化狀態數據
  * 傳遞屬性數據
2. 響應用戶操做, 更新組件界面
  * 綁定事件監聽, 並處理
  * 更新state

3. app2: 實現github用戶搜索功能

1). react應用中的ajax請求

axios: 包裝XMLHttpRequest對象, promise風格, 支持瀏覽端/node服務器端
fetch: 瀏覽器內置語法, promise風格, 老瀏覽器不支持, 能夠引入fetch.js兼容包

2). 拆分組件

App
	* state: searchName/string
Search
  	* props: setSearchName/func
List
  	* props: searchName/string
  	* state: firstView/bool, loading/bool, users/array, errMsg/string

3). 編寫組件

編寫靜態組件
編寫動態組件
	componentWillReceiveProps(nextProps): 監視接收到新的props, 發送ajax
	使用axios庫發送ajax請求

4. 組件間通訊總結

1). 方式一: 經過props傳遞

共同的數據放在父組件上, 特有的數據放在本身組件內部(state)
通常數據-->父組件傳遞數據給子組件-->子組件讀取數據
函數數據-->子組件傳遞數據給父組件-->子組件調用函數
問題: 多層傳遞屬性麻煩, 兄弟組件通訊不方便

2). 方式二: 使用消息訂閱(subscribe)-發佈(publish)機制: 自定義事件機制

工具庫: PubSubJS
下載: npm install pubsub-js --save
使用: 
  import PubSub from 'pubsub-js' //引入
  PubSub.subscribe('delete', function(msg, data){ }); //訂閱
  PubSub.publish('delete', data) //發佈消息
優勢: 能夠支持任意關係組件之間的通訊

3). 事件監聽理解

1. DOM事件
	* 綁定事件監聽
		* 事件名(類型): 只有有限的幾個, 不能隨便寫
		* 回調函數
	* 用戶操做觸發事件(event)
		* 事件名(類型)
		* 數據
2. 自定義事件
	* 綁定事件監聽
		* 事件名(類型): 任意
		* 回調函數: 經過形參接收數據, 在函數體處理事件
	* 觸發事件(編碼)
		* 事件名(類型): 與綁定的事件監聽的事件名一致
		* 數據: 會自動傳遞給回調函數

5. ES6新語法總結

定義變量/常量: const/let
解構賦值: let {a, b} = this.props   import {aa} from 'xxx'
對象的簡潔表達: {a, b}
箭頭函數: 
	組件的自定義方法: xxx = () => {}
	map/filter的回調方法: (item, index) => {}
	優勢:
		* 簡潔
		* 沒有本身的this,使用引用this查找的是外部this
擴展運算符: ...
	拆解對象:  const MyProps = {}, <Xxx {...MyProps}>
類: class/extends/constructor/super
ES6模塊化: export default | import

6. 項目打包運行

npm run build  //生成打包文件
npm install -g serve  //全局下載服務器包
serve build  //經過服務器命令運行打包項目
訪問: http://localhost:5000  //瀏覽器訪問