乐趣区

关于react.js:项目-webmusic-网易云音乐-react-版

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 文档
退出移动版