• Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • React 通关秘籍

    • 1.关于本小册
    • 2.一网打尽组件常用Hook
    • 3.Hook的闭包陷阱的成因和解决方案
    • 4.React组件如何写TypeScript类型
    • 5.React组件如何调试
    • 6.受控模式VS非受控模式
    • 7.组件实战:迷你Calendar
    • 8.组件实战:Calendar日历组件(上)
    • 9.组件实战:Calendar日历组件(下)
    • 10.快速掌握Storybook
    • 11.React组件如何写单测
    • 12.深入理解Suspense和ErrorBoundary
    • 13.组件实战:Icon图标组件
    • 14.组件实战:Space间距组件
    • 15.React.Children和它的两种替代方案
    • 16.三个简单组件的封装
    • 17.浏览器的5种Observer
    • 18.组件实战:Watermark防删除水印组件
    • 19.手写react-lazyload
    • 20.图解网页的各种距离
    • 21.自定义hook练习
    • 22.自定义hook练习(二)
    • 23.用react-spring做弹簧动画
    • 24.react-spring结合use-gesture手势库实现交互动画
    • 25.用react-transition-group和react-spring做过渡动画
    • 26.快速掌握Tailwind:最流行的原子化CSS框架
    • 27.用CSSModules避免样式冲突
    • 28.CSSInJS:快速掌握styled-components
    • 29.react-spring实现滑入滑出的转场动画
    • 30.组件实战:Message全局提示组件
    • 31.组件实战:Popover气泡卡片组件
    • 32.项目里如何快速定位组件源码
    • 33.一次超爽的React调试体验
    • 34.组件实战:ColorPicker颜色选择器(一)
    • 35.组件实战:ColorPicker颜色选择器(二)
    • 36.组件实战:onBoarding漫游式引导组件
    • 37.组件实战:Upload拖拽上传
    • 38.组件实战:Form表单组件
    • 39.React组件库都是怎么构建的
    • 40.组件库实战:构建esm和cjs产物,发布到npm
    • 41.组件库实战:构建umd产物,通过unpkg访问
    • 42.数据不可变:immutable和immer
    • 43.基于ReactRouter实现keepalive
    • 44.Historyapi和ReactRouter实现原理
    • 45.ReactContext的实现原理和在antd里的应用
    • 46.ReactContext的性能缺点和解决方案
    • 47.手写一个Zustand
    • 48.原子化状态管理库Jotai
    • 49.用react-intl实现国际化
    • 50.国际化资源包如何通过Excel和GoogleSheet分享给产品经理
    • 51.基于react-dnd实现拖拽排序
    • 52.react-dnd实战:拖拽版TodoList
    • 53.ReactPlayground项目实战:需求分析、实现原理
    • 54.ReactPlayground项目实战:布局、代码编辑器
    • 55.ReactPlayground项目实战:多文件切换
    • 56.ReactPlayground项目实战:babel编译、iframe预览
    • 57.ReactPlayground项目实战:文件增删改
    • 58.ReactPlayground项目实战:错误显示、主题切换
    • 59.ReactPlayground项目实战:链接分享、代码下载
    • 60.ReactPlayground项目实战:WebWorker性能优化
    • 61.ReactPlayground项目实战:总结
    • 62.手写MiniReact:思路分析
    • 63.手写MiniReact:代码实现
    • 64.手写MiniReact:和真实React源码的对比
    • 65.React18的并发机制是怎么实现的
    • 66.Ref的实现原理
    • 67.低代码编辑器:核心数据结构、全局store
    • 68.低代码编辑器:拖拽组件到画布、拖拽编辑json
    • 69.低代码编辑器:画布区hover展示高亮框
    • 70.低代码编辑器:画布区click展示编辑框
    • 71.低代码编辑器:组件属性、样式编辑
    • 72.低代码编辑器:预览、大纲
    • 73.低代码编辑器:事件绑定
    • 74.低代码编辑器:动作弹窗
    • 75.低代码编辑器:自定义JS
    • 76.低代码编辑器:组件联动
    • 77.低代码编辑器:拖拽优化、Table组件
    • 78.低代码编辑器:Form组件、store持久化
    • 79.低代码编辑器:项目总结
    • 80.快速掌握ReactFlow画流程图
    • 81.ReactFlow振荡器调音:项目介绍
    • 82.ReactFlow振荡器调音:流程图绘制
    • 83.ReactFlow振荡器调音:合成声音
    • 84.AudioContext实现在线钢琴
    • 85.React服务端渲染:从SSR到hydrate
    • 86.小册总结

React 通关秘籍

组件库、playground、mini react、低代码编辑器,通过大量实战提升 React 水平

你将获得

  • 深入源码,全面掌握 React 实现原理;
  • 手写组件,封装类 Ant Design 组件库;
  • 剖析本质,解密 React 主流生态库;
  • 融会贯通,实现一个 playground 和低代码编辑器

作者介绍

作者简介

神说要有光,资深前端工程师,畅销小册《Nest 通关秘籍》、《前端调试通关秘籍》、《TypeScript 类型体操通关秘籍》、《Babel 插件通关秘籍》作者,对前端编译原理、前端工程化等有深入研究,维护 “神光的编程秘籍” 公众号。

小册介绍

课程介绍

在前端开发工作中,我们每天都在写组件。

业务组件一般不会很复杂,不需要很多封装。

我们也会用一些第三方组件库的组件,比如 Ant Design,这些组件的 Props、TS 类型、内部实现等都做了很多设计。

如果能自己写一个这样的组件库,不仅能提升写组件的水平,写在简历里也是非常加分的。

而这本小册主打的就是组件库。

我们会写 Calender、Table、Form、Space、ColorPicker 等各种组件,然后把它们封装成一个类似 Antd 的组件库。

这个过程中,我们还会学习 CSS Modules、CSS in JS、Tailwind 等样式管理方案,学习 react-spring、react-transition-group、framer-motion、react-motion 等动画库、学习 react-dnd 来做拖拽,还有 Redux、Jotai、Zustand 等状态管理库。

React 生态包罗万象,我们会把常用的 React 周边库都学一遍。

然后开始深入原理,通过 React 源码来理清 React 渲染流程,各种特性的实现原理,之后实现一个 mini-react。

如何掌握好 React 呢?

我觉得就是这两方面:一方面是 React 之上,学会写各种组件,并且能把这些组件封装成一个组件库、学习各种 React 相关的库。一方面是 React 之下,能够自己调试源码,知道 React 是怎么运行的,能够实现一个简易版 React。

这两方面都掌握到一定程度,React 技术栈就算是通关了。

适宜人群

  • 想全面进阶 React 的前端工程师;
  • 想开发一个组件库的前端工程师;
  • 对 React 源码感兴趣的前端开发。

购买须知

  1. 本小册为图文形式内容服务,共计 60 节;
  2. 自 1 月 31 日上线之日起,每周更新 1~2 节,预计 5 月 31 日更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
上次更新: 6/21/25, 9:42 AM
贡献者: YNight