React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目

  [复制链接]

2125

主题

2144

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
39717
admin 发表于 2021-4-2 22:02:53
39578 149

React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目

React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目

3 r( }) t% @- S! E
8 l" i* M+ w! v9 T. K. B7 }6 D  S
React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词
  {2 k% `; ]) d8 t+ g& w& m4 k; @0 b; G
更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目,带领大家掌握最佳实践,全方位提升开发效率、开发质量和技术能力。

+ `& ^; t, q+ S+ h: o6 R
解锁 React + TS 高阶用法,突破前端成长瓶颈
' E- r: m0 `- u+ c5 d1 M% H0 o
高清无密码,尽在IT直通车论坛!
! c' m2 r) t% p
课程目录" W4 K2 \. d& E
1-1 课程导学.mp4) k" ^6 P# q* U* R- \
2-1 用 Create React App 初始化项目.mp4, S' F  E! z7 i; |+ u9 _$ b1 X) g; [
2-2 配置 eslint、 prettier 和 commitlint 规范工程.mp4
. P3 ?$ H+ v2 I% s+ D9 I! p2-3 对比常见 Mock 方案 配置 JSON SERVER.mp4# h9 [( E$ \$ c. v
3-1 用 JSX 列表渲染开发工程列表页面.mp4
' u3 R6 `0 V2 Z1 Z& ^( M: _3-2 用状态提升分享组件状态,完成工程列表页面.mp45 T( x, b9 q; [# m9 f6 R& x$ J
3-4 学习自定义Hook - 用useDebounce减少工程搜索请求频率.mp43 R( V- h" h$ y) Q: v6 P) x
4-1 为什么我们需要TS - 真实场景学习 TS 的必要性.mp4
1 Q3 b9 z/ e: I: a* r4-2 将项目列表页面JS改造成TS,增强类型,减少Bug.mp4
0 f2 S9 Q7 G0 e4-3 TS知识梳理、总结与提高.mp4
) J- Q0 S4 |" K4-5 学习泛型,用泛型增强useDebounce类型灵活性.mp4
: k) k) a/ f) z9 w$ t8 R( G/ p: S4-6 作业练习 - 用 Hook + TS + TS泛型实现useArray.mp4% h, k( H, A  A' N# H
4-7 作业解答 - ⽤ Hook + TS + TS泛型实现useArray.mp4
1 Q4 `: E$ O" n6 M5-1 用React表单、TS的类型继承和鸭子类型实现登录表单.mp48 G: |; B$ D% q# D7 s; o% Z. E
5-2 连接真实服务端 - 专属开发者⼯具介绍与安装.mp4
$ |3 j- n4 r1 ?7 E6 Z) ]: v5-3 来自讲师的重要提示:5-2 补充.mp4  E& O1 D0 i. b' y/ f: s
5-4 JWT原理与auth-provider实现.mp42 I" @$ |) _0 Z% J- G
5-5 用useContext存储全局用户信息.mp4  u+ o# _" \1 v
5-6 用useAuth切换登录与非登录状态.mp4
& E0 U% y- s% P: W/ ~5-7 用fetch抽象通用HTTP请求方法,增强通用性.mp4
) J/ V# d6 C3 B% |. U5-8 用useHttp管理JWT和登录状态,保持登录状态.mp4
+ ?# b* Q% r0 F: E! I+ F2 J5-9 TS的联合类型、Partial和Omit介绍.mp4
! C" A5 o9 E  ?  w( O! r4 t5-10 TS的Utility Types-Pick、Exclude、Partial和Omit实现.mp4
5 _$ T4 j" L! e$ k. I: k7 U6-1 安装与使用 antd 组件库.mp4
# Q/ ^9 T) w: z# J' t9 \6-2 为什么我们需要CSS-in-JS方案 -通过传统CSS缺陷学习CSS-in-JS必要性.mp4% W9 W8 O) X- |6 M% `
6-4 最受欢迎的CSS-in-JS方案 - Emotion的安装与使用.mp4
0 A0 e5 t3 I3 A" G# u6-5 用Grid和Flexbox布局优化项目列表页面 .mp4+ u* m/ p8 T9 a7 g
6-6 用CSS-in-JS状态工程创建自定义组件:Row组件实现.mp49 m- n  o  P, n) V
6-7 完善项目列表页面样式.mp43 X" u1 |  X( {( Z& o
6-8 清除前面课程留下的警告信息.mp4; k4 i3 V/ X5 `5 R. l
7-1 给页面添加Loading和Error状态,增加页面友好性.mp44 x9 C2 V8 f, e4 Y0 u1 _3 ^
7-2 用高级 Hook-useAsync统一处理Loading和Error状态 .mp4; X, t  H, U+ E; a
7-3 登录注册页面Loading和Error状态处理,与Event Loop详解.mp4
, _1 M( X% h5 h5 R+ v1 W% S7-4 用useAsync获取用户信息.mp4
2 v7 b8 P5 {3 K# c! }7-5 实现Error Boundaries,捕获边界错误.mp4
0 J+ T% _2 g1 K& M! Y" g8-1 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解(上).mp4
6 W5 i! q& p6 u/ M# [9 y2 A8-2 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解(下).mp4+ M5 u* ?/ I4 j% c: ^
8-3 添加项目列表和项目详情路由.mp45 s2 i/ E  j6 \+ q# A
8-4 添加看板和任务组路由.mp4" g/ n3 o, ~# l0 d% ]& C
8-5 初步实现 useUrlQueryParam 管理 URL 参数状态.mp4: }8 k, c+ A: Z2 V- v4 a6 R; X+ \
8-6 用useMemo解决依赖循环问题 - Hook的依赖问题详解.mp4
  r6 G3 g3 \- w8-7 完成URL状态管理与JS中的 iterator讲解.mp4/ A$ g4 x* @  ~* b3 l; j, V1 l
9-1 实现id-select.tsx解决id类型 难题.mp4( R3 V- p- C. r7 p2 z/ P
9-2 抽象user-select组件选择用户.mp4; A+ A4 k4 e4 s9 Z$ _1 P8 ?  i& h
9-3 用 useEditProject 编辑项目.mp4
4 r: ]: z6 f5 j+ ?5 b9-4 编辑后刷新-useState的懒初始化与保存函数状态.mp4
2 I" a* Z4 F' b9-5 完成编辑后刷新功能.mp4+ N* B$ B+ B# g- c; ^% U# C( [
10-1 useCallback应用,优化异步请求.mp4' a- z) j, i+ e3 S) V; F
10-2 状态提升,组合组件与控制反转(上).mp45 A' S. d8 p* {: t
10-3 状态提升,组合组件与控制反转(下).mp4
6 y" a. A1 [+ s; X+ A10-4 合并组件状态,实现useUndo.mp4+ g/ f& ~0 V; p% O
10-5 用useReducer进行状态管理.mp4  x- P. @5 W7 O- g& w* v
10-6 redux用法介绍.mp4
' q' i% [- ~/ Q" q) v3 Q10-7 react-redux 与 HoC.mp4
' O) X* k7 S2 t& u, \10-9 为什么我们需要redux-thunk?.mp4, m  T. ?4 y/ r; N
10-10 配置redux-toolkit.mp4
* |6 ^$ Y" u1 }! v4 |" E/ o10-11 应用redux-toolkit管理模态框.mp44 g# m6 U8 `8 g% P: `+ U8 }* h
10-12 用redux-thunk管理登录状态.mp4
* M; ^+ @' k# h$ Q11-1 用url参数管理项目模态框状态.mp4
/ G2 w3 H8 @; ^* c( `/ w0 a9 m11-2 用 react-query 来处理 -服务端缓存-.mp4# o& S7 U' z$ D" |
11-3 类型守卫,用useQuery缓存工程列表.mp4
1 H. h* Q( u* l; M11-4 编辑和添加工程功能(上).mp46 G5 Y' b) O; I7 g0 W# s* I
11-5 编辑和添加工程功能(下).mp4
7 p8 {' {( I7 X' r& N11-6 抽象乐观更新通用hook.mp4
- o$ E. ?2 C& @4 N2 H( L9 Z11-7 修复url多余参数.mp4
9 b3 I. P. [# P11-8 跨组件状态管理方案总结.mp4
- D8 f4 q. @: @5 s% G7 R; |12-1 解决前面的 3 个 Bug.mp4* w. w& k0 {7 m; h
12-2 看板列表开发准备工作.mp4
* g1 J6 N0 r0 E! {" H8 L12-3 看板列表初步开发.mp4
7 x- p6 B" l: W% A! q) u; R12-4 添加task, bug 图标.mp4
6 Y; m3 }# H0 V/ H/ S6 _12-5 添加任务搜索功能.mp4
! T; L- q& e5 h. ^12-6 优化看板样式.mp4$ z, X+ S1 v- t# ?3 Q
12-7 创建看板与任务.mp4# W7 V0 }9 m4 N4 z1 _6 H$ M! S. V
12-8 编辑任务功能.mp4, R6 `! ?1 `/ w
12-9 看板和任务删除功能.mp4  f. g# X- }( m
12-10 拖拽实现(上).mp4
+ I/ U9 {- N# w$ C' `. [. hIT直通车论坛新增8节课 20210411更新
4 c0 q: q5 \: R+ p12-11 拖拽实现(下) .mp4
, T* n. c+ L0 [% r& f12-12 拖拽持久化(上) .mp4# R. p5 i6 q! x9 T0 I/ c$ z+ ?3 M
12-13 拖拽持久化.mp4
) t% ]% h  u/ w2 V' M12-14 排序乐观更新 .mp4. b) b# f5 Y8 C& N. _& O) Y
12-15 任务组页面.mp4
8 }8 z" W& l$ [9 E- N# F12-16 任务组页面(下) .mp4
% F/ {5 \+ E) r" i12-17 完成popover .mp4
% N6 k1 r6 s  [) T! E# B12-18 开发完成,部署页面 .mp4; }: K. S; r5 K7 D: |+ ^
: X% m4 r: b8 t
代码资料分支
/ v. p4 Y6 b# x* R2 f! Breact-ts-hook-jira-develop.zip9 {' Z9 T' w8 ^7 J6 |; E* x4 K
react-ts-hook-jira-master.zip% w" D8 U2 q% n# g
react-ts-hook-jira-preview.zip0 j% s* x$ Y0 |
react-ts-hook-jira-redux-toolkit.zip! W1 v% G6 G" O0 [4 O, T. i/ N& r
% v6 U( j+ y3 W' ]% N- F& [
视频截图
% U! k6 f; C6 a% ^% N
9 }4 h2 O4 e* B- \( w' @4 |; L资源存放>百度网盘; g  n; U1 m+ v

) `# ]) a; q% e4 b+ ~9 W3 X" k  n下载地址$ S' c1 G3 r: L' W* H! w
游客,如果您要查看本帖隐藏内容请回复
/ N& j, I& }' @6 _( l
VIP会员全站免金币
6 u* o4 U# z4 x8 S* ]# [IT直通车已为全国各地程序员提供上千G课程资源
9 Z* [: y6 ~. }" _如您需要购买本站VIP会员,请点击「开通VIP」享受全站资源免金币无限制下载!& P* Z* {. P) T, ^: h

7 A5 G% g  s6 t失效反馈
# O5 o$ A- Y, j- ~+ H8 Y" yIT直通车所有资源都存放在自己注册的百度网盘,失效可修复,确保持续可用
1 Y# ~4 @4 M2 P* \1 J% r如您需要的资源链接提示失效,请尽情反馈给我们,将在收到反馈后尽快修复「点击反馈
9 w/ t4 g" _/ w7 ]( N% p# j- ^" a
. n) y! C5 H# R# K5 _* W+ s获得帮助
3 U9 ^, |! ^3 F  `- \. {- q* s需要帮助吗?点击网站右侧在线客服,7X12小时在线!0 x5 ]6 T0 [, D0 R' b' l, y

1 l6 u5 E) d, u% g  `2 t1 a1 Y  Q. S4 z6 \/ m
回复

使用道具 举报

郭光庆 发表于 2021-4-2 22:05:55 来自手机
祝IT直通车越办越好
回复

使用道具 举报

尹泽汐猩 发表于 2021-4-2 22:29:33
不错 又更新教程了
回复

使用道具 举报

daydreamleo 发表于 2021-4-3 15:52:40
楼主发贴辛苦了,谢谢楼主分享!我觉得IT直通车论坛是注册对了!
回复

使用道具 举报

同感丶 发表于 2021-4-5 14:12:42
楼主辛苦了!
回复

使用道具 举报

clydee 发表于 2021-4-6 15:18:43
一直想要,又没钱,感谢
回复

使用道具 举报

wzyu638116 发表于 2021-4-7 07:30:27
看了几节课程,对我帮助很大
回复

使用道具 举报

乐态思 发表于 2021-4-7 17:30:39
111111111111111
回复

使用道具 举报

制菜参力 发表于 2021-4-8 08:06:28 来自手机
感谢~~~~~~~~~~~~
回复

使用道具 举报

眠眠不觉量 发表于 2021-4-8 11:16:42 来自手机
楼主发贴辛苦了,谢谢楼主分享
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 AD:IT直通车VIP会员全站免金币下载
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

遇到问题联系客服

售后保障

如您充值或开通会员后资源无法下载

本站有售后服务,联系客服修复即可

[联系客服]-[会员充值]

更多课程

由于QQ吞消息严重,网站启用邮件对接VIP会员服务,有事请发邮件到 wangkefuwu@outlook.com

关于本站

VIP介绍 加入我们

售后服务

QQ客服 Email邮件

网站声明

IT直通车(www.itztc.com)是一个IT视频教程、软件、书籍资源整合分享平台
站内所有资源均来自于互联网,版权归属原资源作者,如无意侵犯您的版权,请联系我们删除处理。

Archiver|手机版|小黑屋|IT学习网 |网站地图

Powered by Discuz! X3.4  © 2001-2013 IT直通车 ICP证:粤ICP备13026616号 增值电信业务经营许可证:粤B2-20140196

返回顶部 返回列表