React-admin Simple 示例应用完全指南：架构解读、本地运行与自定义数据源实战

React-admin Simple 示例应用完全指南架构解读、本地运行与自定义数据源实战【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址: https://gitcode.com/gh_mirrors/re/react-admin本文以 react-admin 仓库examples/simple为绝对主线系统讲解这个官方示例应用的用途、运行方式、目录结构与核心实现。读完本文你将能够在本仓库中快速启动该示例、掌握其数据提供者装饰链、认证授权、国际化等关键机制并学会借助它复现问题、验证 react-admin 功能。Simple 示例是做什么的examples/simple是 react-admin 官方仓库中最重要的示例应用之一。根据 examples/simple/README.md 的说明它承担两个核心职责端到端测试E2E载体仓库的 Cypress 测试位于 cypress/e2e 目录覆盖 auth、create、edit、list、show、navigation、permissions、mobile 等场景就是跑在这个示例之上的。也就是说它是 react-admin 各版本发布前质量验证的“标尺应用”。Bug 复现沙箱官方通过 Stackblitz 在线沙箱形式开放该示例社区用户可以在线复现问题并反馈给维护团队从而保证可复现性与排查效率。它本质上是一个覆盖面极广的功能演示台posts、comments、tags、users 四个资源加上自定义路由、批量操作、DataTable、无限滚动列表、文件上传、角色权限、双语国际化等特性几乎把 react-admin 的主要 API 都过了一遍。环境准备与快速运行README 给出的运行步骤非常简单在仓库根目录执行两条命令即可# 安装 monorepo 全部依赖 make install # 以扩展 watch 模式运行 simple 应用 make run-simple随后浏览器访问http://localhost:8080/即可看到应用。这两条命令的底层指向可以从仓库配置中得到印证Makefile 中run-simple目标实际调用的是根目录yarn run-simple根 package.json 中定义run-simple: cd examples/simple yarn devexamples/simple/package.json 中dev脚本为vite因此最终启动的是一个 Vite 开发服务器。README 特别强调这是一个“扩展 watch 模式extended watch mode”——应用代码和 packages 源码的改动都会触发热重载。这一机制来自 examples/simple/vite.config.tsVite 配置在启动时读取仓库packages目录下的所有包并为其建立指向packages/*/src源码目录的别名create-react-admin除外。这样当你同时修改ra-core、ra-ui-materialui等核心包源码时simple 应用会立即使用最新源码并自动刷新非常适合边改框架源码边验证效果的开发场景。登录凭据方面README 给出的默认账号为login/password。结合 examples/simple/src/authProvider.tsx 的实现实际内置了三组账号均为password作为密码便于体验不同角色权限用户名展示身份角色说明loginJohn Doe默认无 roleREADME 默认凭据受默认访问控制策略约束userJane Doeuser受限角色无法访问部分资源/字段adminDennis Nedryadmin拥有全部访问权限应用目录结构与入口examples/simple采用典型的按资源分目录的组织方式examples/simple/ ├── index.html # HTML 入口 ├── vite.config.ts # Vite 配置含 packages 源码别名 ├── sandbox.config.json # 在线沙箱配置 └── src/ ├── index.tsx # Admin 应用装配入口 ├── dataProvider.tsx # 数据提供者装饰器链 ├── authProvider.tsx # 认证提供者角色权限 ├── i18nProvider.tsx # 国际化提供者 ├── Layout.tsx # 自定义布局AppBar Menu ├── addUploadFeature.tsx# 文件上传装饰器 ├── data.tsx # fakerest 模拟数据集471 行 ├── queryClient.ts # react-query 客户端 ├── posts/ comments/ # 资源页面List/Create/Edit/Show ├── tags/ users/ └── i18n/ # en / fr 语言包入口文件 examples/simple/src/index.tsx 展示了 react-admin 应用的经典装配方式通过Admin传入authProvider、dataProvider、i18nProvider、自定义layout与queryClient内部声明posts、comments、tags、users四个Resource并通过三组CustomRoutes挂载/custom、/custom1无布局与/custom2、/custom3带布局共四个自定义路由页面。数据层fakerest 数据提供者与装饰器链examples/simple/src/dataProvider.tsx 是本示例最值得研究的文件之一它把 react-admin 数据提供者的“装饰器HOC/wrapper”模式演示得淋漓尽致从内到外依次是fakerest 基础提供者fakeRestProvider(data, true, 300)直接由 ra-data-fakerest 生成。第二个参数true表示启用延迟可用来观察 loading 状态300为模拟网络延迟毫秒数数据来自 examples/simple/src/data.tsx 中的 posts、comments、tags、users 模拟数据集因此无需任何后端即可完整演示增删改查。生命周期回调通过withLifecycleCallbacks为posts资源注册beforeDelete回调——删除文章前先查出其下所有评论并批量删除同时调用queryClient.invalidateQueries使评论缓存失效。这是 react-admin 处理级联删除的标准姿势。标签搜索增强addTagsSearchSupport装饰器拦截getList对comments资源把分页结果转成pageInfohasNextPage/hasPreviousPage以支持无限滚动对tags资源则把形如xxx_q的过滤键转换成基于正则的模糊搜索。上传能力addUploadFeature见 examples/simple/src/addUploadFeature.tsx在update时把表单里的File对象通过FileReader转为 base64 的src字符串再并入pictures字段提交。故障注入 Proxy最外层用一个Proxy包装使应用可以按需模拟错误——例如在localStorage中设置session_ended即会让所有请求以 403 拒绝用于测试认证失效处理提交标题为f00bar的文章会返回 400 及字段级错误用于测试表单校验错误展示。这正是 E2E 测试能够覆盖“错误分支”的关键设计。认证与角色权限examples/simple/src/authProvider.tsx 实现了一个完整的 react-adminAuthProviderlogin根据用户名区分admin/user/ 默认角色并把身份信息写入localStorage错误凭据会延迟 1 秒后 reject并写入not_authenticated标记logout/checkAuth/checkError负责登出与 401/403 拦截getIdentity返回当前用户 id、姓名与头像用于顶栏用户菜单展示canAccess基于角色执行访问控制策略admin放行一切user与default角色则禁止posts.authors、users.role、users.id等敏感资源/字段以及batch_create动作。这套基于canAccess的细粒度权限与 docs/AuthRBAC.md 中描述的 RBAC 模式一脉相承是了解 react-admin v5 权限体系的最佳入门样例。国际化双语实时切换examples/simple/src/i18nProvider.tsx 使用 ra-i18n-polyglot 构造polyglotI18nProvider默认语言为en法语包通过动态import()懒加载fr语言包见 examples/simple/src/i18n/fr.ts并声明English/Français两种可选语言。配合 ra-language-english 与 ra-language-french 语言包应用界面可以随时切换中英文是验证翻译文案、表单标签国际化的现成环境。布局、菜单与快捷导航examples/simple/src/Layout.tsx 演示了自定义布局的标准做法自定义MyAppBar在AppBar中组合TitlePortal页面标题占位与InspectorButton主题检查器按钮自定义MyMenu通过Menu.ResourceItem声明四个资源菜单项并为其配置键盘快捷键——gpposts、gccomments、gttags、guusers即“先按 g 再按对应字母”即可快速跳转这是 react-admin 内置的菜单快捷键能力在布局之外挂载ReactQueryDevtools方便开发者实时观察查询缓存状态。列表页DataTable 与 InfiniteList 的双形态examples/simple/src/posts/PostList.tsx 是展示 react-admin 列表 API 的范本通过useMediaQuery按断点md区分桌面与移动端渲染桌面端用List 新一代DataTable移动端用InfiniteListSimpleListDataTable演示了DataTable.Col/DataTable.NumberCol的声明式列定义以及sortByOrder、disableSort、hiddenColumns隐藏average_note列、自定义field如DateField、BooleanField、ReferenceArrayField关联标签、ReferenceManyCount评论计数、expand展开面板、rowClick按记录动态跳转可评论进编辑页否则进详情页等高级能力过滤器数组postFilter包含SearchInputalwaysOn常驻搜索、带默认值的TextInput与快捷筛选QuickFilter自定义exporter使用jsonexport把backlinks展平后通过downloadCSV导出 CSV批量操作区组合了ResetViewsButton、BulkDeleteButton、BulkExportButton。资源的完整装配见 examples/simple/src/posts/index.tsx一个普通的对象导出list/create/edit/show组件、资源图标与recordRepresentation: title再在入口处展开传入Resource nameposts {...posts} /——这也是 react-admin 推荐的“每个资源一个目录”组织模式。用 Simple 示例复现与验证问题综合以上机制你可以把它当作一个本地实验台来用验证框架功能DataTable、InfiniteList、权限、多语言、自定义路由等都能直接操作体验验证源码改动得益于 Vite 的 packages 源码别名修改 packages/ra-core、packages/ra-ui-materialui 等核心包代码后保存页面即热更新模拟接口异常利用dataProvider.tsx中的故障注入 Proxy可随时制造 403 会话过期、400 字段错误等场景观察 react-admin 的错误提示与重定向行为服务端对接参考把fakeRestProvider替换为真实 REST/GraphQL 数据提供者可参考 packages/ra-data-json-server、packages/ra-data-simple-rest即可把示例迁移成真实后台管理界面。需要注意examples/simple定位为演示与测试应用其数据完全保存在内存与localStorage中刷新或登出后状态即重置生产部署请参考 docs/Deploy.md 与 docs/DataProviderWriting.md 构建正式的数据层。【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址: https://gitcode.com/gh_mirrors/re/react-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考