基于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.项目Github源码及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,接口很稳定,文档很完善
  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React 18全家桶React.js的最新版本,它引入了很多新特性和改进,使得开发更加方便和高效。其中,Hooks是React 16.8版本引入的一项重要特性,它允许我们在无需编写类组件的情况下,在函数式组件中使用状态和其他React功能。 React 18全家桶Hooks项目实战网盘是一个基于React 18全家桶的实际开发项目,旨在通过实际开发来学习和掌握React 18全家桶Hooks的使用。 在这个项目中,我们可以通过网盘将文件上传、下载和分享给其他用户。首先,我们可以使用React 18全家桶的新特性来创建一个界面,例如使用React函数组件和Hooks来管理界面的状态、处理用户输入以及渲染文件列表等。我们可以使用React Router来管理不同页面之间的导航,并使用React Context来共享全局的状态和数据。 对于文件的上传和下载功能,我们可以利用React 18全家桶提供的新API,例如使用React Concurrent Mode来提高文件上传和下载的性能。同时,我们可以使用React Query来管理文件的后台数据请求和状态更新,以及使用React Hook Form来处理表单的数据验证和提交。 在项目中,我们可以使用React 18全家桶的新特性来实现一些高级的功能,例如使用React Server Components来实现服务器端渲染和实时数据更新,或使用React Fast Refresh来提高开发和调试的效率。 通过参与React 18全家桶Hooks项目实战网盘,我们可以深入了解并熟练掌握React 18全家桶Hooks的使用。这将有助于我们在实际的React项目开发中提高开发效率和代码质量。同时,我们也可以通过参与项目来拓展我们的React技术栈,并与其他开发者共同学习和交流。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值