这是一份针对该课程的技术选型与学习路径导读。对于希望深入前端工程化体系，并具备全栈思维的开发者和转行者而言，这套基于 React 18 与 Next.js 14 结合 Nest.js 的低代码实战项目，具有较高的参考价值。它不只关注单页面的交互实现，更侧重于复杂业务逻辑下的架构设计与数据流转，适合那些已经熟悉 React 基础语法，但卡在“如何构建企业级中后台”或“如何设计可扩展的低代码引擎”层面的学习者。

课程核心解决的技术痛点

这门课的核心价值不在于重复演示基础的组件写法，而在于拆解一个高仿问卷星级别的复杂低代码平台。在常规开发中，表单配置通常由静态 JSON 驱动，但在低代码场景下，需要解决动态渲染、字段联动、数据校验以及模板扩展等难题。课程通过 B 端（管理后台配置）与 C 端（用户填写页面）的双视角闭环，展示了如何将业务逻辑从代码中剥离出来，通过元数据驱动界面生成。对于正在应对“组件库难以扩展”、“表单逻辑复杂到无法维护”或“希望掌握前后端分离架构中后端如何支撑复杂业务”的开发者来说，这是一个典型的解决方案范例。它避免了单纯的前端炫技，而是将 Nest.js 作为后端核心，展示了全栈开发的完整链路。

基础要求与学习重点

在开始之前，请确认你已具备以下基础：熟练使用 React Hooks，理解组件生命周期，能够独立开发中等复杂度的 CRUD 模块；对 TypeScript 有基本认知，因为全栈项目中类型定义贯穿前后端；了解 RESTful API 设计规范。如果没有 Next.js 或 Nest.js 经验，建议先花几天时间补齐这两块的理论基础，重点理解 Next.js 的服务端渲染（SSR）优势以及 Nest.js 的模块依赖注入机制。

建议的学习路径分为三个阶段。首先，深入理解低代码的核心概念，即“配置转代码”的逻辑，这部分主要看 B 端配置模块的架构设计，理解如何设计 Schema 协议。其次，重点攻克 C 端的动态渲染引擎，学习如何根据接收到的配置数据，递归或策略性地渲染不同的表单控件，并处理复杂的双向绑定。最后，进入全栈集成部分，通过 Nest.js 实现后端业务逻辑，理解前后端如何协作完成数据的持久化与权限控制。不要试图跳过架构设计直接看代码，否则难以举一反三。

实践建议与能力延伸

资料包中的代码是学习的关键素材，但不要仅仅运行它。建议采用“复刻加改造”的方式练习。第一步，完整跑通项目，观察从配置到渲染的全流程，打断点调试数据流向。第二步，尝试添加一种新的表单控件（例如富文本或地图选址），从后端的 Schema 定义开始，贯穿到前端的渲染组件，完整走一遍扩展流程。第三步，研究项目的状态管理方案，思考在如此复杂的表单交互中，状态是如何避免不一致的。

学完这门课，你应能独立搭建一个基于低代码思想的管理后台，具备设计元数据驱动 UI 的能力，并理解全栈架构中前后端职责的边界。对于求职而言，这种“全栈低代码实战”的经历能体现你对复杂系统的驾驭能力，远超普通的增删改查项目。建议在学习过程中，时刻关注工程化细节，如 TypeScript 的类型体操、Next.js 的 API 路由设计，这些才是区分初级与高级开发者的关键所在。

课程目录

├── 第1章 开期准备/ │ ├── [ 22M] 1-1-导学 │ ├── [ 17M] 1-2-功能介绍 │ └── [ 10M] 1-3-课程安排-即学即用，渐进式开发项目 ├── 第2章 【入门】什么是 React React 引领了现代前端开发的变革/ │ ├── [5.3M] 2-1-章介绍 │ ├── [ 28M] 2-2-React是全球最火爆的前端框架 │ ├── [ 12M] 2-3-React其实非常简单-但需要你熟悉JS语法 │ ├── [ 40M] 2-4-看几个示例来体会React的代码逻辑 │ ├── [ 15M] 2-5-React核心价值-组件化 │ ├── [ 18M] 2-6-React核心价值-数据驱动视图 │ ├── [ 10M] 2-7-课程安排-即学即用，渐进式开发项目 │ └── [4.4M] 2-8-章总结 ├── 第3章 【基础】创建 React 项目开发环境 – 代码未动，环境先行/ │ ├── [7.5M] 3-1-章介绍 │ ├── [ 14M] 3-2-准备工作-安装必备软件 │ ├── [ 28M] 3-3-使用Create-React-App创建项目-React官网推荐的方式 │ ├── [ 20M] 3-4-使用Vite创建React项目-Vite是前端热门工具 │ ├── [ 26M] 3-5-使用eslint检查代码语法错误-提前识别，防患于未然 │ ├── [ 30M] 3-6-使用prettier规范代码风格-统一风格，多人开发也不怕乱 │ ├── [ 13M] 3-7-提交代码到git仓库-选择国内平台 │ ├── [ 18M] 3-8-使用husky执行pre-commit检查-把非规范代码拒之门外 │ ├── [ 23M] 3-9-使用commit-lint规范commit提交格式-让git记录清晰可读 │ ├── [ 32M] 3-10-【加餐】vite和webpack的区别-vite使用ES-Module增加启动速度 │ └── [5.6M] 3-11-章总结 ├── 第4章 【基础】JSX 语法和组件基础 – 学完即可开发一个静态页面/ │ ├── [5.9M] 4-1-章介绍 │ ├── [ 32M] 4-2-JSX语法和HTML相似-很容易学习 │ ├── [ 19M] 4-3-JSX的标签-和HTML标签有几点不同 │ ├── [ 22M] 4-4-JSX的属性-style改动非常大 │ ├── [ 26M] 4-5-JSX中监听DOM事件-遇到了Typescript类型问题 │ ├── [ 57M] 4-6-补充Typescript类型基础知识-解答上一节的困惑 │ ├── [ 22M] 4-7-JSX中插入JS变量和表达式-让JSX真正融入JS代码中 │ ├── [ 25M] 4-8-JSX中使用条件判断-让JSX具备if-else能力 │ ├── [ 30M] 4-9-JSX中使用循环-让JSX真正动起来 │ ├── [ 45M] 4-10-实战-开发项目列表页-即学即用效果好 │ ├── [ 44M] 4-11-React组件基础-拆分UI结构，便于开发维护和复用 │ ├── [ 63M] 4-12-组件props-父子组件通讯的桥梁 │ ├── [ 27M] 4-13-React开发者工具-让React调试更简单 │ ├── [ 18M] 4-14-加餐-JSX和Vue模板的区别-体现两者设计理念的差异 │ └── [5.7M] 4-15-章总结 ├── 第5章 【基础】React Hooks – 处理逻辑监听状态，让页面动起来/ │ ├── [7.6M] 5-1-章介绍 │ ├── [ 19M] 5-2-useState让页面“动”起来 │ ├── [ 11M] 5-3-state一个组件的“独家记忆” │ ├── [ 36M] 5-4-state特点-异步更新，合并后更新 │ ├── [ 45M] 5-5state特点-不可变数据-非常重要的概念 │ ├── [119M] 5-6实战-重构列表页-用useState实现增、删、改 │ ├── [ 41M] 5-7使用immer修改state-帮你摆脱“不可变数据”的痛苦 │ ├── [ 35M] 5-8实战-重构列表页-使用immer让开发更简单 │ ├── [ 62M] 5-9useEffect监听组件生命周期-创建、更新、销毁 │ ├── [ 26M] 5-10useEffect在开发环境下执行两次-模拟全流程，及早暴露bug │ ├── [ 36M] 5-11用useRef操作DOM元素-React的ref和Vue3的ref不一样 │ ├── [ 55M] 5-12使用useMemo缓存数据-React中常见的性能优化手段 │ ├── [ 29M] 5-13使用useCallback缓存函数 │ ├── [ 29M] 5-14自定义Hooks-ReactHooks的正确打开方式 │ ├── [ 47M] 5-15使用自定义Hook获取鼠标位置-组件公共逻辑抽离和复用 │ ├── [ 30M] 5-16使用自定义Hook异步加载数据-模拟异步场景 │ ├── [ 42M] 5-17使用第三方Hooks-ahooks和react-use │ ├── [ 15M] 5-18Hooks的三条使用规则 │ ├── [ 30M] 5-19Hooks闭包陷阱-React常考面试题 │ └── [7.0M] 5-20章总结 ├── 第6章 【基础】在 React 中使用 CSS 样式 – 为页面“美颜”，页面变漂亮/ │ ├── [8.2M] 6-1章介绍 │ ├── [ 45M] 6-2普通方式使用CSS-尽量不要用内联style │ ├── [ 47M] 6-3CSS-Module解决className可能会重复的问题 │ ├── 【@更多it资源 www.】 │ ├── [ 47M] 6-4使用Sass语法-提高CSS编码效率 │ ├── [ 70M] 6-5CSS-in-JS常用工具之Styled-components │ ├── [ 12M] 6-6JS函数后加字符串的调用形式-解决Style-components写法的困惑 │ ├── [ 27M] 6-7CSS-in-JS常用工具之Styled-jsx和Emotion │ ├── [ 39M] 6-8实战-增加CSS样式-创建正式项目环境 │ ├── [ 47M] 6-9实战-为列表页增加CSS样式 │ ├── [ 50M] 6-10实战-为QuestionCard组件增加CSS样式 │ └── [5.6M] 6-11章总结 ├── 第7章 【中级】React-router 路由 – 配置多页面，由单页变成一个系统/ │ ├── [ 15M] 7-1章介绍 │ ├── [ 27M] 7-2路由设计-确定网址和页面的关系 │ ├── [ 11M] 7-3设计Layout模板-抽离公共部分，代码复用 │ ├── [ 19M] 7-4路由开发-创建所有页面 │ ├── [ 29M] 7-5路由开发-创建3个Layout和使用Outlet │ ├── [ 60M] 7-6使用React-Router配置路由-实现了多页面 │ ├── [ 31M] 7-7使用路由API-跳转页面和获取参数 │ ├── [4.7M] 7-8章总结 │ └── [ 17M] 7-9自定义网页标题和favicon ├── 第8章 【基础】使用 AntDesign UI 组件库 – 常用组件拿来即用/ │ ├── [ 11M] 8-1章介绍 │ ├── [ 21M] 8-2介绍React世界中常用的几个UI组件库 │ ├── [ 21M] 8-3安装和使用Ant-Design │ ├── [ 58M] 8-4使用AntD重构MainLayout-体现AntD布局能力-part1 │ ├── [ 88M] 8-5使用AntD重构ManageLayout-灵活使用Button组件 │ ├── [ 35M] 8-6使用AntD开发Logo组件 │ ├── [ 16M] 8-7开发UserInfo组件 │ ├── [ 28M] 8-8使用AntD开发首页 │ ├── [ 14M] 8-9使用AntD快速制作漂亮的404页面 │ ├── [ 89M] 8-10使用AntD重构QuestionCard组件-得到了最终的UI效果 │ ├── [ 37M] 8-11使用AntD的confirm功能-展示AntD的交互能力 │ ├── [ 30M] 8-12使用AntD开发星标问卷列表页 │ ├── [ 62M] 8-13使用AntD开发回收站页面-使用Table组件 │ ├── [ 75M] 8-14开发回收站的恢复和删除-为表格增加了选择功能 │ ├── [ 11M] 8-15加餐-介绍TailWind-CSS │ └── [9.8M] 8-16章总结 ├── 第9章 【中级】React 表单组件 – 接收用户输入，让用户和页面互动起来/ │ ├── [7.2M] 9-1章介绍 │ ├── [ 52M] 9-2什么是受控组件-React表单组件的重要概念 │ ├── [ 32M] 9-3使用textarea组件-通过dangerouslySetInnerHTML使文本换行 │ ├── [ 32M] 9-4使用radio单选按钮-受控组件的设计思路 │ ├── [ 66M] 9-5使用checkbox复选按钮-模拟真实的业务场景 │ ├── [ 25M] 9-6使用select下拉框组件 │ ├── [ 33M] 9-7使用form组件和submit方法 │ ├── [ 42M] 9-8使用AntD开发ListSearch搜索组件 │ ├── [ 63M] 9-9ListSearch搜索修改URL参数-体现组件设计的解耦合 │ ├── [ 81M] 9-10使用AntD的Form组件开发注册页 │ ├── [ 97M] 9-11使用AntD的Form组件开发登录页，并实现“记住我”功能 │ ├── [ 53M] 9-12使用AntD表单组件的校验功能，校验用户名和 │ ├── [ 66M] 9-13使用第三方表单校验工具React-Hook-Form │ ├── [ 35M] 9-14使用第三方表单校验工具Formik │ └── [4.6M] 9-15章总结 ├── 第10章 【中级】Ajax 网络请求 part1 – 搭建 Mock 服务，完成前后端通讯/ │ ├── [6.9M] 10-1章介绍 │ ├── [ 12M] 10-2关于Ajax的基础知识、API和工具 │ ├── [ 50M] 10-3使用mockjs模拟Ajax请求 │ ├── [ 33M] 10-4在nodejs中使用mockjs-使用Random轻松模拟数据 │ ├── [ 27M] 10-5使用nodejs启动服务，模拟get请求 │ ├── [ 21M] 10-6模拟post请求，并使用postman测试 │ ├── [ 37M] 10-7使用craco.js扩展webpack配置-使用devServer代理访问mock服务 │ ├── [4.5M] 10-8介绍几个在线mock平台-谨慎使用 │ ├── [ 46M] 10-9API设计-使用RestfulAPI规范 │ ├── [ 63M] 10-10配置axios的response拦截器-统一处理错误提示 │ ├── [ 41M] 10-11开发新建问卷功能-设置loading状态以优化体验 │ ├── [ 36M] 10-12开发获取问卷信息功能-使用自定义Hook抽离公共逻辑 │ ├── [ 41M] 10-13使用useRequest重构Ajax请求-统一处理loading和error │ ├── [ 91M] 10-14使用useRequest获取问卷列表 │ ├── [ 73M] 10-15给列表增加搜索功能-使用第三方Hook抽离组件公共逻辑 │ └── [ 75M] 10-16使用useRequest开发星标和回收站页面 ├── 第11章 【中级】Ajax 网络请求 part2 – 一次学习多种形式的列表和分页功能/ │ ├── [ 62M] 11-1开发分页功能-定义URL参数page和pageSize │ ├── [109M] 11-2实现列表分页功能-使用Antd的Pagination组件 │ ├── [ 49M] 11-3LoadMore上划加载更多-设计组件的state │ ├── [ 55M] 11-4LoadMore上划加载更多-使用防抖监听scroll事件 │ ├── [ 51M] 11-5LoadMore上划加载更多-根据DOM位置判断加载时机 │ ├── [ 70M] 11-6LoadMore上划加载更多-真正加载数据 │ ├── @更多it资源 www. │ ├── [ 60M] 11-7LoadMore上划加载更多-优化功能体验 │ ├── [ 83M] 11-8开发问卷标星功能 │ ├── [ 39M] 11-9开发问卷复制功能 │ ├── [ 31M] 11-10开发删除问卷功能-修改信息“假删除” │ ├── [ 54M] 11-11开发恢复问卷功能-使用for-awiat-of处理多个异步请求 │ ├── [ 37M] 11-12开发彻底删除功能 │ ├── [ 15M] 11-13介绍JWT-用户登录校验的技术方案 │ ├── [ 35M] 11-14开发用户的mock和services │ ├── [ 47M] 11-15开发注册和登录功能 │ ├── [ 48M] 11-16存储token，并使用axios拦截器附加token │ ├── [ 47M] 11-17开发获取用户信息，以及退出登录 │ └── [6.5M] 11-18-章总结 ├── 第12章 【中级】Redux 状态管理 – 复杂项目的数据管理形式/ │ ├── [9.5M] 12-1章介绍 │ ├── [ 21M] 12-2什么是状态管理，为何要用状态管理 │ ├── [ 42M] 12-3使用Context实现跨组件跨层级传递数据 │ ├── [ 60M] 12-4学习使用useReducer-提前了解redux的概念 │ ├── [ 53M] 12-5使用useReducer开发TodoList-定义initialState和reducer │ ├── [ 47M] 12-6使用useReducer开发TodoList-使用dispatch和action处理数据 │ ├── [ 43M] 12-7使用Context和useReducer实现跨组件通讯-网上热议的话题 │ ├── [8.2M] 12-8介绍Redux-React世界最流行的状态管理工具 │ ├── [ 61M] 12-9使用Redux实现数字加减法-认识Reducer和Action │ ├── [ 36M] 12-10使用Redux实现数字加减法-使用useSelector和useDispatch │ ├── [ 52M] 12-11使用Redux实现TodoList-展示复杂数据结构的Reducer写法 │ ├── [ 76M] 12-12使用Redux实现TodoList-传入Action时需带PayLoad │ ├── [8.6M] 12-13Redux单项数据流-动图体验数据流转过程 │ ├── [7.0M] 12-14Redux开发者工具-方便跟踪和调试 │ ├── [ 58M] 12-15介绍MobX-可以像Vue一样声明式的修改数据 │ ├── [ 67M] 12-16使用MobX开发TodoList-创建数据模型 │ ├── [ 99M] 12-17使用MobX开发TodoList-数据的显示和操作 │ ├── [ 41M] 12-18使用Redux管理用户信息-定义store和reducer │ ├── [ 47M] 12-19使用Redux管理用户信息-使用useSelector获取store数据 │ ├── [ 73M] 12-20使用自定义Hook统一加载用户信息，并存储到redux中 │ ├── [ 67M] 12-21根据用户登录状态动态跳转页面-使用自定义Hook统一处理 │ └── [5.9M] 12-22章总结 ├── 第13章 【实战】开发问卷编辑器 part1 – 寻找突破口，用两个组件打通全部流程/ │ ├── [5.1M] 13-1-章介绍 │ ├── [ 26M] 13-2-需求分析-详细演示各个功能 │ ├── [ 22M] 13-3-分析UI界面，如何拆分组件 │ ├── [ 43M] 13-4-开发UI组件拆分-实现画布Y轴滚动 │ ├── [ 73M] 13-5-定义画布中的两个组件-Title和Input │ ├── [ 36M] 13-6-把Title和Input组件显示到画布上 │ ├── [ 29M] 13-7-定义问卷组件的数据结构-这是动态渲染画布的前提 │ ├── [ 28M] 13-8-把组件列表存储到Reduxstore-统一各个组件的属性 │ ├── [ 62M] 13-9-把组件列表存储到Reduxstore-重构useLoadQuestionData │ ├── [ 42M] 13-10-定义组件配置-可根据type找到组件 │ ├── [ 40M] 13-11-在画布上动态显示组件列表-梳理完整的流程 │ ├── [ 82M] 13-12-点击画布选中组件-通过selectedId全局共享 │ ├── [ 48M] 13-13-组件库-组件按类型分组 │ ├── [ 17M] 13-14-把组件分组显示在组件库中 │ ├── [ 49M] 13-15-点击组件库中的组件，添加到画布中 │ ├── [ 18M] 13-16-解释为何要使用fe_id │ ├── [ 69M] 13-17-定义属性表单，用于修改组件的属性 │ ├── [ 61M] 13-18-根据选中的组件，动态显示属性表单 │ ├── [ 66M] 13-19-修改组件属性，并同步到画布中 │ └── [ 49M] 13-20-定义EditHeader组件，实现返回功能 ├── 第14章 【实战】开发问卷编辑器 part2 – 增加其他组件，展现设计的扩展性/ … 其余 1

39 项略，目录共 339 项