https://github.com/Zmaxt/react-music
? ? ? ?? 花了兩周的時間，跟著視頻學習用狱，擼了個音樂播放器克握。技術棧：react夕吻，事件訂閱，Jplayer凿可，webpack自動化打包工具惑折。
頁面樣式如下：
player.png
list.png
實現(xiàn)的功能有：
音樂播放，（播放模式：隨機枯跑，單曲循環(huán)惨驶，順序播放）
? ? ? ?? ? ? ? ? ?（播放設置：快進，后退敛助，音量調(diào)節(jié)粗卜，暫停，啟動）
列表查看纳击，（刪除续扔，切換播放歌曲）
數(shù)據(jù)來源：
mock music list
開發(fā)步驟：
一.搭建開發(fā)環(huán)境：
webpack.png
- npm init 創(chuàng)建package.json
- npm install 安裝依賴npm 會去找package.json下的dependencies安裝
- 創(chuàng)建webpack配置文件 webpack.config.js （entry：index.js，output：path,filename）
- 創(chuàng)建入口文件：index.js
- Linux 命令：webpack 完成打包
- 創(chuàng)建index.html頁面運行
webpack常用loader
babel-loader
css-loader
less-loader
webpack dev server
搭建本地服務器焕数，自動刷新
image.png
二.組件開發(fā)
createClass 創(chuàng)建組件
render 函數(shù)將返回的html結(jié)構(gòu)掛載到DOM節(jié)點上
<appcontainer></appcontainer>組件表明哪些組件需要更換
componentDidMount 只會在裝載完成之后調(diào)用一次纱昧，在 render 之后調(diào)用，從這里開始可以通過 ReactDOM.findDOMNode(this) 獲取到組件的 DOM 節(jié)點堡赔。
componentWillUnmount 解綁事件
組件間通信：
父子組件之間傳遞參數(shù); props
父-子.png
子-父.png
子組件接收.png
調(diào)用父方法.png
非父子組件 pub/sub 事件訂閱识脆，不過復雜項目便難以維護，復雜大型項目使用flux。
三.路由
Router組件本身只是一個容器灼捂，真正的路由要通過Route組件定義离例。
Route.png
上面的是嵌套路由，先加載App組件悉稠，然后再加載Player組件
App組件要這樣寫：
App.png
App組件的this.props.children屬性就是子組件宫蛆。
flux的一種實現(xiàn)方法redux
單向數(shù)據(jù)流.png
redux流程.png
react.png
action.png
reducer.png
總結(jié)與思考：
1.Function bind(this,arg1,arg2,arg3) 綁定事件
2.
巧妙處理數(shù)組內(nèi)循環(huán)index+1.png
3.state
組件免不了要與用戶互動，React 的一大創(chuàng)新的猛，就是將組件看成是一個狀態(tài)機洒扎，一開始有一個初始狀態(tài)，然后用戶互動衰絮，導致狀態(tài)變化，從而觸發(fā)重新渲染 UI 磷醋。
getInitialState(){
定義初始狀態(tài)
}
通過this.state.[attr] 讀取狀態(tài)猫牡，this.setState({修改狀態(tài)})
