|
〖课程介绍〗:2 e. D. y/ ?# E$ ~, _
同学们在学习了一门技术的基础知识后,怎样持续提升这门技术达到更高水平?怎样写出高质量符合大厂要求的代码?写什么样的项目才能提高实力和扩大影响力?本课程给出了答案:真实模拟大厂开发大型开源项目的流程,从零到一高仿 AntD 使用 Typescript 和 React 开发自己的组件库,在这其中穿插了一系列的知识点: 大型项目的样式组织,react 组件测试,react 动画实现。开发完毕还实现了模块化打包,代码发布再到 CI/CD 的全流程。
0 ^0 A* V- x8 C) L( ?( O9 }& h" E1 a9 d+ O+ n$ Y% ]
〖课程目录〗:7 o' M1 f' P: Q8 N" D
第1章 课程导学(此章节必看)
" B T- V$ G9 R! S7 P 介绍了整个课程的背景知识,项目简介,学习流程,可以掌握的知识点,以及学习方法和前置知识。
# a" X1 y4 i9 P* n- O+ T5 B3 @4 t+ j* N7 L5 }9 P+ l7 i- Z
1-1 导学(不看错过1个亿) 试看% M% n! h% k/ k0 O% q+ I
1-2 代码库使用注意事项(必看)
% I2 O( p, T* \9 L0 [ 第2章 欢迎来到类型的世界 - Typescript
! Y$ C# N, F+ `( \* o/ ^5 M7 n* J" [8 z2 b 本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势,带领大家学习 TS 中的各种基础类型,然后进阶到复杂类型,包括:Array, Tuple, interface, function, Class, Enum, Generices等,迅速帮助大家理解 TS 的基础使用方式和语法。 ...
- j% E" W& v. B5 z6 E
7 w% E5 b" n+ M6 {( I 2-1 什么是 Typescript 试看
, a& {+ u4 |" J& X: P9 }( K; s/ W 2-2 为什么要使用 Typescript
, T" O( F2 @3 y5 d1 U- N/ a: _, W* X5 [ 2-3 安装和初试 Typescript
m8 P/ Y3 A$ M" j: E 2-4 基础类型
0 u" Z1 S4 S3 \6 x4 E' b 2-5 any 类型和联合类型; L" K! y! l# u5 i
2-6 Array 和 Tuple: e. U6 V4 v3 R5 K9 t( w
2-7 interface 初探
' N( N& d. H" \) s$ o; C6 t 2-8 函数和类型推断
" l! C" V0 |: W0 i0 U7 z# l+ {: U7 n 2-9 类(Class)第一部分( _9 M6 I$ o- _3 f
2-10 类(Class)第二部分
" _/ w! [/ `$ J' ~* u 2-11 类和接口
( c5 W0 J# Z1 i2 z7 l$ }' H4 e. g 2-12 枚举(Enum)
* S3 n: A, \- F+ h 2-13 泛型(Generics) 第一部分
, e5 M, l {( e; i0 Y$ d 2-14 泛型(Generics) 第二部分 - 约束泛型
) E3 |/ m) {( F 2-15 泛型(Generics) 第三部分 - 类和接口& D# Y: a8 g( p5 T, j
2-16 类型别名和类型断言) Y+ d4 }& c% L* D: b7 E, g8 ^
2-17 声明文件
" s# a. L* d$ l1 r# { 第3章 神奇的 React 配合 typescript,完美输出
6 a! x1 Y" t M9 J' u 本章回顾了 React 的基础知识,从而引出了全新的 React Hooks,配合上一章typescript的基础知识,详细讲解了 useState, useEffect, 自定义Hook,useContext 和 useRef 等基础知识,为组件库的开发打下坚实基础。
; d# n C! k9 j+ f$ W
, y( z9 X( m J, C' } 3-1 React简介和基础知识回顾& {, H* p# K6 m: h) w- v0 r
3-2 配置 react 开发环境
% P2 ~' b) e, g' Z; T9 i 3-3 第一个组件 - ts为组件助力" ~1 K0 r3 x2 U8 m: W& j' a
3-4 什么是 和 为什么要使用 React Hook- Y& H2 O5 _' n+ d) p! t
3-5 在函数组件使用 state - useState Hook
8 {7 ^7 `+ n% V 3-6 useEffect 第一部分 - 初出茅庐% g( _. `7 k, x% ?
3-7 useEffect 第二部分 - 有始有终
/ X/ j) G4 e6 |% L9 r% C: X, | 3-8 useEffect 第三部分 - 控制运行
% c9 S E; ?. K; W- |. G 3-9 自定义 Hook - 重构 MouseTracker$ i8 m! ~# r: |+ Q, U
3-10 自定义 Hook 第二部分 - HOC的劣势/ C5 p' b4 j$ b% C/ w+ q
3-11 自定义 hook 第三部分 - 正确的方式完成 URLLoader3 F" p0 E t# M( @1 R4 N2 n
3-12 useRef - state遇到的难题
X2 \1 g: C; n% i; D: m 3-13 useRef - 多次渲染之间的纽带
7 v. x0 ] g( P( g: I$ }* w6 X9 e. G 3-14 useContext - 解决多层传递属性的灵丹妙药
- A% z' c d4 L/ Z 3-15 hook 规则和其他 hook
7 `9 Q8 u0 t$ s+ | 第4章 组件库起航 - 你真的能写的好看起来简单的 Button 组件吗?5 x; I, e3 B7 j2 a' z7 n& b
本章正式进入组件库的编写,前半部分规定了文件结构和代码规范,分析了样式解决方案,添加了一系列样式的基础元素,后半部分渐进式的完成了 Button 组件的编码工作。# O5 `4 E5 s0 T* j$ T. ^0 G2 m
5 c* X+ s$ l+ ?2 i. [ 4-1 组件库开始起航 - 需求分析7 f$ U4 D0 x+ }: |3 j
4-2 文件结构和代码规范
% M- @0 U5 n! B& c- l: Y 4-3 样式解决方案分析
, o( O+ F5 E! q1 _6 \' t: C+ A 4-4 做一次设计师 - 添加自己的色彩体系
1 e. _8 o4 ^% H8 ~- F0 P3 P 4-5 更多样式变量 - 添加字体变量解决方案
7 l( E) p1 G7 D 4-6 初次亮相 - 添加 normalize.css, {" J# E* }# h# J, M* K7 R
4-7 Button 组件需求分析
% S+ M" l7 k" D+ S5 p( r. R* z: q1 { 4-8 小试牛刀 - Button 组件编码 第一部分
8 Q9 o' Q; g- w$ c1 X9 r 4-9 添加 Button 基本样式
% J4 p6 F% G4 B9 v6 Y 4-10 升级 Button 组件样式1 K% D( g/ m# J+ C q5 ^
4-11 精益求精 - Buton 组件编码第二部分 试看
2 Q) A" d" r" @% l5 i 4-12 完成 Alert 组件/ q6 h; F2 J# E; J# S5 u. l+ \6 M O# {
第5章 组件测试
" t) a/ q- b+ ~( _' N 本章从什么是测试入手,简介了测试的基本概念,介绍通用测试工具 Jest 和 React 测试框架 react-testing-library,然后使用这两种工具完成Button组件的单元测试。: G/ R+ @' V3 N R5 C; ], s
1 n$ o8 N/ j: Y* w. O 5-1 为什么要有测试. B) U' Y! u. ]; k9 t0 @
5-2 通用测试框架 Jest 出场+ S1 b1 j: A) ~
5-3 React 测试工具 - react-testing-library9 K c5 ]: f$ g9 @
5-4 添加Button 测试代码 第一部分
% u6 o, q: L& x( T+ h# ~- n 5-5 添加Button 测试代码 第二部分
! W" g+ Y6 j! H/ U6 b 5-6 Alert 组件添加测试用例2 q' y& c7 K# r
第6章 更上一层楼 - 完成 Menu 组件
1 d- H. t. l7 \6 ~) v* b 本章在前两章的基础上,更上一层楼,完成Menu 组件,从需求分析,到组件编码,到再次分析需求,到再次完成编码,最后完成组件的所有单元测试。6 h" c9 A& L" o; K, ^( s' I+ ]
1 J J( H, U* l 6-1 Menu 组件需求分析8 ^2 s) y3 M" e+ L0 Q
6-2 基础架构 - Menu组件编码第一部分" y, K) C3 h! U# f: Q
6-3 需求升级 - Menu 组件编码第二部分
2 C+ ^) T! U) `- o b6 S+ } 6-4 添加 Menu 样式
' {) z/ i7 N' R: `+ O8 K 6-5 测试驱动 - Menu 测试添加
4 a& U6 ?: L1 D! ^! N. d 6-6 日趋完美 - Menu 组件编码第三部分
( g$ {/ \4 u6 V 6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分+ ]0 g2 d+ p' ~- ]! n7 t8 r
6-8 添加交互 - SubMenu下拉菜单编码第二部分3 M1 \5 u- P- p
6-9 大功告成 - SubMenu 下拉菜单编码第三部分" V: A$ h$ ?% B, j
6-10 完美组件 - SubMenu 组件添加测试7 e$ a. v4 }! W- n4 j
6-11 Tabs 组件1 Z0 X; Y% ?5 }' t ?( c9 l2 q
第7章 他山之石 - Icon 组件 和 Transition 组件
( T& s6 r2 G& p) ?2 R* V. G" c 本章介绍怎样使用第三方库 Fontawesome 和 React-Transition-Group 完成图标和 React 动画的解决方案,同时将它们经过自定义,改造成新的组件。
, |2 M' N) Q; O/ O7 S7 ?7 u
Z* ?% b u+ A+ ?. q! p 7-1 图标解决方案简介- ?! F7 c0 A+ p; V$ e3 ?( p$ O
7-2 他山之石 - Icon组件编码第一部分 D9 o% d7 w+ }9 C+ w/ C
7-3 Icon 组件样式添加
5 E7 H( r9 s; p# T* D 7-4 让图标动起来 - 动画效果第一种实现方法7 x) r1 P9 k* s2 t5 F+ j
7-5 React Transition Group 简介
/ w' }, T% e/ W1 J2 A4 |7 G3 O7 P 7-6 React Transition Group 实践 - 动画效果第二种实现方式
9 I6 {- k) A3 g3 q* A& D 7-7 尽善尽美 - React Transition Group 添加菜单消失的动画. Y \; k) j# w
7-8 拿来主义 - 自定义 Transition 组件编码第一部分
8 N2 S+ p7 a4 y+ u7 ?: I 7-9 拿来主义 - 自定义 Transition 组件编码第二部分8 W" b. I0 K0 }) c! T7 w. r3 K# j
7-10 完成的 Icon 和 Transition 组件
3 K& M# Q7 r) o3 F% I4 B 第8章 Storybook - 本地调试组件和生成文档页面的利器( K8 k U5 I% {0 @2 V2 d
本章从 Stroybook 的定义和安装入手,再到怎样添加 Story,安装插件,到最后完成自动生成文档的任务。
5 @- ~* a$ P* P6 u% b7 g! }" r1 W0 o1 g3 u* u' T/ g
8-1 什么是 Storybook
; t" d$ T! w& o' G/ J. \ 8-2 安装 Stroybook+ i; B8 Y) k0 v
8-3 Storybook 支持 Typescript
5 x, b$ ^6 F2 d! m$ Y8 c* i Y4 k 8-4 展示秀- 为 Button 添加 Story1 f/ V" o6 b0 f/ e# g% b
8-5 如虎添翼 - Stroybook addon插件系统介绍! D8 y0 }2 p3 G8 Z7 r1 z- \ e7 E- ^! f
8-6 更多信息 - 添加 Storybook addon-info 插件7 I% L S2 }: c# ?* |* ^+ L
8-7 自动生成文档 - 添加 react-docgen-typescript 第一部分
) z! r* O8 N6 O( J) ^- a 8-8 自动生成文档 - 添加 react-docgen-typescript 第二部分- P! L8 [9 s! X7 U6 Q
8-9 大功告成 - Storybook 最终样式调整
& T5 d; i/ i$ |) t% T 8-10 完成的 storybook 的架构,给剩下的组件添加 stories
0 I t) P* W; g/ ~* @! F8 W 第9章 进入表单的世界 - Input 组件和 AutoComplete 组件, V; o/ }* F$ G& R' O2 B6 ^+ H8 p
本章进入表单的世界,从简单组件 Input 入手,引出 AutoComplete 组件的分析和实现,在这个过程中,我们会学习 异步请求,函数防抖,键盘事件,useRef 等一系列功能。, m0 s! E) }5 }5 S( T
; N% _. @/ k: h0 ^% `: H. e; F0 ~ 9-1 知己知彼 -Input 组件需求分析
( Y! ?0 `5 i% S# U 9-2 抛砖引玉 - Input 组件伪代码实现
1 |$ E5 L9 `) I% O 9-3 持续优化 - Input组件代码实现和优化过程
% I0 _, U c( w) K m+ c 9-4 新的挑战 - AutoComplete组件分析8 t9 I# v; Q/ n* W4 s8 L1 }. K
9-5 基本骨架 - AutoComplete 编码第一部分4 S3 I/ d. @8 s4 z0 b! ]
9-6 AutoComplete 支持自定义模版9 s g3 _$ \ t: L a
9-7 异步来了 - AutoComplete 支持异步请求编码
/ f! u- v4 H7 |, D8 ^5 s 9-8 老瓶新酒 - 使用自定义Hook实现 函数防抖
- r- J& J$ ^4 ]& P 9-9 AutoComplete 支持键盘事件
: R/ Q$ F: y) G# K* H 9-10 妙用 useRef - 实现 clickOutSide 功能-
& W( R3 g2 O' [3 `8 `- t 9-11 完美收尾 - AutoComplete 添加单元测试! N* d4 \+ e/ K1 {
9-12 Select 组件
3 O8 n' P; a: G7 ]% ]0 x/ H' a 第10章 终极任务 - Upload 组件
1 o1 E; w2 t* U( R 本章实现了 Upload 组件从分析,编码,测试的全过程,在这个过程中,我们将会学到:使用 axios 发送异步请求,在线 mock server 的简单使用,HTTP 异步上传文件的基本知识,拖动文件上传怎样实现,异步和拖动怎样写单元测试。
! v/ r/ u c' p: c* M( a
% l. ~" T7 O1 d( E( m. X 10-1 最终任务 - Upload组件需求分析
# @" o$ L) }0 b. b# [9 c) e 10-2 下一代 HTTP 库 - axios9 ~* O" P7 ~" M2 r7 y! z M
10-3 在线 mock server 和 axios 简单使用
" Y3 i" d3 h j7 ?# i 10-4 上传文件的基本方式3 v) D4 } X7 g7 l+ L1 }/ q3 N5 T% c
10-5 完成基本流程 - Upload 组件编码第一部分# p$ R# H) o4 f6 i; K' Q
10-6 完善生命周期 - Upload 组件编码第二部分8 o& l& _% Z+ i1 `# S& I
10-7 创建列表数据 - UploadList 组件编码第一部分( b3 V2 P2 w' m8 i& B% e* U: P# r
10-8 显示上传数据 - UploadList 组件编码第二部分
8 Z+ d* W+ V9 V! `& K 10-9 显示上传进度 - 添加 Progress 组件
7 U) H! k8 g: W 10-10 精益求精 - 再次分析 Upload 组件更近一步需求, Z2 h$ x: E1 S% S& A' w' A
10-11 Upload 增强交互第一部分
9 ?- Q y* n6 b7 r2 n3 u3 y 10-12 拖动上传 - 支持 Drag and Drop
% A+ f! k5 X& G 10-13 异步怎样测试? - Upload 测试第一部分
7 e) K8 ~. ^ G1 J$ N 10-14 拖动事件怎样测试? - Upload 测试第二部分, i* I* z2 U* e8 V8 e6 e# k
第11章 Javascript 模块打包 - 需要什么类型的模块供各种环境使用?0 ?6 ~8 R O7 N( B C7 F
本章从 Javacript 模块化历史说起,描述了 webpack 等 bundler 的主要功效,对比不同的模块类型的优劣,然后使用 tsc 打包成 es6 modules,并且使用 npm link 在本地完成测试。
& m6 f+ b, v' ~3 n3 d: L" A V# ]( B; p/ Y5 O
11-1 Javascript模块化发展历史
' p3 g4 |0 y+ ^( x 11-2 webpack 到底完成什么任务? - bundler的神奇功效 B0 P4 r# j1 V2 F
11-3 怎样选择 Javascript 模块格式?; ^2 Y6 j1 V6 K- E9 q
11-4 创建组件库模块入口文件+ U' f% ]* ^! r1 m s4 m" }' i
11-5 驯服tsc - tsconfig 编写第一部分5 w0 I8 n4 V. l6 a$ E
11-6 驯服 tsc - tsconfig 编写第二部分; z4 Q$ s g q7 ?- I9 g
11-7 生成最终使用的样式文件 ?5 v4 b: H0 h) g8 O4 n/ K+ Q
11-8 使用 npm link 本地测试组件库 第一部分
Q7 t) V% t3 f 11-9 使用 npm link 本地测试组件库 第二部分
7 L- j E" U* Q 第12章 大功告成 - 发布到 Npm,以及添加 CI/CD 支持
. T' b2 X( C, [- s; T 本章从 Npm 的简介开始,介绍了怎样将组件库发布到 npm,然后优化了 package.json 的依赖,再到添加 commit 和发布检查,最后介绍了使用 travis 完成组件库 CI/CD 的一些基本流程。8 r R+ h* v7 L3 ~; G; Z' v) ]
6 v. T" B- i( }. n5 Y$ J
12-1 Npm 简介# J/ _+ p/ u; f) | z# A. q
12-2 发布组件库到 npm
2 v' q* O$ I" b+ @/ R; w 12-3 瘦身任务 - 精简 package.json 依赖
: R& K8 ~/ |5 l% l, Z. S$ @ 12-4 万无一失 - 添加发布和 commit 前检查
. W1 r+ Y; Z+ c) a1 h 12-5 使用 Storybook 生成静态文档页面
$ Q' y% Q& K0 D' z& q0 q* o 12-6 CI CD 简介
" q {; z& H9 q! a2 H7 K g4 K' i% s 12-7 使用 travis 自动运行测试
. I9 Q* w; }7 U7 {* ?+ T 12-8 使用 travis 自动发布文档页面
, t% o7 q, E' A2 z9 b) d/ o 第13章 课程总结
0 u. u% C8 r& A3 n' y+ O) J6 [ 本课程的回顾和总结以及展望。
8 z+ T8 x" Q! k/ B% R1 w: p2 p+ r# D0 _
13-1 课程总结
! [3 Z% |8 W8 P4 T〖视频截图〗: 〖百度网盘下载地址〗: ---------------------------------华丽分割线-----------------------------------华丽分割线--------------------------华丽分割线-------------------------华丽分割线-----------------------
' }; y1 S3 `6 x0 T! C9 n r) Q4 n0 o) M5 @' G1 k
〖下载地址失效反馈〗:
# \$ W h- _% u3 t, G9 Z& u如果下载地址失效,请尽快反馈给我们,我们尽快修复。反馈地址:https://www.itspxx.com/forum-85-1.html
0 N* H3 Y* ^( S7 c' w
- S, K3 d8 s7 T% `0 \) \. C〖赞助VIP免学币下载全站资源〗:
, G$ x! n. S+ y: o! D3 @- V全站资源高清无密,每天更新,vip特权了解一下:https://www.itspxx.com/plugin.php?id=threed_vip#vip_info0 ~& I6 |( R$ o4 t7 p
* C2 ]! h: {' ~( b〖客服24小时咨询〗:) m( {; P- r; R& A$ J2 Z( y7 m! ^
有任何问题,请点击右侧QQ咨询。 |
|