小册介绍

本小册为纯实战类型的教程系列，以 eact 全家桶(包含 Hooks)以及 immutable 数据流为基础仿网易云音乐 UI 打造一款高质量的 WebApp。

首先说一说为什么要开始做这个前端的小册教程:

1、React Hooks 如今可谓前端界"当红小生"，因其具有 API 简洁性、逻辑复用性等特性逐渐被开发者所应用。vue3.0 也是采用类似的 Function Based的模式，因此学习 React Hooks 也是未来的大趋势，通过一个具体的项目来实践、应用hooks特性，我觉得比干啃文档要强太多，并且在实践的过程中会遇到一些坑，通过坑驱动来学习，可以加深我们对于hooks原理的理解。

2、把 Redux 和不可变数据结合也是 React 性能优化的一个重要的手段，通过immutable.js来进行实践一把，能够加深自己对于 React 性能优化相关知识的理解。

3、完成这个小册中的项目绝对不仅仅是功能上的实现，我保证整个项目的质量能够对得起”精美“二字，从头到尾不断优化和迭代才得以完成，因此也非常乐意分享给更多在前端路上的同学，也有自信能让大家收获到非常多的知识点和实战经验，帮助大家进阶。

接下来介绍一下这个项目的技术栈:

• react v16.8全家桶(react，react-router) : 用于构建用户界面的 MVVM 框架

• redux: 著名JavaScript状态管理容器

• redux-thunk: 处理异步逻辑的redux中间件

• immutable: Facebook历时三年开发出的进行持久性数据结构处理的库

• react-lazyload: react懒加载库better-scroll: 提升移动端滑动体验的知名库

• styled-components: 处理样式，体现css in js的前端工程化神器

• axios: 用来请求后端api的数据。

写作思路:小册的主干部分以不同的模块为线索，一共有推荐模块、歌手列表模块、排行榜模块、歌单详情模块、歌手主页模块、播放器模块和搜索模块构成，中间会穿插一些基础组件的搭建，整个性能及体验的优化过程也会在每个模块开发基本完成之后来进行，因此是一个循序渐进、不断深入的过程。

主题特点:以实战为线索，逐步深入React开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。

整体架构:

你会学到什么？

读完小册你会有什么收获:

1. 熟练使用React Hooks进行业务开发，理解哪些场景产生闭包陷阱，如何避免掉坑。
2. 手写近6000行代码，封装13个基础UI组件、12个业务组件，让你知道关于 React + Redux 业内公认的最佳实践到底是什么样子。
3. 封装常用的移动端组件，实现常见的需求，如封装滚动组件、实现图片懒加载、实现上拉/下拉刷新的功能、实现防抖功能、实现组件代码分割(CodeSpliting)等。
4. 拥有实现前端复杂交互的实际项目经验，提升自己的内功，比如开发播放器内核就是其中一个很大的挑战。
5. 掌握CSS中的诸多技巧，提升自己的CSS能力，无论布局还是动画，都有相当多的实践和探索，未使用任何UI框架，样式代码独立实现。
6. 彻底理解redux原理，并能够独立开发redux的中间件。

作者介绍

「三元同学」公众号作者，掘金优秀作者，目前就职于某互联网大厂架构团队, 深耕前端领域，并且长期坚持输出优质博客文章，热爱开源，热爱分享。

适宜人群

• 1.学习过一些前端基础但缺乏实战经验的在校大学生。
• 2.业务中常常使用市面上各种UI框架和库无法提升自己，想要通过一种方式来强化基础和内功的前端工程师。
• 3.原来的技术栈是Vue.js，想要快速学习和掌握React.js并积累实战经验的前端开发者。
• 4.对React Hooks非常感兴趣，但是对它的了解仅仅停留在各种理论性的文档中，缺乏实践的经验，对各个hooks的应用场景不太理解的前端同学。
• 5.有前端基础，想要做一个高质量的前端项目，系统掌握前端开发完整流程，成为全栈开发的服务端同学。

另外，一些前端知识的基础是需要的，比如HTML、CSS、原生JavaScript的基础。总之，这个小册并不是零基础教程，重点的原理性内容会有所强调，但绝不会有照搬官方文档的重复性内容，保证全程高能实战。当然这里我也没有办法保证项目涉及的技术栈你都有实践过，但这个小册的意义恰恰在于给你一个实际的场景，在一个舒适的环境中完成一个复杂的项目，并在这个过程中知道自己还有哪些不足、理解不透彻的地方，让你更加明确以后努力以及深耕的具体方向，我觉得这是比单纯地做一个项目更加宝贵的东西。

购买须知

1. 本小册为图文形式内容服务，共计 34 节；
2. 文章已全部更新完毕；
3. 购买用户可享有小册永久的阅读权限；
4. 购买用户可进入小册微信群，与作者互动；
5. 掘金小册为虚拟内容服务，一经购买成功概不退款；
6. 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
7. 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io