https://github.com/Zmaxt/react-music
花了两周的时间，跟着视频学习，撸了个音乐播放器。技术栈：react，事件订阅，Jplayer，webpack自动化打包工具。
页面样式如下：
player.png
list.png
实现的功能有：
音乐播放，（播放模式：随机，单曲循环，顺序播放）
（播放设置：快进，后退，音量调节，暂停，启动）
列表查看，（删除，切换播放歌曲）
数据来源：
mock music list
开发步骤：
一.搭建开发环境：
webpack.png
- npm init 创建package.json
- npm install 安装依赖npm 会去找package.json下的dependencies安装
- 创建webpack配置文件 webpack.config.js （entry：index.js，output：path,filename）
- 创建入口文件：index.js
- Linux 命令：webpack 完成打包
- 创建index.html页面运行
webpack常用loader
babel-loader
css-loader
less-loader
webpack dev server
搭建本地服务器，自动刷新
image.png
二.组件开发
createClass 创建组件
render 函数将返回的html结构挂载到DOM节点上
<appcontainer></appcontainer>组件表明哪些组件需要更换
componentDidMount 只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。
componentWillUnmount 解绑事件
组件间通信：
父子组件之间传递参数; props
父-子.png
子-父.png
子组件接收.png
调用父方法.png
非父子组件 pub/sub 事件订阅，不过复杂项目便难以维护，复杂大型项目使用flux。
三.路由
Router组件本身只是一个容器，真正的路由要通过Route组件定义。
Route.png
上面的是嵌套路由，先加载App组件，然后再加载Player组件
App组件要这样写：
App.png
App组件的this.props.children属性就是子组件。
flux的一种实现方法redux
单向数据流.png
redux流程.png
react.png
action.png
reducer.png
总结与思考：
1.Function bind(this,arg1,arg2,arg3) 绑定事件
2.
巧妙处理数组内循环index+1.png
3.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。
getInitialState(){
定义初始状态
}
通过this.state.[attr] 读取状态，this.setState({修改状态})
