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

·  阅读 689
[ 项目 ] web-music 网易云音乐 react 版

web-music

项目地址: Github | Gitee

基于 React 开发的 web-music

个人独立开发, 目的在于了解和熟悉前端项目开发流程.

技术栈: react, styled-components, redux, redux-thunk 等.

项目难点:

  • 路由 v5 与 v6 版本嵌套路由
  • 网络请求数据实体化 对网络请求到的数据进行处理, 筛选可用数据
  • 数据处理 处理歌词, 时间等数据
  • 组件开发 设计并开发一系列组件

运行演示:

web-music-运行演示

本地启动项目

  • yarn install 安装依赖
  • yarn start 启动服务
  • 打开浏览器输入对应服务地址

项目结构

  • public 构建时, 直接将该文件夹中的资源复制到构建后的文件夹中
  • src 项目主要资源文件夹
    • assets 存放静态资源, 如 css, font, img等
    • common 存放公共数据, 如常量, 本地存储等
    • components 存放可复用的组件
    • entity 网络请求解析实体
    • pages 存放各页面的资源
    • router 存放路由配置
    • service 存放网络相关的配置
    • store 存放状态相关资源
    • utils 存放工具类资源
  • notes 笔记

项目规范

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

使用的库

  • antd React 组件库
  • @ant-design/icons antd 图标库
  • @craco/craco create-react-app configuration override
  • normalize.css 重置 css, 使各浏览器行为一致
  • react-router-dom React 路由
  • axios 基于 Promise 的 网络请求库
  • styled-components css in js, 样式组件库
  • redux 状态管理库
  • react-redux React 状态管理库
  • redux-thunk redux 中间件
  • immutable 不变数据流
  • redux-immutable redux 中的 immutable
  • 其他库自行搜索

页面介绍

本项目重在初步了解前端开发流程. 支持前端路由, 但由于开发组件工作量较大, 仅编写完成一个页面, 如下.

  • web-music
    • 发现音乐
      • 推荐

该页面即为网易云音乐首页.

笔记

感谢

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改