关于react.js:????基于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.我的项目阐明

• 本章只是对我的项目进行了初步介绍及明确指标。
• 之后对于我的项目实战的文章，在后续进行公布(比拟具体,每章都有明确实现指标的gif图)
• 做我的项目实战+开发文档不容易, 前前后后在校靠近做了2个月左右, 对各位朋友有用的话, 心愿给个star⭐

感激

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