本资料是为在 Frappe 后端之上构建 React 单页应用（SPA）提供的快速参考，主要面向需要把 React 前端与 Frappe API、实时事件和资源接口对接的开发者。资料以两个实际项目为线索展开：Unity 家长端应用位于 apps/unity_parent_app/new_frontend/，采用 React 18 + Vite 6 + shadcn/ui + Tailwind + TanStack Query v5 + Jotai + Axios；Walsh 管理门户位于 apps/edu_quality/walsh/，采用 React 18 + Vite 5 + Refine v4 + Mantine v5 + React Query v3。两者分别展示了不同的数据获取、状态管理和 UI 组件方案。
在 Frappe API 集成方面，资料给出 Axios 的用法，其中 src/utils/axiosInstance.ts 已预配置 withCredentials: true，调用白名单方法时通过 axiosInstance.post('/api/method/app.module.function', { student_id: 'STU-001' }) 取得 res.data.message，获取资源时通过 axiosInstance.get('/api/resource/Student/STU-001') 取得 res.data.data。Refine 数据提供者部分展示了 useList、useOne、useCreate、useUpdate、useDelete 的用法，useList 支持 resource、filters、pagination 与 meta.dataProviderName（如 default、notices、cmap），useCreate 通过 mutate 传入 resource 与 values，非 REST 的自定义方法则通过 dataProvider.custom 以 url、method、payload 调用。
数据请求与缓存方面，资料分别给出 TanStack Query v5 和 React Query v3 的模式。v5 中 useQuery 使用 queryKey、queryFn、staleTime、enabled 配置，useMutation 在 onSuccess 中通过 queryClient.invalidateQueries 失效缓存；v3 中 useQuery 采用数组键与依赖，并通过 fetch 后取 .message。状态管理使用 Jotai，示例定义 activeStudentAtom，并在组件中通过 useAtom、useAtomValue、useSetAtom 分别进行读写或只读、只写访问。路由方面，家长端使用 React Router v6 的 BrowserRouter（basename="/parent-app"）、Routes、Route 以及 useNavigate、useParams；Walsh 使用 Refine 的资源数组配合 react-router-v6 集成来驱动路由。
UI 组件方面，家长端使用 shadcn/ui 与 Tailwind，示例引入 Button、Input、Card 等组件以及 cn 工具函数，并使用 class-variance-authority 定义按钮变体；Walsh 使用 Mantine v5，示例引入 Button、TextInput、Select、Stack、Group、Modal 以及 useDisclosure、notifications。实时能力仅家长端提供，资料展示 src/utils/frappeSocket.ts 中的 subscribeToRoom、onRealtimeEvent、offRealtimeEvent、unsubscribeFromRoom，用于订阅房间、监听事件并做清理。构建与部署部分给出命令：家长端通过 npm run dev 启动 8080 开发服务器、npm run build 输出到 public/new_frontend/ 并复制 www/parent-app.html；Walsh 通过 yarn dev 启动 8080、yarn build 依次执行 TS 编译、Vite 构建并输出到 public/walsh/、复制 www/walsh.html；构建后执行 bench --site <site> clear-cache，若静态资源有变化再执行 bench build --app <app>。常见模式还包括受保护路由（基于 isLoggedIn 与 Navigate）、错误边界、以及通过 FormData 与 axiosInstance.post('/api/method/upload_file', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) 实现 Frappe 文件上传。适用于需要对接 Frappe 的 React SPA 前端开发与维护场景。资料未提供收费、价格、性能或效果方面的信息。