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

  [复制链接]

2049

主题

2060

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
29960
admin 发表于 2021-4-2 22:02:53
37589 141

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

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

4 ^9 O/ n1 n4 b" J7 }: P5 W7 }8 Y7 w" h% l" H
React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词
8 H, j8 z# `) T( E! J# f' J% H, C' T) }
更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目,带领大家掌握最佳实践,全方位提升开发效率、开发质量和技术能力。
- f  Y' G% D4 S8 `) i
解锁 React + TS 高阶用法,突破前端成长瓶颈
: q) s0 k& \/ j4 k
高清无密码,尽在IT直通车论坛!

* ]) Z* p) U& H" _课程目录5 z& c- o  j9 Z( N2 z1 l7 Z
1-1 课程导学.mp4
2 A8 s( n1 g+ `7 f! s2-1 用 Create React App 初始化项目.mp4" }5 h- g2 i1 N$ j6 m# \/ @0 B
2-2 配置 eslint、 prettier 和 commitlint 规范工程.mp49 f/ X) h$ R8 k
2-3 对比常见 Mock 方案 配置 JSON SERVER.mp4
( }  i: G) W3 s6 ~) \7 j7 f6 g3-1 用 JSX 列表渲染开发工程列表页面.mp42 d% Z; ^3 i  j, Z
3-2 用状态提升分享组件状态,完成工程列表页面.mp4
, z- W7 l: a4 l3-4 学习自定义Hook - 用useDebounce减少工程搜索请求频率.mp40 T( e6 Y0 g% u* Q1 v
4-1 为什么我们需要TS - 真实场景学习 TS 的必要性.mp4, a, z( g) t- I0 Y
4-2 将项目列表页面JS改造成TS,增强类型,减少Bug.mp46 m0 d! g( n" A( `4 V9 L/ k
4-3 TS知识梳理、总结与提高.mp4
& Z1 e6 J; x$ h+ \7 p4-5 学习泛型,用泛型增强useDebounce类型灵活性.mp41 C/ I/ e- o) N0 q2 K2 Z7 ~
4-6 作业练习 - 用 Hook + TS + TS泛型实现useArray.mp4
6 H( J$ s3 q1 g$ v" A# k0 H4-7 作业解答 - ⽤ Hook + TS + TS泛型实现useArray.mp4
$ M' t; j7 Q. m9 p5-1 用React表单、TS的类型继承和鸭子类型实现登录表单.mp4
# F/ W7 [1 [! r3 y6 y+ v* A$ K5-2 连接真实服务端 - 专属开发者⼯具介绍与安装.mp4
# ~( g0 R! h$ a4 m5-3 来自讲师的重要提示:5-2 补充.mp4
1 K5 K1 v# k/ O' [" h% F5-4 JWT原理与auth-provider实现.mp42 z7 E8 t# p3 f' j
5-5 用useContext存储全局用户信息.mp4. y( {- I: S3 N# J
5-6 用useAuth切换登录与非登录状态.mp4
  R' y: q* F) h5-7 用fetch抽象通用HTTP请求方法,增强通用性.mp4
7 l* Z+ h& U8 c' g3 \$ D5-8 用useHttp管理JWT和登录状态,保持登录状态.mp4- r6 V$ v4 w2 k5 o8 ^+ u
5-9 TS的联合类型、Partial和Omit介绍.mp4
6 C7 d% n4 Y7 R* o5-10 TS的Utility Types-Pick、Exclude、Partial和Omit实现.mp48 E+ Z0 w& Y: O8 J; F1 Z
6-1 安装与使用 antd 组件库.mp4& |. L: D( U- V- c  y
6-2 为什么我们需要CSS-in-JS方案 -通过传统CSS缺陷学习CSS-in-JS必要性.mp4
% t, z- ?4 C, H4 D, r6-4 最受欢迎的CSS-in-JS方案 - Emotion的安装与使用.mp4
; ^  ~/ G) U( n2 h3 K; g& L6 n; u6-5 用Grid和Flexbox布局优化项目列表页面 .mp4
8 i% g. P: e4 v& ]6-6 用CSS-in-JS状态工程创建自定义组件:Row组件实现.mp4
9 u0 t6 W, q7 ~6-7 完善项目列表页面样式.mp4( h* Z7 ~* E5 L. h: F
6-8 清除前面课程留下的警告信息.mp4
- b: b; ?0 f% E2 H7-1 给页面添加Loading和Error状态,增加页面友好性.mp48 w: v7 a' X/ D" R
7-2 用高级 Hook-useAsync统一处理Loading和Error状态 .mp4
6 i4 _- f1 a4 B& @' t. z' k  J/ s( j7-3 登录注册页面Loading和Error状态处理,与Event Loop详解.mp4, j( b, W* \% N  `/ T
7-4 用useAsync获取用户信息.mp4
, H3 i9 q/ d8 V4 T  E$ l# [7-5 实现Error Boundaries,捕获边界错误.mp4
8 I* V; P$ G# e8-1 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解(上).mp4) x7 U' I" w, B0 {: b+ e
8-2 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解(下).mp4
, m; d" ?5 |2 \' ?; h9 @8-3 添加项目列表和项目详情路由.mp4
6 r9 q/ U7 {) m$ I: b8-4 添加看板和任务组路由.mp4
2 S) ~0 I$ v# z2 ^8 e3 O% V8-5 初步实现 useUrlQueryParam 管理 URL 参数状态.mp4
3 H1 W, e/ r6 j8-6 用useMemo解决依赖循环问题 - Hook的依赖问题详解.mp4
/ e( N6 L( p) {' R8-7 完成URL状态管理与JS中的 iterator讲解.mp49 v3 }( H! r+ f6 l7 L
9-1 实现id-select.tsx解决id类型 难题.mp4/ f" j: _  i% F; u, h! B
9-2 抽象user-select组件选择用户.mp4
. v5 j: o, l8 u9-3 用 useEditProject 编辑项目.mp4
: `3 ]- F  f* Z9-4 编辑后刷新-useState的懒初始化与保存函数状态.mp4
; U4 c2 M. n5 `9-5 完成编辑后刷新功能.mp4
- F! ]% L  ^8 l" N6 y3 k8 |* n10-1 useCallback应用,优化异步请求.mp43 d) h; C. P( t# I6 [
10-2 状态提升,组合组件与控制反转(上).mp4! T- _, W8 P& r, ~7 [
10-3 状态提升,组合组件与控制反转(下).mp4+ K2 b2 r5 U7 R; F9 X
10-4 合并组件状态,实现useUndo.mp4
! J& c+ W& G. R- P# L2 B8 q10-5 用useReducer进行状态管理.mp4
' I. O; K2 N1 @10-6 redux用法介绍.mp4
3 Q9 l! c- Q* ~! |: H10-7 react-redux 与 HoC.mp4
6 g3 {: p7 E/ s+ T10-9 为什么我们需要redux-thunk?.mp4; c# v! m; Y8 j% C  {
10-10 配置redux-toolkit.mp4
0 Z% V3 _, z! s$ M* R/ |# L10-11 应用redux-toolkit管理模态框.mp4& f" T5 Z# {* x- S. S& F- M; s5 h
10-12 用redux-thunk管理登录状态.mp4
1 u+ e3 D4 V; b* g5 q+ W11-1 用url参数管理项目模态框状态.mp4
0 u  z. R% y+ N/ c1 f! j& m11-2 用 react-query 来处理 -服务端缓存-.mp4! t, C0 D: M. l; Z& S& t2 p+ ~
11-3 类型守卫,用useQuery缓存工程列表.mp4) k& p2 j8 ~. e8 A2 E# l0 E7 v
11-4 编辑和添加工程功能(上).mp4' A# P8 I7 t4 y4 \/ e0 C
11-5 编辑和添加工程功能(下).mp4
" f! _: @# P% Y11-6 抽象乐观更新通用hook.mp4
! I4 i% R6 ]! [: }9 O/ D" H7 m$ ]11-7 修复url多余参数.mp45 ~% z4 I' n  E1 Z8 ?5 [
11-8 跨组件状态管理方案总结.mp4
+ a% ~6 s3 _3 x# U12-1 解决前面的 3 个 Bug.mp4; m! ^* W* V0 B( T  S" J/ ?
12-2 看板列表开发准备工作.mp4
4 h# x4 x+ a$ W12-3 看板列表初步开发.mp4& a) w+ G2 L6 ]( W- x/ _5 m1 }
12-4 添加task, bug 图标.mp4
( j5 a" K3 t. {3 |12-5 添加任务搜索功能.mp4
/ p* k- S/ l% z6 n+ w12-6 优化看板样式.mp4
' h" O4 \9 G: N; Z, N1 p12-7 创建看板与任务.mp49 A$ ]: t; _1 }# f  N
12-8 编辑任务功能.mp4
  q3 c3 I' v1 r+ X) c12-9 看板和任务删除功能.mp47 R& A3 C  o# k  f
12-10 拖拽实现(上).mp40 j$ R3 B/ t4 ^; @8 T6 z/ @
IT直通车论坛新增8节课 20210411更新
; ?+ s  D7 O( T2 d, d. Y" F6 q12-11 拖拽实现(下) .mp4
9 k3 y9 u$ O  X) Q12-12 拖拽持久化(上) .mp49 w8 t  p- q/ w. w" W# Q
12-13 拖拽持久化.mp4
. J  ]* k9 z$ Z$ [4 V  h1 D. |12-14 排序乐观更新 .mp4
7 x) \; q9 x% J12-15 任务组页面.mp4
) f4 A8 U" T+ z1 F2 V12-16 任务组页面(下) .mp4+ n  U  h% N' p. x! d' s) v
12-17 完成popover .mp4- n) u0 E) n3 m. t( S
12-18 开发完成,部署页面 .mp4  h9 q0 k3 X0 |  b  }
4 _9 S* {# C3 K% ?% I& `
代码资料分支
/ F( C. W9 u0 ]: Rreact-ts-hook-jira-develop.zip
3 [+ J( T  ?) g6 }$ T0 {- Oreact-ts-hook-jira-master.zip8 I9 e5 G8 k" ^0 J- N& _- |
react-ts-hook-jira-preview.zip# S3 z7 l% m3 b0 `  O+ i5 Z: j6 K' ?
react-ts-hook-jira-redux-toolkit.zip, d# d+ h3 q2 p7 ?

7 V- m6 f5 b6 z9 _6 O# Z视频截图' X- i, g; U! l: ]/ u: A( r& N
# C! |" T2 o, E, s
资源存放>百度网盘1 {& S3 P6 s: C: _8 K
- U; V" T% s$ K' C5 J. m$ Y* h$ I- M
下载地址
$ v# N' ?3 ^& O& S, i
游客,如果您要查看本帖隐藏内容请回复
& X! m& P4 @5 z, t1 X
VIP会员全站免金币- R4 ?. i% l: ?0 C
IT直通车已为全国各地程序员提供上千G课程资源
* R2 e1 N- q3 U' b1 l如您需要购买本站VIP会员,请点击「开通VIP」享受全站资源免金币无限制下载!
' t& o! b# h$ {2 ], q; Y1 c" H
( N8 M3 _- q8 D/ }失效反馈
- u- ], O) K  k- {IT直通车所有资源都存放在自己注册的百度网盘,失效可修复,确保持续可用, X" w* q3 H/ c$ L6 L
如您需要的资源链接提示失效,请尽情反馈给我们,将在收到反馈后尽快修复「点击反馈
7 n$ N6 A1 I# w: T+ {  e1 m3 B
7 H2 s/ F3 ]: D! e获得帮助
" F! y( Z4 `6 f& G) ?  E需要帮助吗?点击网站右侧在线客服,7X12小时在线!/ D  x9 {. i+ H) ^* g
8 `, D! z4 h- w5 D+ k

. z% u0 Y' b! M" F* w  f7 {
回复

使用道具 举报

郭光庆 发表于 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 488090338 

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

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

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

更多课程

关于本站

VIP介绍 加入我们

售后服务

QQ客服 Email邮件

网站声明

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

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

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

返回顶部 返回列表