React Hooks 与 Immutable 数据流实战- 掘金小册课程推荐/优惠

React Hooks 与 Immutable 数据流实战--掘金小册课程推荐/优惠

以实战为线索,逐步深入React开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
神三元
36讲 | 5626人已学习
优惠价¥39.9
官网优惠购买

版权声明

本站非掘金小册官网,与官方无任何关系。我们不提供课程下载或详细内容,仅作为课程分享和推荐平台。我们鼓励大家支持正版,尊重创作者的劳动成果,这样不仅能帮助创作者持续产出优质内容,也能让自己获得更好的学习体验。请通过官方渠道购买和学习课程,感谢您的理解与支持。

课程详情

课程介绍

小册介绍

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

课程目录

  • 项目介绍及小册食用说明【不看错亿】
  • 为什么要在 React 中用 Immutable 数据流?【全程实战指导方针】
  • 初始化项目【万丈高楼平地起】
  • React 的 Reconciliation 算法原理【开局必备框架原理】
  • 推荐模块1: 打造酷炫轮播及列表
  • 搭建项目基本骨架【磨刀不误砍柴工】
  • 歌手列表1:横向分类列表开发,搞定诸多类似场景
  • 推荐模块2: 打造巨好用的项目灵魂组件 ——Scroll 组件
  • 推荐模块3: 从零开发数据层
  • 性能及体验优化【实战精华】
  • 歌手列表2: 歌手 List 开发,为后面起飞做铺垫
  • 歌手列表3:上拉/下拉加载及优化,全面助力移动web开发
  • 如何用 hooks 实现一个 Redux?【中途来波骚操作】
  • 歌单详情1: 动感切页动画,你心动了吗?
  • 排行榜单模块开发【举一反三,巩固技能】
  • 歌单详情2: 准备静态模板
  • 歌单详情3: 打通歌单数据层
  • 榜单详情组件一站式开发【组件复用,解放自我】
  • 代码封装及优化【代码质量不可小觑】
  • 歌手主页1: 核心布局,组件基石
  • 歌手主页2: 交互逻辑,精益求精
  • 歌手主页3: 组件接轨业务数据流
  • 播放器1: 开发前热身,准备好干粮再出发
  • 播放器3: 进度条组件封装,完美衔接业务开发
  • 播放器2: 布局+动画各个击破
  • 播放器4: 复杂交互,挑战极限
  • 播放器5: 由音符陨落动画引发的EventLoop机制之问
  • 播放器6: 解决潜在bug, 细节决定精致程度
  • 播放器7: 播放列表组件,跟App媲美的丝滑体验
  • 播放器9: 歌词功能深度集成
  • 播放器8: 来,手把手写一个歌词解析第三方插件
  • 搜索模块1: 小小的搜索框,大大的学问
  • 代码分割、项目部署及展望未来
  • 搜索模块2:火力全开,完成最后的组件
  • 彩蛋 2: Redux 及中间件原理解析【素养篇】
  • 彩蛋 1:CD界面更新&歌曲倍速播放【鬼畜篇】

作者介绍

公众号 「三元同学」
掘金小册《基于 Vite 的 SSG 框架开发实战》、《深入浅出 Vite》、《React Hooks 与 Immutable 数据流实战》作者,Rspress 作者,目前就职于字节跳动前端架构团队

作者其他课程

基于 Vite 的 SSG 框架开发实战 - 掘金小册课程推荐/分享/优惠/折扣
基于 Vite 的 SSG 框架开发实战
从 0 到 1 实现类 VitePress 框架,手把手带你造轮子
神三元
1050人已学习
优惠价¥199
官网优惠购买
深入浅出 Vite - 掘金小册课程推荐/分享/优惠/折扣
深入浅出 Vite
系统化学习现代构建工具 Vite,提升前端工程化能力
神三元
5357人已学习
优惠价¥59.9
官网优惠购买

推荐

SSR 实战:官网开发指南 - 掘金小册课程推荐/分享/优惠/折扣
SSR 实战:官网开发指南
原理+实战+优化+部署,全链路还原官网实际开发场景
祯民
2073人已学习
优惠价¥29.9
官网优惠购买
DDD 案例实战课 - 掘金小册课程推荐/分享/优惠/折扣
DDD 案例实战课
从零开始,手把手教你实现企业级的 DDD 应用程序
天涯兰
1205人已学习
优惠价¥49.9
官网优惠购买
QuickJS 引擎源码解析与实践 - 掘金小册课程推荐/分享/优惠/折扣
QuickJS 引擎源码解析与实践
深入了解 JavaScript 引擎核心工作原理
hsy0
551人已学习
优惠价¥39.9
官网优惠购买
Electron 应用开发实践指南 - 掘金小册课程推荐/分享/优惠/折扣
Electron 应用开发实践指南
Electron 核心知识+开发实战,快速打造一款自己的桌面端应用
muwoo
1543人已学习
优惠价¥39.9
官网优惠购买
Netty 网络编程之道 - 掘金小册课程推荐/分享/优惠/折扣
Netty 网络编程之道
Netty+互联网协议+Java NIO,搞定 Java 网络通信
肖恩架构
687人已学习
优惠价¥39.9
官网优惠购买
可视化入门:从 0 到 1 开发一个图表库 - 掘金小册课程推荐/分享/优惠/折扣
可视化入门:从 0 到 1 开发一个图表库
理论结合实践,从 0 开发一个图表库,带你入门数据可视化
数据可视化
2221人已学习
优惠价¥19.9
官网优惠购买