阅读 8049

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

网易云音乐PC项目实战

项目简介

1.项目介绍

  • 项目使用到的技术栈
    • CSS使用Flex进行布局
    • 配置路径别名使用: carco
    • 项目路由使用: react-router来管理
    • 使用react-router-config集中式路径映射表管理
    • 使用styled-components+普通的css编写样式
    • 使用axios发送网络请求
    • 项目全面拥抱React Hooks
    • 项目组件库使用: ant design
    • 使用immutable对项目reducerstate进行管理
    • 使用redux-immtable对根目录reducerstate进行管理
    • 项目使用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采用普通CSSstyled-component结合来编写

      • 全局采用普通CSS、局部采用styled-component
    4. 整个项目不再使用class组件,统一使用函数式组件,并且全面拥抱Hooks

    5. 所有的函数式组件,为了避免不必要的渲染,全部使用memo进行包裹;

    6. 组件内部的状态,使用useStateuseReducer;业务数据全部放在redux中管理;

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

      • 组件内部state管理;
      • reduxhooks代码;
      • 其他组件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,接口很稳定,文档很完善
文章分类
前端
文章标签