#最新

Typescript + React 高仿 Antd 从零到一打造自己的组件库 完整无密

$ G3 |7 }) \* G& I& }5 q4 R9 E7 F% y
课程目录
1-1 导学（不看错过1个亿）.mp4* W; A4 c6 ]9 ^% O
1-2 代码库使用注意事项（必看）.mp4% [% l& f. Q” |6 X1 w5 c7 `6 B5 G# C
2-1 什么是 Typescript.mp4& S’ Y5 ^: |+ M  F8 k2 z3 I) ]8 M
2-2 为什么要使用 Typescript.mp4$ a/ @) T4 w4 g- |! Z5 ?6 d
2-3 安装和初试 Typescript.mp4– I/ e3 O6 h7 _+ Q8 p
2-4 基础类型.mp44 o* n” A! F+ d8 @, h
2-5 any 类型和联合类型.mp4
2-6 Array 和  Tuple.mp4‘ F# s$ n6 F7 U/ A; I
2-7 interface 初探.mp4! j0 {8 T3 ]* u9 w3 x8 ^8 b
2-8 函数和类型推断.mp4
2-9 类（Class）第一部分.mp4
2-10 类（Class）第二部分.mp4
2-11 类和接口.mp4
2-12 枚举（Enum）.mp4‘ n8 W4 u- k# {% I
2-13 泛型（Generics） 第一部分.mp4( i; T& G/ f& P1 E* `2 a
2-14 泛型（Generics） 第二部分 – 约束泛型.mp4
2-15 泛型（Generics） 第三部分 – 类和接口.mp45 L” A7 G* F9 i’ C& E+ C# g
2-16 类型别名和类型断言.mp4* n* Y; k- A; W
2-17 声明文件.mp4
3-1 React简介和基础知识回顾.mp4
3-2 配置 react 开发环境.mp43 ~2 |( W) U& R: R, e1 u0 X7 \
3-3 第一个组件 – ts为组件助力.mp42 A2 {4 M0 K$ h/ Q4 X9 U, v
3-4 什么是 和 为什么要使用 React Hook.mp4; v; G: R3 C8 s# R1 h( ^
3-5 在函数组件使用 state – useState Hook.mp4
3-6 useEffect 第一部分 – 初出茅庐.mp4
3-7 useEffect 第二部分 – 有始有终.mp44 ^5 i9 b: I+ M9 l1 V
3-8 useEffect 第三部分 – 控制运行.mp4
3-9 自定义 Hook – 重构 MouseTracker.mp4+ J” W7 X6 M’ @6 K% w& P# o
3-10 自定义 Hook 第二部分 – HOC的劣势.mp4
3-11 自定义 hook 第三部分 – 正确的方式完成 URLLoader.mp4
3-12 useRef – state遇到的难题.mp4  z5 b+ R1 `6 K2 S8 i: W9 R
3-13 useRef – 多次渲染之间的纽带.mp4
3-14 useContext – 解决多层传递属性的灵丹妙药.mp4
3-15 hook 规则和其他 hook.mp41 u: D; [* E6 Y6 L
4-1 组件库开始起航 – 需求分析.mp4
4-2  文件结构和代码规范.mp4
4-3 样式解决方案分析.mp4
4-4 做一次设计师 – 添加自己的色彩体系.mp4
4-5 更多样式变量 – 添加字体变量解决方案.mp4, p, H  [+ E# ~
4-6 初次亮相 – 添加 normalize.css.mp4
4-7 Button 组件需求分析.mp4# C2 x  m; g! [( @7 Y8 Z$ x
4-8 小试牛刀 – Button 组件编码 第一部分.mp4
4-9 添加 Button 基本样式.mp4/ t3 r5 M( s& d0 E6 S: S- Z; P
4-10 升级 Button 组件样式.mp4
4-11 精益求精 – Buton 组件编码第二部分.mp4+ u0 A/ h% n+ v, S- q4 G* T$ g/ s” n
5-1 为什么要有测试.mp4
5-2 通用测试框架 Jest 出场.mp46 H- u: W* m5 v8 v! N  e
5-3 React 测试工具 – react-testing-library.mp4
5-4 添加Button 测试代码 第一部分.mp41 i/ q$ b8 K) e& F+ f’ @
5-5 添加Button 测试代码 第二部分.mp4; r  Q” Q2 U. r
6-1 Menu 组件需求分析.mp48 V( m1 u( H* ^6 Z5 f
6-2 基础架构 – Menu组件编码第一部分.mp47 @/ Y! i# M, f6 o! ]; t0 }
6-3 需求升级 – Menu 组件编码第二部分.mp4
6-4 添加 Menu 样式.mp4) G. V# V& ~0 }6 w1 {
6-5 测试驱动 – Menu 测试添加.mp4
6-6 日趋完美 – Menu 组件编码第三部分.mp4
6-7 功能继续升级 – SubMenu 下拉菜单编码第一部分.mp4
6-8 添加交互 – SubMenu下拉菜单编码第二部分.mp4
6-9 大功告成 – SubMenu 下拉菜单编码第三部分.mp40 @; a( c5 @! X# C3 x, m
6-10 完美组件 – SubMenu 组件添加测试.mp48 D0 D# z4 s8 G3 K: m( |
7-1 图标解决方案简介.mp4( @3 Z0 x1 r- U+ }
7-2 他山之石 – Icon组件编码第一部分.mp4
7-3 Icon 组件样式添加.mp4
7-4 让图标动起来 – 动画效果第一种实现方法.mp4) H’ R1 Y( w, a: [% [) s
7-5 React Transition Group 简介.mp4
7-6 React Transition Group 实践 – 动画效果第二种实现方式.mp4” a. m# W. x  J. ?$ @) {
7-7 尽善尽美 – React Transition Group 添加菜单消失的动画.mp4
7-8 拿来主义 – 自定义 Transition 组件编码第一部分.mp49 y# ]# p4 Z) w” M
7-9 拿来主义 – 自定义 Transition 组件编码第二部分.mp4/ G+ J9 _( Y’ W
8-1 什么是 Storybook.mp4% V’ G( r6 f3 R4 D$ _3 ]
8-2 安装 Stroybook.mp41 y2 H” M’ D( C; Y% _6 T& t
8-3 Storybook 支持 Typescript.mp4# q, m9 Y# H” R8 A
8-4 展示秀- 为 Button 添加 Story.mp4/ H0 E$ y& _% e0 M; T
8-5 如虎添翼 – Stroybook addon插件系统介绍.mp4  E6 b: p3 I, F1 I5 w* u; k
8-6 更多信息 – 添加 Storybook addon-info 插件.mp4
8-7 自动生成文档 – 添加 react-docgen-typescript 第一部分.mp4
8-8 自动生成文档 – 添加 react-docgen-typescript 第二部分.mp4  [! c0 M) ^1 S/ d/ T
8-9 大功告成 – Storybook 最终样式调整.mp4
9-1 知己知彼 -Input 组件需求分析.mp48 N, ?# t’ o9 H2 Q( Y1 T
9-2 抛砖引玉 – Input 组件伪代码实现.mp4
9-3 持续优化 – Input组件代码实现和优化过程.mp4; a5 n3 k5 `, g
9-4 新的挑战 – AutoComplete组件分析.mp48 z3 t* j& d; X1 _5 G! x0 F3 n
9-5 基本骨架 – AutoComplete 编码第一部分.mp4* r% v. q3 P( t/ N, }0 M$ x
9-6 AutoComplete 支持自定义模版.mp4
9-7 异步来了 – AutoComplete 支持异步请求编码.mp4& d, A’ t9 X# }+ |, _  r% x4 b
9-8 老瓶新酒 – 使用自定义Hook实现 函数防抖.mp4
9-9 AutoComplete 支持键盘事件.mp4
9-10 妙用 useRef – 实现 clickOutSide 功能-.mp4. w5 W) n( W/ F. m0 w
9-11 完美收尾 – AutoComplete 添加单元测试.mp43 @7 B& |) ?* ?( [) g% P; x
10-1 最终任务 – Upload组件需求分析.mp4. K” X$ M  k) ]4 l’ M+ A
10-2 下一代 HTTP 库 –  axios.mp4( M) {( G, {$ L2 i( b) d0 c
10-3 在线 mock server 和 axios 简单使用.mp4
10-4 上传文件的基本方式.mp4& F2 R, ^” G& i’ b) M3 {, i/ G$ a
10-5 完成基本流程 – Upload 组件编码第一部分.mp4
10-6 完善生命周期 – Upload 组件编码第二部分.mp4
10-7 创建列表数据 – UploadList 组件编码第一部分.mp4+ X3 k$ N, X5 R$ C. D9 c  P0 q
10-8 显示上传数据 – UploadList 组件编码第二部分.mp4
10-9 显示上传进度 – 添加 Progress 组件.mp45 V; N* q/ X4 e- G* @
10-10 精益求精 – 再次分析 Upload 组件更近一步需求.mp4
10-11 Upload 增强交互第一部分.mp41 b4 A, i* {3 F+ y
10-12 拖动上传 – 支持 Drag and Drop.mp4
10-13 异步怎样测试？ – Upload 测试第一部分.mp48 R6 ?% t. j5 X  i4 c4 i” W# P! p
10-14 拖动事件怎样测试？ – Upload 测试第二部分.mp44 E3 H) i% J2 C* S8 C
11-1 Javascript模块化发展历史.mp4
11-2 webpack 到底完成什么任务？ – bundler的神奇功效.mp45 O” w$ y& q: i
11-3 怎样选择 Javascript 模块格式？.mp4
11-4 创建组件库模块入口文件.mp4
11-5 驯服tsc – tsconfig 编写第一部分.mp4$ r& x- K: h1 c( B* q: E
11-6 驯服 tsc – tsconfig 编写第二部分.mp4: u1 x; Q8 Q” Y3 N
11-7 生成最终使用的样式文件.mp4
11-8 使用 npm link 本地测试组件库 第一部分.mp47 g0 |- j. m” l/ }/ x
11-9 使用 npm link 本地测试组件库 第二部分.mp4
12-1 Npm 简介.mp4+ u. M* `/ m( U5 x* K; [
12-2 发布组件库到 npm.mp42 o- d* ?+ l% ?  t) F
12-3 瘦身任务 – 精简 package.json 依赖.mp4
12-4 万无一失 – 添加发布和 commit 前检查.mp4
12-5 使用 Storybook 生成静态文档页面.mp4
12-6 CI CD 简介.mp4
12-7 使用 travis 自动运行测试.mp4
12-8 使用 travis 自动发布文档页面.mp4
13-1 课程总结.mp4: u: F4 Z- e- A
learn-typescript-master.zip, H( p: d% \3 X/ s! O
react-with-ts-master.zip& t( h+ O6 ?$ C* y) A; u. `- ]1 [/ u( s
vikingship-master.zip