React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目
4 l( k6 t8 x5 X) @4 R; ^- G( K, A: s8 a) e6 o6 l( O
React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词
9 y( ?4 I& s2 d2 r [更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目，带领大家掌握最佳实践，全方位提升开发效率、开发质量和技术能力。 7 ^: O9 I- _% R' i" f, L
解锁 React + TS 高阶用法，突破前端成长瓶颈
( Z" I, F9 F' J/ H) r高清无密码，尽在IT直通车论坛！
+ ~* V s) }0 K0 _, z' O4 ~课程目录
! ?% {. L% Z E0 y. D! q+ L) n1-1 课程导学.mp42 m$ }, i5 U; \* i# X% M' K% S4 X
2-1 用 Create React App 初始化项目.mp4( V! y. ~4 _2 v Q% }
2-2 配置 eslint、 prettier 和 commitlint 规范工程.mp4
/ o7 b g* a. _+ G% U4 y2-3 对比常见 Mock 方案 配置 JSON SERVER.mp4
4 y) v# ~$ R; j& t W3 J3-1 用 JSX 列表渲染开发工程列表页面.mp4
' Q+ g% G3 C% D% u7 ^, \$ C3-2 用状态提升分享组件状态，完成工程列表页面.mp4
+ v3 p h; u) O0 U1 V" N8 n3-4 学习自定义Hook - 用useDebounce减少工程搜索请求频率.mp4/ ~" @3 ]; h" |$ I# H
4-1 为什么我们需要TS - 真实场景学习 TS 的必要性.mp4
/ c1 _8 a$ c) z/ _1 J7 ?/ \( P. S4-2 将项目列表页面JS改造成TS，增强类型，减少Bug.mp4' G% s: J8 ~( j8 [" [
4-3 TS知识梳理、总结与提高.mp4
( y0 S6 x5 h% A$ o8 d# P! x4-5 学习泛型，用泛型增强useDebounce类型灵活性.mp4; x* [; f% }4 i! t! ~5 E
4-6 作业练习 - 用 Hook + TS + TS泛型实现useArray.mp40 g4 d5 @9 S7 W+ U& M
4-7 作业解答 - ⽤ Hook + TS + TS泛型实现useArray.mp4
8 G U0 D8 Y% M, V) C) w5-1 用React表单、TS的类型继承和鸭子类型实现登录表单.mp4: A7 x$ R$ E; |, w/ O' \
5-2 连接真实服务端 - 专属开发者⼯具介绍与安装.mp4
' q/ T$ u" B: w* z7 ]* w' B5-3 来自讲师的重要提示：5-2 补充.mp4- v& P5 Z8 D2 J% \
5-4 JWT原理与auth-provider实现.mp4+ G+ G/ s6 j6 N$ Y4 A5 k: \
5-5 用useContext存储全局用户信息.mp4
$ H2 r0 p3 ]4 i7 Q6 M5-6 用useAuth切换登录与非登录状态.mp4
" @4 J T0 h2 y: z5-7 用fetch抽象通用HTTP请求方法，增强通用性.mp4! v8 d$ w- Y: V
5-8 用useHttp管理JWT和登录状态，保持登录状态.mp4
{) D2 T$ M+ w( _) q5-9 TS的联合类型、Partial和Omit介绍.mp4. {, {1 n8 x, @* i, J
5-10 TS的Utility Types-Pick、Exclude、Partial和Omit实现.mp4
8 [2 K2 I- R5 _# P+ ?* x8 z6-1 安装与使用 antd 组件库.mp4
+ v# w$ `8 W4 f; W2 b, K% i4 `6-2 为什么我们需要CSS-in-JS方案 -通过传统CSS缺陷学习CSS-in-JS必要性.mp48 p* i" J) c, f# a
6-4 最受欢迎的CSS-in-JS方案 - Emotion的安装与使用.mp4
$ s. [) b$ Y; E6-5 用Grid和Flexbox布局优化项目列表页面 .mp4
; L4 x6 m$ |( ]% s j6-6 用CSS-in-JS状态工程创建自定义组件：Row组件实现.mp4
3 [3 ~" f. a. v! J: ~6-7 完善项目列表页面样式.mp41 \; T* V& @7 @3 k
6-8 清除前面课程留下的警告信息.mp4
7 \9 P+ ~6 M9 Q6 w. O" C7-1 给页面添加Loading和Error状态，增加页面友好性.mp46 \2 r* _4 \- ]% D n
7-2 用高级 Hook-useAsync统一处理Loading和Error状态 .mp4
0 Y9 x1 J* l. B0 u1 z5 K& l7-3 登录注册页面Loading和Error状态处理，与Event Loop详解.mp4( R3 Z# Y5 @0 s( j/ P0 V
7-4 用useAsync获取用户信息.mp4
- v- P1 \& K7 K5 X& n7-5 实现Error Boundaries，捕获边界错误.mp48 h6 W4 ?1 x7 n1 ]3 n: R. G3 D# l! a
8-1 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解（上）.mp47 d6 E; |# u9 h0 z2 F+ n
8-2 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解（下）.mp4
2 m' I: ^' M) Y* |7 w1 t$ ^8-3 添加项目列表和项目详情路由.mp4% G7 d( G; v6 R1 j) x; A
8-4 添加看板和任务组路由.mp43 q* C5 w" j: T: k
8-5 初步实现 useUrlQueryParam 管理 URL 参数状态.mp4
, R; t# [5 n; A; c2 [, Z8-6 用useMemo解决依赖循环问题 - Hook的依赖问题详解.mp4& D# u" R4 X2 t4 p( u- | J2 ?9 W$ t
8-7 完成URL状态管理与JS中的 iterator讲解.mp4
g& D, j! R$ F- g5 \& F/ N& S, @9-1 实现id-select.tsx解决id类型 难题.mp41 P, U" O% K6 j( t" s) _# s- S a
9-2 抽象user-select组件选择用户.mp4
5 m* J; W8 ^% n; T9-3 用 useEditProject 编辑项目.mp4
) y* ^% c& A8 `8 _, |& [9-4 编辑后刷新-useState的懒初始化与保存函数状态.mp4
1 a( f# ~9 u9 f! F u9-5 完成编辑后刷新功能.mp4( w9 B( H3 m+ D* T
10-1 useCallback应用，优化异步请求.mp4
% F3 T# f) {5 ^$ y9 i9 ?10-2 状态提升，组合组件与控制反转(上).mp4; Z& Q+ v$ Q8 Y+ z4 w
10-3 状态提升，组合组件与控制反转(下).mp4/ s3 m4 k2 x8 T* y5 U
10-4 合并组件状态，实现useUndo.mp4
5 k. M: c8 K* \, _' n10-5 用useReducer进行状态管理.mp4
5 a# e. p& ]" X' H) h; I8 ?! N1 N2 c10-6 redux用法介绍.mp4
" ^: y4 X3 k! L' I10-7 react-redux 与 HoC.mp4
1 {8 ~2 N: @- T' X5 E2 v. ]10-9 为什么我们需要redux-thunk？.mp4# U. U `! T: {1 M! A+ Z
10-10 配置redux-toolkit.mp46 D; f/ f# n/ I2 F e; M+ x3 \
10-11 应用redux-toolkit管理模态框.mp4* r- C# w' R8 n6 y( ` g' f* l
10-12 用redux-thunk管理登录状态.mp4
3 U' M6 G' r+ A2 c& `* N$ l11-1 用url参数管理项目模态框状态.mp4
~% L ~0 `/ y1 ^2 n" J11-2 用 react-query 来处理 -服务端缓存-.mp4
/ A. O/ e4 |; w' F6 `; g11-3 类型守卫，用useQuery缓存工程列表.mp4
" j. ]- b$ W) _" c7 I11-4 编辑和添加工程功能(上).mp4$ l+ y% x8 R- X; _( m
11-5 编辑和添加工程功能(下).mp4% P9 @ F% [0 [2 n& S
11-6 抽象乐观更新通用hook.mp4
/ ^% Z4 Q6 h! V3 ^1 [* u11-7 修复url多余参数.mp4$ h0 X9 d, p$ w
11-8 跨组件状态管理方案总结.mp4" H+ ^ {! M2 G1 s# a
12-1 解决前面的 3 个 Bug.mp4. [5 p# b' z L7 E; _7 i
12-2 看板列表开发准备工作.mp4$ f) P& n: `- ^/ T
12-3 看板列表初步开发.mp4
- b! M( \* H, _2 F12-4 添加task, bug 图标.mp4& N$ V. n! [6 O
12-5 添加任务搜索功能.mp4
a- P+ V% [( }: \12-6 优化看板样式.mp4( @- m( \+ O% C: E. Z! g2 \8 t7 U
12-7 创建看板与任务.mp4
( ]/ f6 `! t) }5 M( F% c. g12-8 编辑任务功能.mp4
/ Q5 s& b( V6 k7 L0 x; Y- W, q# a7 ?12-9 看板和任务删除功能.mp4
7 W+ V' J4 i4 ]& ]* s! \0 ~12-10 拖拽实现(上).mp45 x% R }4 S: a1 }! h$ x
IT直通车论坛新增8节课 20210411更新
/ Q$ W4 Q* u7 k: B: e) {. K12-11 拖拽实现(下) .mp44 z2 X/ x# m. }* N
12-12 拖拽持久化(上) .mp45 _! f5 m7 {5 X" \2 w T$ x% }% w
12-13 拖拽持久化.mp4
" r' c; r7 t4 H1 a; N, u12-14 排序乐观更新 .mp4& H% H# }$ X" v+ p; }9 V3 R9 Y
12-15 任务组页面.mp4* T) ~) Q9 P( S. g7 z0 {' [# U5 u% ]
12-16 任务组页面(下) .mp4
( v3 T2 c M! C! E; a" _- _12-17 完成popover .mp4; l; ^; u5 [* [+ r
12-18 开发完成，部署页面 .mp45 Y' v }* }# u+ ~9 t$ U
$ y5 \) j$ \% X8 j {* D
代码资料分支: s: ?2 H; s2 \* x3 x; P1 ]) r
react-ts-hook-jira-develop.zip
* f3 R/ r% u& _ H# f" Z. H; U f3 Preact-ts-hook-jira-master.zip
0 k+ e/ c% M4 p% x& M Jreact-ts-hook-jira-preview.zip% K( m! X& j+ N5 d, v) L2 }
react-ts-hook-jira-redux-toolkit.zip8 @0 d4 X3 C% T: _3 e
8 t" r* F$ h6 S5 o, i视频截图& h. l+ f0 \" A1 z& U) i
( P1 w" R5 L1 |* Q# \+ d8 \4 ?1 o资源存放>百度网盘4 t' q* w: _* ]
& A/ J- u: O) e0 K! J
下载地址
* \( g$ v* R6 s' w' F7 v9 D% t: C' I
VIP会员全站免金币
9 a/ e! A# |: w( Y0 q0 [IT直通车已为全国各地程序员提供上千G课程资源4 C* w* M4 t5 R1 \' ^
如您需要购买本站VIP会员，请点击「开通VIP」享受全站资源免金币无限制下载！1 I9 u- H! E" h% s. R
$ Y m# }8 w# Y+ K Z" i- P失效反馈
0 |/ z) I: n5 |% _6 u2 bIT直通车所有资源都存放在自己注册的百度网盘，失效可修复，确保持续可用
/ X8 r2 G5 A# P, `如您需要的资源链接提示失效，请尽情反馈给我们，将在收到反馈后尽快修复「点击反馈」) t+ E4 X0 |% ]. n
( U" i3 D: {; l1 p8 C
获得帮助
4 \ S3 `6 B( l; Q2 p8 H- v需要帮助吗？点击网站右侧在线客服，7X12小时在线！
6 F; ?, k+ o( y1 H1 ]! y. c: l2 r) l* v6 U8 T) n0 s7 C) X
- K+ i+ i9 V* c8 w/ {
|
[复制链接]
