Java吧 视频教程: React 18 系统入门 进阶实战《欢乐购》视频教程
: m* S7 t4 W8 Y! i* S! t5 _( kJava教程编号:【S0226】-166: C$ z$ x# G! o
: u( l7 ^. n* K& \4 H( ?
& x! F% L% H( c B6 Z& G- [( ` T- W/ t
〖课程目录〗:( L# r' L n' w: N
├─1-为什么越来越多的工程师选用 React9 a: I. V/ @) S) y3 j8 J, s
│ 1-1 这可能是最适合新手学习 React 18 的第一门课.mp42 B8 `. a( v- v; j! w
9 I9 f, y) r( D3 G# n) e│ 1-2 为什么越来越多的工程师选用 React.mp4
( r8 ?- C# _& c$ b/ a│ 1-3 React 18 和先前版本的区别.mp4
$ @6 D# \, `% p7 F/ j, V│ 1-4 找对方法,轻松系统化入门 React 使用.mp4
0 S4 L) Z( ~" w" p. B& B# w│
3 n( Q* C# ^- J7 S( q9 C9 A├─2-React 编程初体验
- X v3 e% L( x/ B│ 2-1 如何在网页中快速使用 React(上).mp40 g' F9 D" f3 @3 @
, o1 h Q- ^0 N* B9 b" e│ 2-2 如何在网页中快速使用 React(下).mp4; Z/ D9 r+ d+ D5 }0 u: }, [. }
2 k$ r- y' y, ^; b. f& r0 i s! D│ 2-3 React 开发调试工具安装.mp4
+ }+ N7 B0 X. c/ L6 P4 B, ]/ b6 q* F│ 2-4 React常见语法初探(上).mp4' j& z6 j' V/ F/ b. l0 _% b9 ` t# N1 z0 M' V* {
│ 2-5 React 常见语法初探(中).mp4
8 P7 t: `/ @+ p# }2 W│ 2-6 React 常见语法初探(下).mp49 ~9 o! F7 G$ ] _1 M+ ]5 F+ ~4 |- N! A
/ C- S& \2 o) m2 |* d! a' e│ 2-7 React 工程初始化和游戏功能预览.mp47 Z) K& t/ W1 `/ ~% { v
# M4 |/ J" y# r( e, q$ r│ 2-8 实现棋盘布局.mp4) l/ S( M6 i4 `0 c/ I
│ 2-9 下棋逻辑的实现(上).mp4$ c' n) F$ D) D' H0 }
│ 2-10 下棋逻辑的实现(下).mp43 f. w/ Q; u% M% O
; { @* x) o' f P- L│ 2-11 借助数据设计实现游戏状态计算逻辑(上).mp4' t. d1 Y' r# l/ G6 n7 e9 C
|7 ?5 U6 C4 a& F- [! x│ 2-12 借助数据设计实现游戏状态计算逻辑(下).mp40 s' u3 U8 S0 R; R/ |6 ^. ?" B" t* { H5 y% f3 H g
│ 2-13 优化拆分组件实现数据共享.mp4
2 s$ }: G4 z$ |' e- F│ 2-14 历史回溯功能的实现.mp4) _* F O% O/ p- T3 P" N) W
. y9 H, G8 i% P( o' G+ V│
% C5 z5 J. V5 i* T5 R# t# |' j z7 s├─3-React 基础语法
$ f5 y, v' d# E9 X1 \# |│ 3-1 React UI 展示相关概念详解(上).mp40 ?; z7 K! L4 G% p- `- d! ]0 l% K8 Q
- Y; G/ I2 k0 T' `! r! E│ 3-2 React UI 展示相关概念详解(下).mp44 ~7 r, w( H1 r, w& s
4 R: ~% ?4 c( B4 o/ O4 n' X│ 3-3 使用事件和状态实现交互.mp4
. }# X3 j5 l6 O│ 3-4 useState 原理讲解 & 事件查缺补漏.mp4* h4 i O! @- v7 q5 ^. p5 [9 _( \" }4 Z5 q5 P5 ?: v* A+ x
│ 3-5 Immutable 数据 & Immer 的使用(上).mp47 p# h4 |7 z1 q7 G% q6 o
0 O5 |: K- ^; D│ 3-6 Immutable 数据 & Immer 的使用(下).mp42 n7 K- a, e0 k
│ 3-7 理解声明式编程及其开发规范.mp4" w) y: j9 B& `% t0 Q$ r1 _2 g% p& Q! E; s7 G. d
│ 3-8 通过父子组件传值解决数据共享问题.mp48 }" A" V! h, h. G% L9 S( [2 e
│ 3-9 组件状态重置背后的运行机理.mp41 n& C8 z* k1 B" ]! C" |! C8 H6 _4 D' u
│ 3-10 Key 值的作用详解.mp44 w0 z& c8 b* c/ E" @3 m9 \
2 Y" e. R6 T) v" N8 v; ^ f1 W W9 c3 X│ 3-11 使用 Reducer 聚合数据处理逻辑(上).mp49 i! J) S- O3 U/ B j
# n+ r( z" ~1 J│ 3-12 使用 Reducer 聚合数据处理逻辑(下).mp4
, R+ n" Z0 n, _+ ~7 S# O+ c+ f│ 3-13 Reducer 的优缺点解析(上).mp41 ]0 m { A' k0 b
│ 3-14 Reducer 的优缺点解析(下).mp49 B5 C# R9 ~9 w: j* E5 u
/ ^1 [, p! Q$ G, E( p│ 3-15 使用 Context 完成深层组件传值.mp4! U1 }6 o" H/ V
│ 3-16 Context 实际使用技巧 & 通过 Children 进行父子组件间 JSX 内容的传递.mp4
$ l( o# H5 W9 f* C8 x' O│ 3-17 使用 Reducer & Context 实现 TodoList 功能.mp4
, p8 Q6 A7 S3 K│ a0 D& B- ?. o/ B, }, N$ u
├─4-React 高阶语法( J) x. C) t M/ Z& ?0 R; h2 Z4 h
│ 4-1 Ref 的基础使用.mp40 J0 c; \* S9 p% G! }$ F
│ 4-2 Ref 与元素和组件的结合使用.mp42 ?, P" [4 {; x) w* V* Y9 a
│ 4-3 Effect 的使用场景和基础使用步骤.mp4( m6 S/ V8 x, L* r
│ 4-4 useEffect 的底层执行逻辑.mp47 D4 |: s. o# K7 g6 D6 e
1 Q4 i {0 U( I: q. g│ 4-5 严格模式 Effect 两次执行问题的处理方法.mp4! R, v$ ?1 S" y; A* b. n' L
│ 4-6 useMemo 的使用场景和使用方法.mp4. w" |5 q1 g6 O c& I$ W0 j" K( m3 k0 a) p4 L1 P
│ 4-7 useSyncExternalStore 的使用方法.mp48 X! }) l- o# o1 y- @* E8 g
│ 4-8 组件和Effect的生命周期 & UseEffectEvent 简单介绍.mp47 u5 D) W' B+ B" x$ L! U
* i0 f# `7 X& f│ 4-9 自定义 Hook 的作用及使用方法.mp4) P0 C( z$ r J- z* D' l$ j# l) z6 b) m1 q2 N8 B! g
│ 4-10 useCallback、useDebugValue、useImperativeHandle 的使用方法.mp4
$ s* U1 Q# R7 D6 |+ Z- n+ @# ?│ 4-11 Profiler 和 Suspense 内置组件的深度讲解.mp4! U' R/ B3 w9 I5 w
│ 4-12 使用 UseDeferredValue 提升用户体验.mp4
( X- Z* a$ H+ `) I3 K Z" y1 Y│ 4-13 useTransition 和 memo 的使用详解.mp4+ S( g" n/ T, |1 f4 @( }7 ?8 O1 y7 G: N
│
t' ] Z- ]7 | h+ `/ ]6 Y# o5 Q; q├─5-React 中常见的 TypeScript 类型定义- l6 p5 f; V# V4 i9 h
│ 5-1 TypeScript 项目生成、语法入门及函数组件 Props 类型的定义.mp44 w* Z5 U3 [5 Q8 {9 I! S
│ 5-2 Hooks 相关类型问题的处理(上).mp4
8 d* m- K- d- r│ 5-3 Hooks 相关类型问题的处理(下).mp4) C9 D9 M; p1 t0 r: ~% K4 d% o# ?3 e* k& x* U+ x# D; ^) m4 p' r# K
│ 5-4 React 相关事件的 TS 类型定义.mp4& s8 e7 K, m# u7 F& y2 q! F8 ~0 @7 H
. T; W2 S% u& ~$ T! {3 W* q│ : ^2 V; a. }; I3 S6 d
├─6-实战“欢乐购”:登陆、注册、引导页面的开发; M0 p% `1 C4 ?& H$ Q3 \( ~2 v, h* d$ U, x
│ 6-1 Charles、rem布局、一像素边框问题的前置工程准备(上).mp4" _9 A. b6 w8 p9 W! U, q, |
1 B3 N% c1 d" ]0 p7 ^0 L# o# K│ 6-2 Charles、rem布局、一像素边框问题的前置工程准备(下).mp4
: t5 i, v* c6 K4 m' w9 K│ 6-3 使用 Ref 和 CSS 动画完成引导页面开发.mp4& U0 l; Z8 i1 J+ o0 a4 l% x) z9 c/ w& {; G5 h. f. d: y* q
│ 6-4 使用 React-router-dom V6 版本实现登陆页面跳转(上).mp46 `' j: K6 t4 \1 L5 K0 t/ v: T
+ t& o; ?- |$ O# m/ n, w4 X8 y! u│ 6-5 使用 React-router-dom V6 版本实现登陆页面跳转(下).mp48 s0 I3 ]- l$ v; [/ ]) c- s
│ 6-6 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发(上).mp48 {. u5 x0 w1 n$ O
│ 6-7 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发(下).mp43 \* E- s3 C j" H
│ 6-8 封装通用请求 useRequest 自定义 Hook(上).mp44 O# W/ A0 L) e6 n# N6 Q
│ 6-9 封装通用请求 useRequest 自定义 Hook(下).mp47 J7 x% a) _! u, B+ y7 R
│ 6-10 useRequest 代码改造及模态框提示功能实现.mp4
% a2 k% I8 o* K│ 6-11 使用 useImperativeHandle 进行模态框组件的封装实现.mp4
; c" O- ?3 Z0 o│ 6-12 使用 CreatePortal 完善 Modal 组件,优化请求发送逻辑.mp4% R( N1 g T/ \" T5 V/ g
% `5 U( ]' @. I│ 6-13 注册页面的基础开发.mp4
' b9 |* O/ `2 y+ l; t! R│ 6-14 使用嵌套路由实现代码的抽象复用.mp4
6 n; C X3 f e0 z; J) t│ 6-15 登陆逻辑的完整实现.mp4% U- r! O6 o) `/ k: V# E! e* t! _' S. M Q5 C/ }
│ 0 n- q7 ~" x( ~( u( Y) O6 _! D1 |) j% K- p
├─7-实战“欢乐购”:首页相关页面开发$ N% ^& ^9 q3 p3 O; P4 g: }0 J% ?: y" n: K
│ 7-1 使用 Swiper 实现首页顶部轮播效果.mp4( e. @& L8 m; L; L" E8 c& C& I2 p1 d& A, S
│ 7-2 使用地理位置接口获取用户定位信心.mp41 J/ e# ^! B+ F, [* S/ p* z) C }, m( {- x
│ 7-3 useRequest 和 Modal 组件的封装升级(上).mp4
( J7 `" C7 {% w1 Z, }+ D3 K* a│ 7-4 useRequest 和 Modal 组件的封装升级(下).mp45 x1 x9 d3 |$ z$ p0 ], E6 R. W# I* V5 l' v) K; I
│ 7-5 首页数据动态获取(上).mp4# c7 P3 q6 Y. S0 v2 H# a1 m) D: n$ z, _: @+ P- E
│ 7-6 首页数据动态获取(下).mp41 |( E( ?. A7 E3 ]" o4 ^
│ 7-7 分类及卡片区域布局开发(上).mp4
, f" L1 S* v, D8 `7 X6 K│ 7-8 分类及卡片区域布局开发(下).mp4" p& k" W% ?' C% r* O& U) N7 q. \ c& J4 X0 e3 R9 @
│ 7-9 首页完整布局样式开发(上).mp4' O6 e# K8 _4 j, v6 ]: P( w% M: d- ~0 c1 z. O Z% V( ^: ?& v2 G
│ 7-10 首页完整布局样式开发(下).mp4
7 J8 Z0 { E$ {6 _6 ?7 W│ 7-11 首页组件拆分及代码优化.mp40 B( K; W( S7 _* d: L/ p
+ @5 z, x. Q8 w: B) v# Q│ 7-12 切换门店功能开发(上)【缺】
/ u; x0 u" q- m/ ]4 _│ 7-13 切换门店功能开发(下)【缺】
, Y, T# W2 w. J0 T g" ~│ 7-14 搜索页面布局开发(上).mp4. U. U8 X0 a6 L% T0 T
│ 7-15 搜索页面布局开发(下).mp4 p5 x2 W% ^ r* a9 X' P. _# E' x" @, g8 V8 E& h3 o. h0 U
│ 7-16 搜索页面逻辑实现.mp4
2 M3 ~7 e. \2 F9 U│
# V% \1 K% |+ M4 ]' J" i; V/ n├─8-实战“欢乐购”:商品列表及详情页面开发
/ o- P- t* X+ S│ 8-1 简单列表页面布局实现.mp4! H, T: L1 y8 j/ U% [! O
│ 8-2 使用路由完成页面间参数传递.mp4! G4 ]5 s# ]+ f/ I( a1 {- W2 G" w; }: y0 X- \3 i
│ 8-3 列表页面逻辑实现.mp41 L+ @2 m( t, e6 x
8 C( X2 x; i7 c- [) ?! S│ 8-4 详情页面布局开发(上).mp4( R9 h7 U% G/ [( }) ~ {9 p1 P( [% t2 o2 G* O4 g: u. l
│ 8-5 详情页面布局开发(下).mp4! h& h5 N7 v0 \
│ 8-6 详情页面逻辑开发.mp4. E( p2 E. ?7 F5 W |" w/ w7 v
# q( N6 ? P# r1 d, t+ V7 C. M* q│ 8-7 分类列表页面布局开发(上).mp4
% U6 p/ ~, @* W' O) M│ 8-8 分类列表页面布局开发(下).mp4
# H2 @3 r% b# X( Q1 i. j. D│ 8-9 分类列表逻辑开发(1).mp40 u8 ~% [ o+ g! ?1 d
│ 8-10 分类列表逻辑开发(2).mp4
2 l, l8 R3 _- |│ 8-11 分类列表逻辑开发(3).mp41 t* f) o# R) }# h
% Y' c' I/ E; K/ w1 Q│ 8-12 分类列表逻辑开发(4).mp4% l6 x: {* G" g8 X+ D E7 ^$ e% C- H k! e& h4 @1 Z
│ 8-13 分类列表逻辑开发(5).mp4
. W0 ^# ~) b, k4 q( J│ % R# }& W) n3 p3 y; d6 G o* @) w5 z+ W
├─9-实战“欢乐购”:购物车逻辑开发; H$ J& o0 ^& k( W5 e, ?( _( r& M% ~$ v- ?1 e. d
│ 9-1 详情页面购物车弹窗功能开发(上).mp4; R% ], e) u, Q
│ 9-2 详情页面购物车弹窗功能开发(下).mp4* q8 Y6 b# o4 R6 ]
│ 9-3 详情页面添加购物车逻辑实现.mp42 O/ l D+ @9 Q; W) Z
│ 9-4 分类列表页面购物车逻辑实现(上).mp4- m5 C2 @4 T; ^% d+ X( Q d* A
│ 9-5 分类列表页面购物车逻辑实现(下).mp4. C" k' C# N! U1 I3 Z
│ 9-6 购物车页面布局开发(上).mp4* A5 R5 ~! O1 C* V/ Z( }
│ 9-7 购物车页面布局开发(下).mp4
) l$ i; r- z, r3 [0 {& t! G│ 9-8 购物车实现动态话数据渲染(上).mp4% }& w% C) N4 p' S& b: _: w
│ 9-9 购物车实现动态话数据渲染(下).mp49 k, u% l* ?7 L! Y- \0 b
9 A( d7 Q& F& s9 j& }. B- w, L│ 9-10 购物车下单逻辑实现(上).mp4. N5 y6 c$ |) f6 b6 n1 J
│ 9-11 购物车下单逻辑实现(下).mp4
: X0 c8 }, u+ u$ n% P│
. C6 d$ e+ W& S├─10-实战“欢乐购”:订单详情页面的开发与项目上线3 H( j/ P7 }$ {) v: L* A: R5 P! c; ~$ q9 @5 r
│ 10-1 订单详情页面布局开发(上).mp4/ R* D6 i+ \! m; j3 S
1 F% X" a9 A+ U1 z│ 10-2 订单详情页面布局开发(下).mp4" k0 R0 V0 P- N) [; ]8 r" _; e" H! m, ~. r# p6 a' {( ~
│ 10-3 订单页面收货人信息逻辑开发(上).mp4, c: d! K+ m; ]: d3 a" c5 a2 C% C5 q5 R* H& }& u( _/ z
│ 10-4 订单页面收货人信息逻辑开发(下).mp4- G' W- [4 M/ B
│ 10-5 日期选择器的使用方法.mp4* `; Y/ Z8 P' u1 z2 O
6 [8 _5 _" {$ p$ m* ^$ b" U2 ^│ 10-6 订单支付逻辑开发(上).mp43 Z* X# x9 w: M8 ?
4 d }. Q" n$ _" l8 Q* O7 d) {' k│ 10-7 订单支付逻辑开发(下).mp4- M* b( l! h8 d4 I- U9 Y; m/ R$ B6 P4 K) `7 N8 u
│ 10-8 项目上线流程(上).mp4) `6 l$ D+ j- S( e: @( R* w! G1 H4 q* {$ y% k6 M6 o2 X- u# L
│ 10-9 项目上线流程(下).mp49 M+ h: Z+ L' F' B7 A6 `) _# O7 i7 G8 n Z
│ 5 G V" S$ Y. U6 N8 |$ Q% H- R: r7 R9 K$ Z# i5 r
├─11-【福利】彩蛋:React 框架实现原理 `5 Z4 K9 j2 A' F" l) `6 S( H3 z, ^: R, N. x1 }& E
│ 11-1 React 代码是如何被转化成原生 JS 代码的.mp4* s7 {7 ~$ c8 \* n$ c6 ]) O
! O3 u1 k( \$ l. ?. N6 v2 T$ M│ 11-2 createElement 底层的实现.mp4& W2 B- C# P9 U8 j' {) r2 R3 n8 x: R0 V" y! _
│ 11-3 Babel 转换 JSX 的实现.mp4 java8.com `: `) e) _ s T* q
│ 11-4 ReactDOM.render 方法的实现逻辑.mp4/ h# L+ k+ I* x& ^
│ 11-5 Concurrent Mode 实现思路.mp4
$ l! [% z c& i# L% G│ 11-6 Fiber 的原理和基础实现(上).mp4) U% e+ t, X4 g1 W/ p
│ 11-7 Fiber 的原理和基础实现(下).mp42 ]: E* R- ?, M7 k( x7 p4 s9 r& e! g2 T6 u6 G5 b1 L
│ 11-8 Render & Commit 阶段.mp4! v# Z9 O8 f, P3 A: l6 ]1 r, Z* `- L4 E) j* z/ d
│ 11-9 Reconciliation 阶段(上).mp4
* q/ C( I/ \# H1 G│ 11-10 Reconciliation 阶段(中).mp4* ~' b' k% c( B9 A x" s. |
│ 11-11 Reconciliation 阶段(下).mp48 p% Z7 {& |1 [* C! D- J
│ 11-12 函数组件的实现.mp4% g! h6 ]1 s/ Z: }" [. `
│ 11-13 useState 的实现.mp4
6 j) a; i3 G5 O: X8 Z* l" f: N% C│ ; F1 q) a5 p( G% Y( G/ j; p4 h. ]4 p* H2 J0 S" `! T
└─资料代码.zip H! S( Z* ?( I4 ~( w% k
8 `: R' m9 d$ l" |" w
百度云盘下载地址(完全免费-绝无套路):
- d8 S; _$ Z2 m2 R$ W8 \* q6 F1 @
- E1 j' C& t5 H% n* |) O$ J本资源由Java吧收集整理【www.java8.com】
+ B; a0 t/ i5 K, p( B( {& f3 J- x! K
3 r2 f$ ~, J0 @( C
6 t+ S7 x# Q9 T. ]* V
. q4 P) M8 d; I |