React18+Next.js13+TS，B端+C端完整业务+技术双闭环 2023年

React18+Next.js13+TS，B端+C端完整业务+技术双闭环 2023年课程介绍：

视频资源大小：8.77 GB
类型： 语言汇编,

最新 React 技术栈，实战复杂低代码项目-仿问X 3 Z S T 7 V L卷星

接触过几千名前端学员，发现大部分学员只用过 Vue，但 React 在大厂的使用率非常高，不会 React 降低学员在工作、面试中的竞争力。本课由双越慕课明星讲师，运用擅长的通俗易懂的讲课! l Y 9方式，从入门、进阶到实战，帮助你系统6 z | G S , 9构建完整的 最新React 生态技术体系，手把手带领下完成一个超2W行的高质量复杂低Z h , . f \ q代码项目-高仿问卷星，从架构到拆解，从B 端到C端，完整业务+技术双闭环实战，助你在激烈_ n P l m G ] O o的竞争中O K {脱影而出。

适合人群

想从 0 学习 React 完整技术栈的同学

学过 Vue 还想进阶 React 的同学

想学习 React 做复杂项目的同学

技\ [ c ~ V 2 * 5 $术储备

熟悉 HTML CSS 和 JS 语法

了解 HTb K _ P * ,TP 协议，用过 Ajax

了解 webpack 或 vite 的基本配置

课程目录：

第1章W 5 v T 开期准备

1-1-导学.mp4

1-2-功能介绍.mp) D / f h * 3 e4

1-3-课程安排-即学即用，渐进式开发项目.mp4

第2章 【入门】什么是s = N ^ _ React React 引领了现代前端开发的变革

2-1-章介绍.mp4

2-2-React是全球最火爆的前端框架.mp4

2-3-React其实非常简单-但需要你熟悉JS语法.mp4

2-4-看几个示例来体会React的代码逻辑.[ ? { g u j Pmp4

2-5-React核心价值-组件化.mp4

2-6-React核心价值-数据驱动视图.mp4

2-7-课程安排-即学即用，渐进式开发项目.b + ) i N 7mp4

2-8-章总结.mp4

第3章 【基础】创建 React 项目开发环境 – 代码未动，环境先行[缺3-5]

3-1-章S S W K I \ A介绍.mp4

3-10-【加餐】vite和webpack的区别-vite使用E.z K u P q a = zmp4

3-/ , I x11-章总结.mp4

3-2-准备工作-安装必备软件.mp4

3-3-使用Create-React-App创建项目-React.mp4

3-4-使用Vite创建Reac/ M 6 8t项目-Vite是前端热门/ 9 c工具.mp4

3-6-使用prettier规范代码风格-统一风格，多人$ v w开发也不.mp4

3-7-提交代码到git仓库-选择国内平v / b g台.mp4

3-8-使用husky执行pre-commit检查-把非规范代码.mp4

3-9-使用commit-lint规范commit提交格式-让g.mp4

第4章 【基础】JSX 语法和组件基础 – 学完即可开发一个静态页面[缺4-12]

4-1-章介绍.mp4

4-10-实战-开发项目列表页-即学即用效果好.mp4

4-11-React组件基础-拆分UI结构，便于开发维护和复用.mp4

4-13-React开发者工具-让React调试更简单.. W , Y k R =mp4

4-14-加餐-JSX和Vue模板的区别-体现两者设计理念的差异.mp4

4-15-章总结.g P S | Lmp4

4-2-JSX语法和HTML相似-很容易学习.mp4) E n

4-3-JSX的Y w n [ _ t b p标签-和HTML标签有几点不同.mp4

4-4-JSX的属性-style改0 ; ] [ G h ` v动非常大.mp4

4-5-JSX中监听DOM事件-遇到了Typescript类型问.mp4v Q W ~ & } f

4-6-b W e S & ~补充Typescript类型基础知识-解答上一节的困惑.mp4

4-7-JSX中插入JS变量和表达式-让Jx P # ISX真正融入JS代码中.mp4

4-8-JSX中使_ Z R ] L w z !用条件判断-让JSX具备if-else能# , n力.mp4

4-9-JSX中使用循环-让JSX真正动起来.mp4

第5章 【基础R u 7 l |】ReaH O /ct Hooks – 处理逻k l b * W辑监听状态，让页面动起来

5-1-章介绍.mp4

5-10useEffect在开发环境下执行两次-模拟全流程，及早.mp4

5-11用useRef操作DOM元素-React的ref和Vue.mp4

5-12使用useMemo缓存数据-React中常见的性能优化手.mp4

5-13使用useCallback缓存函数.mp4

5-14. q V Y E f 5 8自定义Hooks-ReactHooks的正确打开方式.mp4

5-15使用自定义Hook获取鼠标位置-组件J k (公共逻辑抽离和复用.mp{ \ * e n4

5-16使用自定义Hook异步加载数据-模拟异c E p : M = C v x步场景.mp4

5-17使# \ _ @ ^用第三方Hooks-aL e 2 4 N r J g ~hooks和react-use.mp4

5-18Hooks的三条使用规则.mp4

5-19Hooks闭包陷阱-React常考面R v _ x W f K ?试题.mp4

5-2-useState让页面;动&_ W 5 # f T起来.mp4

5-20章总结.mp4

5-3-state一个组件的;独家记忆&.mp4

5-4-staC s Z y Jte特点-异步更新，合并后更新.mp4

5-5state特点-不可变数据n C 7-非常C T 0 l重要的概念.mp4

5-6实战-重构列表页L 5 p + i h j-用useS; _ y _ \tate实现增、删、改.mp4

5-7使用immer修改state-帮你摆脱;不可变.d i D ^ U i I 1 5mpL & W p y4

5-8实战-重构列表页-使用immer让开发更简单.mp4

5T W e l / d-9useEffect监听组件生命周期-创建、更新、销毁.mp4

第6章 【基础】在 React 中使用 CSS 样式 – 为页面“美颜”，页面变漂亮[缺6-1]

6-10实战-为QuestionCard组件增加CSS样式.mp4

6-11章总结.mp4

6-2普通方式使用CSS-尽量不要用内联style.mp4

6-3CSS-Module解决className可能会重复的问题.mp4

6-4使用SX & z w ( A I L wass语法-提高CSS编码效率.mp4

6-5CSS-in-JS常用工具之Styled-componen.mp4

6-6JS函数后加字符串的调用形式-解决Style-compon.mpz z ! ; (4

6-7CSS-in-JS常用工具之Styled-jsx和Emot.mp4

6-8实战-增6 2 V h加CSS样式-创建正式项目环境.mp4

6-9实战-为列表页增加CSS样式.mp4

第7章 【中级】React-router 路由 – 配置多页面，由单页变成一个系统

7-1章介绍.mp4

7-2路由设计-确定网址和页面的关系.mp4

7-3设计Layout模板-抽离公共部分，代码_ P $ 3 / j O复用.mp4

7-4路由开发-创建所有页面.mp4

7-5路由开发-创建3个LayoU N 2 Kut和使用Outlet.mp4

7-6使用React-Router配置路由-实现了多页面.mp4

7-7使用路由APC f N i bI-跳转页面和获取参数.mp4

7-8章总结.mp4

7-9自定义网页标题和favicon.mp4

第8章 【基础】使用 AntDesign UI 组件库 – 常用组件拿来即用

8-10使用AntD重构Q? o m Y { R / ? HuestionCard组件-得到了最终.g 5 nmp4

8-11使用AntD的confirm功能-展示AntD的交互能力.mp4

8-12使用AntD开发星标问卷列表页.mp4

8-13% = C s ( j B 1使用AntD开发回收站页面-使用Taq z T Rble组件.mp4

8-14开发回J 9 ( h \ h收站的恢复和删除-为表格增加了选择功能f Y 2 r z / 7 &.mp4

8-15加餐-介绍TailWinD 4 – y ! Wd-CSS.mp4

8-16章总结.mp4

8-1章介绍.mp4

8-2介绍React世界中常用的几个UI组件库.mp4

8-3安装和使用Ant-Design.mp4

8-4使用AntD重构MainLayout-体现K + + 5 . Z . @ YAnt{ c kD布局能力.mp4

8-5使用AntD重构ManageLayout-灵活使用Butt.mp4

8-6使用AntD开发Logo组件.mp4

8-7开发UserInfo组件.mp4

8-8使用AntD开发首页.mp4

8-9使用AntD快速制作漂亮的404页面.mp4

第9章 【中级】React 表单组件 – 接收用户输入，让用户和页面互动起来[缺9-13]

9-10使用AntD的Form组件开发注册页.mp4

9-11使用AntD的Form组件开发登录页，– \ #并实现.mp4

9-12使用AntD表单组件的校验功能，校验用户名和密码的格式.mp4

9-14使用第三方表单校验工具Formik.mp4

9-15章总结.mp4

9-1章介绍.mp4

9-2什L O 9 y J v D p么是受控j , Y 3 i X ^ 8组件-ReactM / M % o s [ q =表单组件的重要概念.mp4

9-3使用textarea组件-通过dangerouslySet.mp4

9-4使用rag v V h _ E W Kdio单选按钮-受控组件的设计思路.mp4

9-5使用checkbox复选按钮-模拟真实的业务场景.mp4

9-6使用select下o } t拉框组件.mp4

9-7使用form组件和submit方法.mp4

9-8使用AntD开发ListSearch搜索组件.mp4

9-9ListSearch搜索修改URL参数-x q F i % 7体现组件设计的解耦.mp4

第10章 【中级】Ajax 网络请求 part1 – 搭建 Mock 服务，完w 8 : D )成前后端通讯

10-1 章介绍.mp4

10-10 配置axios的response拦截器-统p ( p P T i – L一处理错误.mp4

10-11 开发新建问卷功能-设置loading状态以优化体验.mp4

10-12 开发获取问卷信息功能-使用自定义Hook抽离公共逻辑.mp4

10-13 使用ur J aseRequest重J n D o $构Ajax请求-统一处理l.mp4

10-14 使用usep P Z y \ |Request获取问卷列表.mp4

10-15 给列表增加搜索功能-使用第三方Hook抽离组件公共逻.mp4

10-16 使用useRequest开发星标和回收站页面.mp4

1R E g j y l0-2 关于Ajax的基础知识、API和工具.mp4

10-3 使用mockjs模拟Ajax请求.mp4

10-4 在nodejs中使用mockjs-使用Ran/ 1 3 j – ldom轻I r a w松= D C & ! ~ ~ ] ^.mp4

10-5 使用nodejs启动服务，模拟get请求.mp4

10-6 模拟post请求，并使~ E = : . ! 6 I用postman测试.mp4

10-7 使用craco.js扩展webt n k Vpack配置-使用K – 5 q 2 odev.mp4

10-8c 0 x s J ! 介绍几个在线mock平台-谨慎使用.mp4

10-9 API设计-使用Restful API规范.mp4

第118 B Z 3 Y 6 ^章 【中级】Ajax 网络请求 part2 – 一次学习多种形式的列表和分页功能

11-1 开发分页功能-定义URL参数page和pageSize.– p ; –mp4

11-10 开发删除问卷功C u . i / v能-修改信息;假删除&rd.mp4

11-11 开发恢复问卷功能-使用for-awiat-of处理多.mp4

11-12 开发彻底删除功能.mp4

11-13 介绍JWT-用户登录校验的技术方案.mp4

11-14 开发用户的mock和services.mp4

11-15 开发注册和登录功能.mp4

11-16 存储token，并使用axios拦截器附加token.mp4

11-17 开发获取用户信息，以及退出登录.mp4

11-18 -章总结.mp4

11-2 实现列表分页功能-使用Antd的Pagination组.mp4

11-3 LoadMore上划加载更多-设计组件的state.mp4

11-4 LoadMore上划加载更多-使用防抖监听scroll.mp4

11-5 LoadMore上划加载更多-根据DOM位置判断加载时.mp4

11-6 LoadMore上划加载更多-真正加载数据.mp4

11-[ C @7 LoadMi 8 x [ c 1 Rore上划加载更多-优化功能体验.mp4

11-8 开发问卷标星功能.mp4

11-9 开发问卷复制功能.mp4

第12章 【1 S d j a z b N +中级】Red, h Nux 状态管理 – 复杂x r D项目的数据管理形式t Y | @

12-1 章介绍.mp4

12-10 使用Redux实现数字加减法-使用useSelect.mp4

12-11 使用Redux实现TodoList-展示复= I 0 V ~杂数据结构.mp4

12-12 使h / L 5 C用Redux实现TodoList-传入Action.mp4

12-13 Redux单项数w \ c a据流-动图体验| b ? /数据流转过程.mp4

12-14 Redux开发者工具-方便跟踪和调试.mp4

12-15 介绍MobX-可以像Vue一样声明式的修改数据.mU ` ? Z X h P 8p4

12-16 使用MobX开发TodoList-创建数据模型.mp4

12y 3 , – 5 ~ ) T +-17 使用MobX开发TodoList-数据的显示和操作.mp4

12-18 使用Redux管理用户信息-定义store和redu.mp4

12-1J K n e Y9 使用Rp ~ D J g i 0edux管理用户信息-使用useSelecto.mp4

12-2 什么是状态管理，为何要用状态管理.mp4

12-20 使用自定义Hook统一加C h . Z载用户信息，并存储到redu.mp4

12-21 根据用户登录状态动态跳转页面-使用自定义Hook统一.mp4

12-22 章总结.mp4

12-3 使用Context实现跨组件跨层级传递数据.mp4

1m e P x W2-4 学习8 L | V @ 6使用useReducerH ~ 1 L-提前了解redux的概念.mp4

12-5 使用useReducer开发TodoList-定义in.mp4

12-6 使用useReducer开发TodoList-使用di.mp4

12-7 使用Context和useReducer实现跨组件通讯.mp4

12-8 介绍Redux-React世界最h A ? \ T \ b [流行的状态管理工具.mp4

12-9 使用Redux实现数字加减法-认识Redn I 3 { g 0 8ucer和Ac.mp4

第13章 【实战】开发问卷编辑器 part# n }1 – 寻找突破口，用两个组件打通全部流程

13-1 -章介绍.mp4

13-10 -定义组件配置-可根据type找到组件.mp4

13-11o ( 8 f | n ~ * K -在画布上动态显示组件列表-梳理完整的流程.mp4

13-12 -点击画布选中组件-通过selectedId全局共享.mp4

13-13 -组件库p N S-组件按类型分组.mp4

13-16 | –4 -把组件分组显示在组件库中.mp4

13-15 -点击组件库中的{ O ! { 2 X w组件，添加到画布中.mp4

13-16 -解释为何要使用fe_id.mp4

13-17 -定义属性F t } i _ ` + 5表单，用于修改组件的属性.mp4

13-18 -根据选中的组件，动态显示属性表单.mp4

13-1\ 4 c G9 -修改组件属性，并同步到画布中.mp4

13-2 -需求分析-详细演示各个功M K ! F c –能.mp4

13-20 -定义EditHeader组5 o q a + n } T件，实现返回功能.mp4

13-3 -分析UI界面，如何拆分组件.mp4

13-4 -开发UI组件拆分-实现画R } I布Y# f F p ) I [轴滚动.mp4

13-5 -定义画布中的两个组件-x U L g S 2 % xTitle和InH d f K Q * c A eput.mp4

13-6 -把Titl6 K Q Q t # i T $e和Input组件显示到画布上.mp4

13-7 -定义问卷组件的数据结构-这是动Q : b Z ~态渲染画布的前提.mp4

13-8 -把组件列表存储到Redux store-统一各个组件.mp4

13-9 -把组件列表存储到Re= v } ! \ 3 k 6 {dux store-重构useL.mp4

第14章 【5 ) G a实战】开发问. x V \ m卷编辑器 part2 – 增加其他组件，展现设计的扩展性

14-1 -工具栏-删除组件，并r . c T重新计算selectedId-p.mp4

14-10 -根据QuestionInput改造; B # J |出Questio.mp4

14-11 -学习Antd的Radio组件，并定义属性类型.mp4

14-12 -创建QuestionRadio的Component.mp4

14-13 -开发QuestionRadio属性表单-可动态添加.mp4

14-14 -QuestionRadio属C 5 k C #性表单变化，同步到画布.mp4

14-15 -创建QuestionCN G 7 c ( # ] rheckbox组件，并显示在.mp4

14-16 -开发QuestionCheckbox属性表单-可动.mp4

14-2 -工具栏-隐藏组件，并重新计算selectedId-p.mp4

14-3 -工具栏-锁定和解锁组件/ w t，动态禁用属性4 U 8 8 1 N 2表单.mp4

14-4 -工具栏-复制和粘贴L – v + C组件-结合addComponent.mp4

14; r V r v M M-5 -在B v y f 2 \画布增加快捷键-需提前判断ActiveElemen.mp4, _ K

14-6 -快) $ f q [ O Y捷键-选中上一个，选中下一个., F &mp4

14-7 -增加Paragraph组件-体现编辑器组件机制的扩展.mp4

14-8 -为Paragraph组件增加换行功能-充分考虑安全性.mp4

14-9 -增加Questoi} n W j # 0 : vnInfo组件-整合标题和段落.mw a : L e / ! qp4

第L 1 , / ? n b z }15章 【实战】开发问卷编辑器 part3 – 聚焦高级功能：拖拽排序和撤销重做[缺15-1]

15-1 -在图层中修改组件标题-动态z b W ! \ / = 5 X切换d ~ m A z y + B Hinput和文本.mp4

15-10 -组件列表拖拽排序-选择第三方库dnd-kitM 3 k \ 0 Q ` %.mp4

15-11 -演示dnd-kit拖拽排序.mov.mp4

15-12 -在dnd-kit示例中模拟% 7 4 P _组件列表的数据– : W \ ,结构.mp4

15-13 -组件列表拖拽排序-抽离公共组件Sortl X T o o U j wableCo.mp4

15-14 -组件x e G列表拖拽排序-应用与画布和图层.mp4

15-15 -工具栏补充上移下移功能-和拖拽排序类似.mp4

15-16 -撤销重做的基本原理.mp4

15-17 -实现K L 8 h .Redux的撤销重做功能-使用TodoList.mp4

15-18 -问卷编辑器增加撤销重做-定义Redux数据类型.mp4

15-19 -问卷编辑器增加撤销重做-工具栏按钮和快捷键.mp4

15-2 -图层-切换组件的hidden和locked.mp4q J ? : B | h $ 0

15-20 -章总结.mp4

15-3 -动态切换右侧4 N 5 } ) ytabs-根据选中组件动态切换属性和页面.mp4

15-4 -设置页面信息-定义Redux数据结构.mp4

15-5f b : } -设置页面信息-修改表单同O ~ |步到Redux中.mp4

15-6 -修改网页标题-和右侧网页信息表单数据联通.mp4

15-7 -保存问卷信息-判断loading防止连续触发.mp4

15-8 –f ^ 8 8 ` – n监听内容变化，自动保存-不是定期保3 6 O ~ q ^ x存.mp4

15-9 -发布问卷-更新isPublished属性.mp4l e Q Q T d S ( h

第16章 【实战D I & ^ @ x 6 g】问卷数据统计 – 有统计数据才能体现完整V J 9 n项目的业务闭环

164 * | R s-1 -章开始.mp4

16-10 -答卷的数据结构设计-把结果写到Mock服务.mp4

16-11 -显示答卷列表-使用useRequest获取数据-A / )p.mp4

16-12 -显示统计表格-需根据componen% { LtList自定.mp4

16-13 -显示统计列表-实现分页功能.mp4

16-14 -选择第三v _ 4 q \ 2 8 )方图表库-最终选择Recharts.mp4

16-15 -使用Recharts演示饼图PieChart.mp4

16-16 -使用Recharts演示( U u ( & / 0 4 M柱状图BarChart.mp4

16-17 -设计图表统计的数据结构，并写到Mock服务中.mp4

16-18 -为QuestionRadio扩展统计组件.mp4R 7 9 h ) `

16-19 -为QuestionCheckbox扩展统计组件.mW l 1 v ~ Dp4

16-2 -问卷和答卷的区别-一个是题目一个\ x 4 ~ 3是答案.mp4

16-20 -章总结.mp4

16-3 -需求分析-# , S j详细分析每个功能点.mp4

16-4 -获取问卷信息-判断isPublisX w R T p Q ?hed给出提示.mp4

16-5 -页面Q F , % 3 NUI布局-增加oading效果-part1.mp4

16-6 -头部组件的UI布局.mp4

16-7 -头部组件-拷贝URL，生成二维码.mp4

16-7 f p h .8 -左侧显示组件列表-通过状态提升存储selectedI.mp4

16-9 -答卷的数据结构设计-开发答Y n : k l ~ M卷列表的前提.mp4

第17章 【实战】Next.js开发C端 – 学习React技术栈的 SSR 服务端渲染

17-1 -章介绍.mp4

17-10 -创建QuestionRadio组件，并引入到[ N _ % 3页面中.mp4

17-11 -创建form表单-使用隐藏域存储questionI.mp4

17-12 -新建API，并提交form表单.mp4

17-13 -创建Mock接口，跑通前后端完整流程.mp4

17-14 -抽离PageWrapper组件，统一定义Head.mp4

17-15 -获取问卷数据，并校验是否正常.mp4

17-16 -根据问卷组件列表，动态渲染表单.mp4

17-17 -扩展表单组件Title，Paragraph和Inf.mp4

17-19 f a P s L8 -扩展表单组件TextArea和Checkbox.mp4

17-19 -单独解决Checkbox组件的特殊性-合并多个va.mp4

17-2 -介绍SSR，它的优缺点，和CSR的区别，以及应用场景.mp4

17-20 -章总结.mp4

17-3 -使用Next.js创建项目并启动.mp4

17-4 -初试Next.js功能-扩展页面，使用API.mp4

17-5 -介绍StaticGeneration-构建时生成htn ~ , N n.mp4

17-6 -介绍Server-side-renderj ) M 6 y H Jing-每次.mp4

17Z Z # # N ~ . r s-7 -定义动态路由，获} t 9 , h 8 u取us R \ r v K Jrl参数.mp4

17-8 –s C b 7选择fo] @ : ] y , 0 hrm提交数据-和B端统计页做数据匹配.mp4

17-9 -创建QuestionInput组件，并引入到页面中.mp4

第18章 【实战】React性能{ I S % ) O优化 – 将 main.js代码从1.6M优化到 33KB

18-10 -章总结.mp4

18-2 -useState传入函数，只在组件渲染时执行一次.mp4

18-3 -使用useMemo缓存B端统计页的链接和二维码Ele.mp4

18-4 -使用useCallback缓存添加组件的函数.mp4

18-5 -使用React.memo优化子组件更c u g w : \ ? +新.mp4

18-6 -分P b U u析B端, 7 M – ~构建出的% F R z k ^ 5bunP 5 I Jdle文件，体积太大，需b ! – ! C要拆分.mp4

18-7 -配置路6 T 2 ( P ? ` }由懒加载，拆分编辑页和统计页，优化代码体积.mp4

1m A M l D Z C + 68-8 -抽离公共代码antd和react，合理] Q ]使用HTTP缓.mp4

18-9 -CRA根据路由懒加载自动拆分CSS文件.mp4Z \ v 4 =

第19章 【实战】ReactA E d m A A h 测试 – 项目有测试，睡觉才踏实（不会半夜被叫醒改bug）

1^ g L Y ` p p Q s9-1 -章介绍.mp4

19-10 -使用StoryBook写QuestionInfo组.mp4

19-11 -讲解TS中typeof语法，和JS的typeofr u B & }不.mp4

19-12 -使用StoryBook写其他组件的可视化测试.mp4

19-13 -章总结.mp4

19-2 -单元测试入门，使用jest写测试用例.mp4

19-3 -写QuestionInfo组件的单元测试，学习新的断.mp4

19-4d R J 9 -写Questiol : 7nTitle和QuestionParS 4 / S ) – O 3 v.mp4

19-5 -写QuestionInput和QuestionTex.mp4

19-6 -写QuestionRadio组件的单元测试-通过va.mp4

19-7 -写QueG O f O Nsv 5 B j 8tionCheckbox组件的单元测试-获.mp4

19-8 -使用pre-commit做自动化测试，有问题的代码不.mp4

19-9 -可视化测试-安装Storybook并演示例子.mp4

第20章 课程总结

20-1 -关于项目的服务端.mp4

20-2 -课程总结~ % J f K : X [ A.mp4

课件.zip