先讲清楚：这门造轮子课程值不值得学

很多前端开发者面临的痛点是：能熟练调用现成的组件库完成业务，却很难独立解决复杂的底层逻辑问题。一旦遇到组件源码报错或需要深度定制，往往束手无策。这门以 React 造轮子为核心的主题课，解决的就是“知其然不知其所以然”的工程化困境。它不是教你如何快速拼凑页面，而是带你从零开始，用函数式编程和面向对象的核心思想，一步步造出 Icon、Dialog、Form、Layout 和 Scroll 等基础组件。如果你正处在从初级向中高级前端跨越的瓶颈期，或者想在前端面试中拿出有含金量的项目，这门课的投入产出比是值得的。但如果你刚接触 JavaScript 基础，连 React 基本语法还没摸透，建议先补齐前置知识，因为课程直接从工程化配置和底层封装切入，基础薄弱容易产生挫败感。

编辑建议：怎么配合资料进行有效练习

这套资料包含完整的工程搭建、组件实现过程以及配套课件。建议的阅读和学习策略是：先看工程环境搭建与项目总结部分，理解整个组件库的运作机制；随后重点研读 Class 和函数两种组件写法的对比，建立对 React 组件本质的理解。练习时，不要只停留在看懂代码的层面。资料里的每个组件模块都对应一个真实的工作场景需求，你需要跟着课件线索，自己新建一个空白项目，从配置打包工具开始，手动把 Icon、Dialog 和 Form 组件敲一遍。遇到异步 BUG 消除和 TypeScript 类型优化的章节，务必停下来自己复现这个排查过程，这是提升代码健壮性最有效的训练方式。不要直接复制粘贴现成代码，手写并跑通单元测试，才能真正把知识转化成肌肉记忆。

学完之后，你能独立承担什么工作

完整跟练完这门课，你将具备独立维护企业级组件库的能力。具体来说，当团队内部的业务线需要定制化交互组件时，你能从需求拆解出发，独立完成从 API 设计、底层逻辑封装到自动化测试覆盖率验证的全流程开发。你不仅能写出一个功能完整的 Form 表单或 Scroll 滚动组件，还能为其编写严谨的单元测试并接入持续集成流程。此外，课程中涉及的消除 TS 隐式类型、封装非 React 通用轮子等实战经验，能让你在日常业务开发中，写出复用性更高、类型更安全的代码。这不再是简历上一句空洞的“熟练使用 React”，而是真正具备底层源码阅读、改造与工程化产出的硬实力。


课程介绍 · 函数式编程语言 · 面向对象的核心 · webpack 4 环境搭建（上） · webpack 4 环境搭建（下） · 第一个组件：icon（上） · 第一个组件：Icon（下） · 单元测试 · 测试覆盖率与持续集成（上） · 测试覆盖率与持续集成（下） · 项目搭建总结 · WebStorm 配置 · React 组件的两种写法：Class 和函数 · 对话框组件 - Dialog · React 组件：Layout · 吃自己的狗粮：制作官网 · React Form 组件（上） · React Form 组件（中） · React Form 组件（下） · 超难异步 BUG 解决过程 · 超难：如何消除 TS 代码里的 any · 如何封装一个非 React 的轮子 · 交互型组件：scroll 组件 · scroll 组件(中) · 课件资料

课程目录

*   02 课程介绍/

  *   1.课程简介

*   03 函数式编程语言/

  *   01 Lisp

  *   02 Lisp基本语法和递归求值.mp4

  *   03 代入求值

  *   04 递归

  *   05 迭代

  *   06 高阶函数

  *   07 总结

*   04 面向对象的核心/

  *   01 OOP历史（上）

  *   02 OOP历史（下）

  *   03 类和对象

  *   04 Smalltalk介绍

  *   05 消息传递

  *   06 函数也能存状态

  *   07 Dispatch分派器

  *   08 不使用赋值就是函数式

  *   09 函数式代码示例（上）

  *   10 函数式代码示例（下）

  *   11 函数式的特点

  *   12 总结

*   05 webpack 4 环境搭建（上）/

  *   01 编辑器快捷键设置

  *   02 awesome-typescript-loader

  *   03 配置库格式-umd

  *   04 webpack终于能运行了

  *   05 什么时候加dev？umd是什么？

  *   06 webpack-dev-server

  *   07 html-webpack-plugin

*   06 webpack 4 环境搭建（下）/

  *   01 将代码上传到多个远程仓库

  *   02 安装类型依赖

  *   03 添加 webpack 的 resolve 配置

  *   04 TSX文件必须引入React

  *   05 不打包React

  *   06 开发环境和生产环境的区别

  *   07 配置TS类型声明文件

  *   08 配置Jest

  *   09 神奇的import

  *   10 艰难地解决bug

  *   11 总结：每个目录的作用

*   07 第一个组件：icon（上）/

  *   01 为什么要造轮子

  *   02 为什么手机上的UI框架不好用

  *   03 React.FunctionComponent 与 IconPropps

  *   04 消除IDE的所有警告

  *   05 使用svg-sprite-loader并翻车

  *   06 现场把车扶起来

  *   07 路径里面的星星是什么意思

  *   08 根据name展示不同的icon

  *   09 svg定义文件有什么用

  *   10 importAll

  *   11 tree-shaking

  *   12 总结

*   08 第一个组件：Icon（下）/

  *   01 配置 SCSS loader

  *   02 React.MouseEventHandler的使用

  *   03 让Icon响应所有事件

  *   04 自己写 classes 函数

  *   05 使用解构赋值

*   09 单元测试/

  *   01 最简单的单元测试

  *   02 使用Snapshot测试UI

  *   03 使用jest.fn()测试点击事件

  *   04 目前代码的总结

*   10 测试覆盖率与持续集成（上）/

  *   01 工程化是什么

  *   02 大概的覆盖率

  *   03 详细的测试覆盖率

  *   04 配置 circle CI 持续集成

  *   05 更新 index.tsx 导出 Icon 组件

  *   06 配置 npm files 然后 npm publish（翻车）

  *   07 睡一觉npm publish就好了

  *   08 dist目录里什么也没有？！

  *   09 修改package.json里的files配置

*   11 测试覆盖率与持续集成（下）/

  *   01 CI 新增 publish 阶段

  *   02 CI 使用 NPM_TOKEN 成功运行 npm publish

  *   03 自己写deploy.sh脚本

  *   04 CI 添加tag filters

  *   05 给自己的项目添加小徽标

  *   06 js、jsx、ts、tsx的区别

  *   07 单独为 CI 创建一个 jest.config.ci.js

  *   08 创建一个简陋的官网

*   12 项目搭建总结/

  *   01 项目搭建总结

*   13 WebStorm 配置/

  *   01 WebStorm 配置

*   14 React 组件的两种写法：Class 和函数/

  *   01 log大法解决所有bug

  *   02 选择你的UI风格

  *   03 React Class组件的一般写法

  *   04 React也有计算属性

  *   05 React 函数式组件的一般写法

  *   06 两种组件的区别

*   15 对话框组件 - Dialog/

  *   01 确定API

  *   02 Dialog 基本架子搭起来

  *   03 给 Dialog 加 CSS

  *   04 给 Dialog 添加事件处理

  *   05 使用传送门 React Portal API

  *   06 给 Dialog 提供便利的API - alert

  *   07 实现confirm和modal

  *   08 重构API

  *   09 总结

*   16 React 组件：Layout/

  *   01 初始化Layout

  *   02 拓展scopedClass

  *   03 创建Layout的子组件

  *   04 检测 children 的 type

  *   05 删掉代码里的 let

  *   06 重构 scopedClassMaker + 单元测试

  *   07 超级重构技巧！

  *   08 用函数式再重构！

  *   09 美化 Layout 的例子

*   17 吃自己的狗粮：制作官网/

  *   01 使用自己的 Layout 轮子

  *   02 给自己的官网制作一个logo

  *   03 官网雏形完成

  *   04 使用NavLink

  *   05 展示源代码

  *   06 源代码高亮

  *   07 生成doc文件夹

  *   08 部署！

*   18 React Form 组件（上）/

  *   01 确定 Form 组件 API

  *   02 受控组件 V.S. 非受控组件

  *   03 Form 组件接受 onChange 变成受控组件

  *   04 onChange 输出最新 FormValue

  *   05 表单验证设计思路

  *   06 如何展示 Form Error

*   19 React Form 组件（中）/

  *   01 制作 Input 组件

  *   02 使用 Table 来布局 Form 组件

  *   03 翻车：如何对齐用户名和密码

  *   04 制作 Button 组件

*   20 React Form 组件（下）/

  *   01 吐槽 optional chaining 提案

  *   02 使用 Promise.all 异步校验

  *   03 重构表单校验器 Validator

  *   04 高级重构技巧：自定义校验器

  *   05 其他功能展望

*   21 超难异步 BUG 解决过程/

  *   01 录屏

*   22 超难：如何消除 TS 代码里的 any/

  *   01 录屏

*   23 如何封装一个非 React 的轮子

*   24 交互型组件：scroll 组件/

  *   01 如何自制滚动条

  *   02 如何查看别人的源代码

  *   03 用 React 隐藏滚动条

*   25 scroll 组件(中)/

  *   01 创建滚动条

  *   02 计算滚动条高度

  *   03 滚动条 CSS

  *   04 制作可拖动的滚动条

  *   05 让滚动条与内容同步

*   课件资料/

  *   1.React 入门水平自测题/

    *   0 课程简介.md

  *   2.课程介绍/

    *   0 课程简介.md

  *   3.函数式编程语言/

    *   0 课程简介.md

  *   4.面向对象的核心/

    *   0 课程简介.md

  *   5.webpack 4 环境搭建（上）/

    *   0 课程简介.md

  *   6.webpack 4 项目搭建（下）/

    *   0 课程简介.md

  *   7.第一个组件：icon（上）/

    *   0 课程简介.md

  *   8.第一个组件：Icon（下）/

    *   0 课程简介.md

  *   9.单元测试/

    *   0 课程简介.md

  *   10.测试覆盖率与持续集成（上）/

    *   0 课程简介.md

  *   11.测试覆盖率与持续集成（下）/

    *   0 课程简介.md

    *   1. ⚠ CI 没有检测到 tag 怎么办？⚠.md

  *   12.项目搭建总结/

    *   0 课程简介.md

  *   13.WebStorm 配置/

    *   0 课程简介.md

  *   14.React 组件的两种写法：Class 和函数/

    *   0 课程简介.md

  *   15.对话框组件 - Dialog/

    *   0 课程简介.md

  *   16.React 组件：Layout/

    *   0 课程简介.md

  *   17.吃自己的狗粮：制作官网/

    *   0 课程简介.md

  *   18.React Form 组件（上）/

    *   0 课程简介.md

  *   19.React Form 组件（中）/

    *   0 课程简介.md

  *   20.React Form 组件（下）/

    *   0 课程简介.md

  *   21.超难异步 BUG 解决过程/

    *   0 课程简介.md

  *   22.超难：如何消除 TS 代码里的 any/

    *   0 课程简介.md

  *   23.如何封装一个非 React 的轮子/

    *   0 课程简介.md

  *   24.交互型组件：scroll 组件/

    *   0 课程简介.md

  *   25.scroll 组件(中)/

    *   0 课程简介.md

  *   26.交互型组件：下拉刷新组件/

    *   0 课程简介.md

  *   27.功能型组件：table 组件/

    *   0 课程简介.md

  *   28.功能型组件：手机选城市组件/

    *   0 课程简介.md

  *   29.数据型组件/

    *   0 课程简介.md

  *   30.Router 的原理和使用/

    *   0 课程简介.md

  *   31.如何做状态管理：redux/

    *   0 课程简介.md

  *   32.如何做状态管理：mobx/

    *   0 课程简介.md

  *   33.使用 Rails 搭建 API 服务器/

    *   0 课程简介.md

  *   34.Admin 页面的搭建/

    *   0 课程简介.md

  *   index.js

  *   intro.js