这门课解决什么工作场景

企业内部系统开发是前后端工程师绕不开的场景，但很多人平时写多了营销页面或简单接口，真碰上权限分层、多角色操作、复杂表单交互的内部系统，还是会卡在状态流转和工程结构上。这门课围绕一套企业资源计划系统的前端实现展开，重点解决的是：怎么用 React 19 把一个中后台系统从空目录搭到能跑通主题切换、路由守卫、状态管理和数据看板。它不是零散讲组件库用法，而是带你完整走一遍前端工程化决策——为什么用 Vite 管、主题变量怎么分层定义、全局状态放哪一层、受保护路由怎么拦。如果你一直想系统补上中后台前端的结构化经验，这个项目是个合适的练手对象。

适合什么基础，学完能独立做什么

资料默认你已经能写基本的 JSX 和用命令行跑项目，但不需要你精通 React 生态。如果只写过文档里的 todo demo，建议先补到能独立调通一个带表单的页面再看，否则从主题模块的类型定义开始会觉得吃力。学完之后，你应该能独立搭起一个中后台前端骨架：定义主题常量和变量、用状态管理接管主题切换、配置带权限判断的路由、组织数据可视化页面、用 Vite 管理构建产物。更重要的是，你会清楚每一层目录和类型为什么这么拆，而不是只会照抄脚手架。这套结构经验可以平移到其他内部系统需求上，不必每次开新项目都从零找模板。

建议先看哪几块，资料怎么配合练习

建议先看项目介绍和 Vite 构建那几节，把本地环境跑通，再直接跳到主题模块入口、类型定义、变量定义这几节。主题这块是整门课结构最清晰的部分，跟着敲一遍能很快理解“常量—类型—状态—组件”怎么分层。看完主题模块再回头补全局样式和根组件，顺序会顺很多。练习时不要只盯着视频，每看完一个模块就暂停，自己在编辑器里把对应文件写出来，跑不通再回去对。主题状态管理和路由守卫这两块最好手写两遍：第一遍照着实现，第二遍试着改一个需求，比如把单主题换成多主题切换或加一个角色维度。数据可视化和工程化实践部分，建议先把假数据接进去看渲染逻辑，再考虑替换成真实接口。资料包里的视频偏操作演示，真正消化靠的是自己改需求时踩的坑，别把视频当说明书只过一遍。


React 19构建ERP前端核心能力：主题定制、状态管理、路由守卫、数据可视化与工程化实践。

课程目录

*   01 01 ERP项目介绍.mp4 03:56

*   02 02 使用Vscode开发前端项目.mp4 03:03

*   03 03 安装React项目依赖.mp4 03:10

*   04 04 使用Vite管理项目构建.mp4 01:42

*   05 05 项目的根HTML文件.mp4 02:12

*   06 06 项目主入口程序.mp4 02:55

*   07 07 项目的全局样式.mp4 03:14

*   08 08 项目根组件.mp4 03:22

*   09 09 主题模块入口文件.mp4 03:29

*   10 10 主题相关的类型定义.mp4 02:02

*   11 11 主题变量定义.mp4 02:43

*   12 12 主题常量定义.mp4 02:22

*   13 13 主题状态管理.mp4 04:45

*   14 14 主题提供者组件.mp4 02:39

*   15 15 主题切换组件和样式.mp4 03:41

*   16 16 本地存储工具类.mp4 04:04

*   17 17 准备项目本地资源文件.mp4 03:03

*   18 18 受保护的路由组件和样式.mp4 05:10

*   19 19 登录模块入口文件.mp4 01:50

*   20 20 登录相关的类型定义.mp4 01:56

*   21 21 登录相关的状态管理.mp4 02:50

*   22 22 登录相关的API服务.mp4 02:35

*   23 23 登录页面样式.mp4 01:31

*   24 24 登录表单组件.mp4 02:33

*   25 25 登录页面组件.mp4 01:48

*   26 26 布局页面入口文件.mp4 01:59

*   27 27 布局相关的类型定义.mp4 01:35

*   28 28 布局相关的样式.mp4 04:12

*   29 29 布局相关的组件.mp4 06:41

*   30 30 首页模块入口文件.mp4 01:53

*   31 31 首页相关的类型定义.mp4 01:34

*   32 32 首页相关的样式文件.mp4 03:58

*   33 33 产品饼图组件.mp4 02:06

*   34 34 销量折线图组件.mp4 01:48

*   35 35 图表卡片组件.mp4 01:31

*   36 36 仪表盘组件.mp4 02:06

*   37 37 最近订单组件.mp4 03:02

*   38 38 统计卡片组件.mp4 01:30

*   39 39 后端接口环境准备.mp4 01:36

*   40 40 项目启动和运行.mp4 03:29

*   41 41 发布项目开发笔记.mp4 03:33

*   42 42 代码打包和上传.mp4 02:02