React全家桶开发「网易云音乐PC项目」实战(前端项目+源码)

今晚不熬夜_

网易云音乐PC项目实战

项目简介

1.项目介绍

• 项目使用到的技术栈
  • CSS使用Flex进行布局
  • 配置路径别名使用: carco
  • 项目路由使用: react-router来管理   
  • 使用react-router-config集中式路径映射表管理
  • 使用styled-components+普通的css编写样式
  • 使用axios发送网络请求
  • 项目全面拥抱React Hooks
  • 项目组件库使用: ant design
  • 使用immutable对项目reducer中state进行管理
  • 使用redux-immtable对根目录reducer中state进行管理
  • 项目使用redux-thunk中间件
  • 使用propType校验props类型及默认值
  • 使用react-transition-group添加过渡动画效果
  • 项目中的优化: 函数式组件全部采用memo、路由懒加载、函数防抖
• 项目的目标
  • 使用React全家桶开发网易云音乐PC网站

2.适合人群及收获

• 适合人群:
  • 适合想了解一个项目的大致流程
  • 或者是学习了React 全家桶但是缺乏React项目经验
  • （如果有的知识点不了解，可以参考以前React系列文章）
  • （最好了解一点Node）
• 收获:
  • 如何设计音乐播放器组件，歌词解析等
  • 项目目录的结构划分，大型项目的state管理
  • 项目的大致流程，如何进行性能优化等等
• 注意：
  • 学习本篇文章时，页面逻辑js不再贴出 (只有大致的实现思路)
  • 毕竟思考和多动手才是实践😎

3.页面效果和功能展示

推荐/新碟上架/榜单

路由切换

歌曲评论

排行榜

播放器

歌曲切换(随机、顺序、单曲循环)

歌曲搜索

• 新增：键盘事件↓  &  函数防抖
  • ctrl+k 搜索框获取焦点 & 唤醒搜索下拉框
  • esc 取消焦点 & 下拉框
  • enter 进入歌曲搜索详情

歌曲搜索详情列表

• 在搜索框中按下回车即可，搜索列表基本功能实现

4.项目Github源码及API接口

• 项目部署预览地址👉：查看预览地址
• 项目Github地址👉: Musci 163 如果觉得项目还不错的话 👏，就给个 ⭐ 鼓励一下吧~(疯狂暗示)😉😉
• API说明(以下二选一即可)
  • 可选一：
  • API接口文档
  • 可以自己本地部署网易云Node API接口，也可以使用我已经部署到服务器的API👇
  • 可选二：
  • 已经部署到服务器接口: 在线网易云音乐API

5.项目规范

• 项目规范：项目中有一些开发规范和代码风格 (也可以按照自己的习惯)

  1. 文件夹、文件名称统一小写、多个单词以连接符（-）连接；

  2. JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；

  3. CSS采用普通CSS和styled-component结合来编写

     • 全局采用普通CSS、局部采用styled-component

  4. 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；

  5. 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；

  6. 组件内部的状态，使用useState、useReducer；业务数据全部放在redux中管理；

  7. 函数组件内部基本按照如下顺序编写代码：

     • 组件内部state管理；
     • redux的hooks代码；
     • 其他组件hooks代码；
     • 其他逻辑代码；
     • 返回JSX代码；

  8. redux代码规范如下:

     • 每个模块有自己独立的reducer，通过combineReducer进行合并；
     • 异步请求代码使用redux-thunk，并且写在actionCreators中；
     • redux直接采用redux hooks方式编写，不再使用connect；
• 其他规范在项目中根据实际情况决定和编写；

感谢

• 非常感谢王红元老师的React核心技术实战让我学习到很多 react 的知识。
• 非常感谢后台提供者Binaryify，接口很稳定，文档很完善

jieleejie

感谢分享，正在学全家桶，先mark一下

今晚不熬夜_

G_ibsonl 发表于 2020-11-11 22:07
大佬膜拜啊，有没有APP版的技术教程。小白有个问题比较好奇，接口都是咋搞定的啊

API接口: http://123.57.176.198:3000/  (我已经部署到服务器上了)
APP版, 直接做移动端的就可以

森之木源

非常强大的楼主，有前端UI设计教程分享吗？

dejavuwl

现在都开始教React不教Vue了吗

lulala97

楼主很厉害，先收藏啦，想模仿做一下

时光书窝

很厉害的样子，有视频吗

今晚不熬夜_

dejavuwl 发表于 2020-11-11 17:11
现在都开始教React不教Vue了吗

Vue学完了

西楠

感谢感谢，谢谢楼主

rzss

强啊，收藏

ibook

React很火啊
不过手机版如果能够自适应就更好了

G_ibsonl

大佬膜拜啊，有没有APP版的技术教程。小白有个问题比较好奇，接口都是咋搞定的啊