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

风不识途
21,356 阅读5分钟

网易云音乐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项目经验
  • 收获:
    • 如何设计音乐播放器组件，歌词解析等
    • 项目目录的结构划分，大型项目的state管理
    • 项目的大致流程，如何进行性能优化等等
  • 注意：
    • 学习本篇文章时，页面逻辑js不再贴出 (只有大致的实现思路)
    • 毕竟思考和多动手才是实践😎

3.页面效果和功能展示

推荐/新碟上架/榜单

路由切换

歌曲评论

排行榜

播放器

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

歌曲搜索

  • 新增：键盘事件↓ & 函数防抖
    • ctrl+k 搜索框获取焦点 & 唤醒搜索下拉框
    • esc 取消焦点 & 下拉框
    • enter 进入歌曲搜索详情

歌曲搜索详情列表

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

4.项目源码及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标记隐藏(了解即可)

// 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插件

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.项目说明

  • 本章只是对项目进行了初步介绍及明确目标。
  • 之后关于项目实战的文章，在后续进行发布(比较详细,每章都有明确完成目标的gif图)
  • 做项目实战+开发文档不容易, 前前后后在校接近做了2个月左右, 对各位朋友有用的话, 希望给个star⭐

感谢

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