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

项目简介

1.项目介绍

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

2.适合人群及收获

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

3.页面效果和功能展示

推荐/新碟上架/榜单

1605110495-2a4c9e8fabc0555

路由切换

1605110497-116b5c541344f73

歌曲评论

1605110499-51e1b8bff787a9b

排行榜

1605110502-a225768b583371d

播放器

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

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

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

歌曲搜索

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

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

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

歌曲搜索详情列表

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

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

4.项目Github源码及API接口

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

5.项目规范

  • 项目规范:项目中有一些开发规范和代码风格 (也可以按照自己的习惯)
    1. 文件夹、文件名称统一小写、多个单词以连接符(-)连接;
    2. JavaScript变量名称采用小驼峰标识,常量全部使用大写字母,组件采用大驼峰;
    3. CSS采用普通CSSstyled-component结合来编写
      • 全局采用普通CSS、局部采用styled-component
    4. 整个项目不再使用class组件,统一使用函数式组件,并且全面拥抱Hooks
    5. 所有的函数式组件,为了避免不必要的渲染,全部使用memo进行包裹;
    6. 组件内部的状态,使用useStateuseReducer;业务数据全部放在redux中管理;
    7. 函数组件内部基本按照如下顺序编写代码:
      • 组件内部state管理;
      • reduxhooks代码;
      • 其他组件hooks代码;
      • 其他逻辑代码;
      • 返回JSX代码;
    8. redux代码规范如下:
      • 每个模块有自己独立的reducer,通过combineReducer进行合并;
      • 异步请求代码使用redux-thunk,并且写在actionCreators中;
      • redux直接采用redux hooks方式编写,不再使用connect
  • 其他规范在项目中根据实际情况决定和编写;
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论