web-music

我的项目地址: Github | Gitee

基于 React 开发的 web-music

集体独立开发, 目标在于理解和相熟前端我的项目开发流程.

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

我的项目难点:

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

运行演示:

本地启动我的项目

• 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

  • 发现音乐

    • 举荐

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

笔记

• react-router v6 中的嵌套路由

感激

• coderwhy 老师的我的项目及课程
• 网易云 API
• 网易云 API 文档