[|[ 项目 ] web-music 网易云音乐 react 版 [项目]web-music网易云音乐react版

web-music 项目地址: Github | Gitee
基于 React 开发的 web-music
个人独立开发, 目的在于了解和熟悉前端项目开发流程.
技术栈: react, styled-components, redux, redux-thunk 等.
项目难点:

运行演示:

文章图片

本地启动项目

项目结构

项目规范

文件夹及文件命名
- 静态资源文件命名单词间以 - 分隔
- 普通 JavaScript 及其他程序文件命名使用小驼峰
- 组件文件命名单词以 - 分隔
- 非组件文件夹命名单词间以 _ 分隔
- 组件文件夹命名单词以 - 分隔
JavaScript变量名称采用小驼峰标识, 常量全部使用大写字母, 组件采用大驼峰
CSS 采用普通CSS 和 styled-component 结合来编写( 全局采用普通CSS、局部采用 styled-component )
整个项目不再使用 class 组件, 统一使用函数式组件, 并且全面拥抱Hooks
所有的函数式组件, 为了避免不必要的渲染, 全部使用 memo 进行包裹
组件内部的状态，使用useState , useReducer. 业务数据全部放在redux中管理
函数组件内部基本按照如下顺序编写代码
- 组件内部state管理
- redux的hooks代码
- 其他组件hooks代码
- 其他逻辑代码
- 返回JSX代码
【[|[ 项目 ] web-music 网易云音乐 react 版】redux代码规范如下
- 每个模块有自己独立的 reducer, 通过 combineReducer 进行合并
- 异步请求代码使用 redux-thunk, 并且写在 actionCreators 中
- redux直接采用 redux hooks 方式编写, 不再使用connect
网络请求采用 axios
- 对 axios 进行二次封装
- 所有的模块请求会放到一个请求文件中单独管理
项目使用 AntDesign
- 部分使用 AntDesign 组件
- 部分自己编写