先为Search组件编写容器组件Search，以便操作状态管理中的数据。在container目录下新建Search.js，代码如下 回到components下search中的Search.js。在search组件的constructor中定义以下几个state 在上述代码中，搜…

这一节是这款React Web音乐App实战的最后一节：皮肤切换功能。皮肤切换是Web音乐App中一个与核心无关的功能，加入这个功能可以为应用增添不少趣味性 字体图标制作完成后会有一份icomoon.zip包，解压后将里面fonts目录下的4个文件重命名为icomusic，然后…

本项目使用react全家桶打造，技术综合性比较高。很多东西不会从基础讲解 使用create-react-app创建项目基本骨架，然后安装路由（由于4.x的版本路由变化比较大。路由安装react-router-dom 4.2.2的版本即可） 在react脚手架中webpack基本…

说明： 该接口浏览器不能直接请求，需要携带请求头referer，值为https://y.qq.com/n/yqq/playlist/3602407677.html。对于ajax来说这个请求头是不能设置的，需要后端代理绕过限制。如不需要jsonp调用，将format参数值修改为j…

上一节开发了推荐页面，这一节实现专辑页面开发、进入动画和图片拉伸动画。话不多说，先看效果图 打开chrome浏览器，地址栏输入QQ音乐官网：https://y.qq.com。打开后点击专辑 这个时候回弹出一个新的窗口，直接关闭它。回到刚才的开发者工具，可以看到有一个请求，这个请…

上一节使用Redux管理歌曲相关数据，实现核心播放功能，播放功能是本项目最复杂的一个功能，涉及各个组件之间的数据交互，播放逻辑控制。这一节继续开发排行榜列表和排行榜详情，以及把播放歌曲和播放歌曲列表的持久化到本地。步入主题 使用chrome浏览器切换到手机模式输入QQ音乐移动端…

歌手页分两块，上部分是歌手分类，下部分就是对应的歌手列表。在歌手列表接口中有一个key参数，改参数就是对应的歌手分类，它是由第一栏分类和第二栏分类拼接而成的。在QQ音乐官网的歌手列表页面中通过浏览器调试工具查看DOM结构可以查看到分类对应的key值 在效果图中每个分类都是一行显…

接着上一节内容，这一节抓取QQ音乐移动Web端推荐页面接口和PC端最新专辑接口数据。通过这些接口数据开发推荐页面。首先看一下效果图 用chrome浏览器打开手机调试模式，输入QQ音乐移动端地址：https://m.y.qq.com。打开后点击Network，然后点击XHR，可以…

什么是Redux？Redux是一个状态的容器，是一个应用数据流框架，主要用作应用状态的管理。它用一个单独的常量状态树（对象）来管理保存整个应用的状态，这个对象不能直接被修改。Redux中文文档见http://www.redux.org.cn 在我们的应用中有很多歌曲列表页，点击…