🔥基于React全家桶开发「网易云音乐PC」项目实战(一)

网易云音乐PC项目实战

项目简介

1.项目介绍

• 项目使用到的技术栈

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

• 项目的目标

  • 使用React全家桶开发网易云音乐PC网站

2.适合人群及收获

• 适合人群:

  • 适合想了解一个项目的大致流程

  • 或者是学习了React 全家桶但是缺乏React项目经验

    • （如果有的知识点不了解，可以参考以前React系列文章）
    • （最好了解一点Node）

• 收获:

  • 如何设计音乐播放器组件，歌词解析等
  • 项目目录的结构划分，大型项目的state管理
  • 项目的大致流程，如何进行性能优化等等

• 注意：

  • 学习本篇文章时，页面逻辑js不再贴出 (只有大致的实现思路)
  • 毕竟思考和多动手才是实践😎

3.页面效果和功能展示

推荐/新碟上架/榜单

路由切换

歌曲评论

排行榜

播放器

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

歌曲搜索

• 新增：键盘事件↓ & 函数防抖

  • ctrl+k 搜索框获取焦点 & 唤醒搜索下拉框
  • esc 取消焦点 & 下拉框
  • enter 进入歌曲搜索详情

歌曲搜索详情列表

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

4.项目源码及API接口

• 项目部署预览地址：查看预览地址
• 项目Github地址: Musci 163 如果觉得项目还不错的话 👏，就给个 ⭐ 鼓励一下吧~

• API说明(以下二选一即可)

  • 可选一：

    • API接口文档
    • 可以自己本地部署网易云Node API接口，也可以使用我已经部署到服务器的API👇

  • 可选二：

    • 已经部署到服务器接口: 在线网易云音乐API

5.项目规范

• 项目规范：项目中有一些开发规范和代码风格 (也可以按照自己的习惯)

  1. 文件夹、文件名称统一小写、多个单词以连接符（-）连接；
  2. JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；

  3. CSS采用普通CSS和styled-component结合来编写

     • 全局采用普通CSS、局部采用styled-component
  4. 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；
  5. 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
  6. 组件内部的状态，使用useState、useReducer；业务数据全部放在redux中管理；

  7. 函数组件内部基本按照如下顺序编写代码：

     • 组件内部state管理；
     • redux的hooks代码；
     • 其他组件hooks代码；
     • 其他逻辑代码；
     • 返回JSX代码；

  8. redux代码规范如下:

     • 每个模块有自己独立的reducer，通过combineReducer进行合并；
     • 异步请求代码使用redux-thunk，并且写在actionCreators中；
     • redux直接采用redux hooks方式编写，不再使用connect；
• 其他规范在项目中根据实际情况决定和编写；

6.React devtools标记隐藏(了解即可)

• 在开发项目实战之前: 我们打开网易云音乐官网，会发现网易云官网为什么看不到react devtools插件的标记 (了解即可，不重要)
• React devtools标记隐藏

// disable react-dev-tools for this project
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

项目初始化

前言-vscode&chrome插件(可选)

• 如果已经安装过了可以选择跳过，以下都是可选的，当然不安装也没问题

• 为了更便捷的开发项目，推荐安装以下vscode插件

  • ESLint: 代码风格检查工具，帮助我们规范代码书写
  • vscode-styled-components: 在编写styled-components中语法高亮显示和样式组件的
  • path-alias: 别名路径有对应的智能提示
  • ES7 React/Redux/GraphQL/React-Native snippets: 代码片段

• chrome插件

  • Redux DevTools: 方便调试redux数据
  • FeHelper: 对服务器返回的json数据进行美化

1.项目目录划分

• 使用create-react-app脚手架初始化项目结构: create-react-app music163_xxx
• 目录结构也可以按照自己习惯的结构来划分

│─src
  ├─assets 存放公共资源css和图片
    ├─css  全局css
    ├─img
  ├─common  公共的一些常量
  ├─components 公共组件
  ├─pages   路由映射组件
  ├─router  前端路由配置
  ├─service 网络配置和请求
  └─store   全局的store配置
  └─utils   工具函数
  └─hooks   自定义hook

2.项目说明

感谢

• 非常感谢王红元老师的React核心技术实战让我学习到很多 React 的知识。
• 非常感谢后台提供者Binaryify，接口很稳定，文档很完善