前端UI组件【免费下载链接】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点击查看免费下载create-react-admin是 react-admin 官方提供的脚手架 CLI用于基于 Vite 快速初始化一个全新的 react-admin 项目也是官方推荐的新项目创建方式。阅读本文后你将掌握create-react-admin的全部命令行参数--interactive、--data-provider、--auth-provider、--resource、--install的用法与适用场景并理解脚手架在仓库源码层面的实际执行流程——从参数解析、交互式步骤到模板合并与依赖安装从而能够用一条命令搭建出带数据源、认证与 CRUD 资源骨架的可运行应用。基本用法一分钟初始化一个 react-admin 应用create-react-admin是发布在 npm 上的 CLI 包仓库源码位于 packages/create-react-admin可以直接通过npx调用无需预先安装任何全局依赖npx create-react-adminlatest your-admin-name执行后该命令会在当前目录下创建一个名为your-admin-name的文件夹其中包含一个由 Vite 驱动的空 react-admin 应用并自动安装所有依赖。进入项目并启动开发服务器cd your-admin-name npm run dev启动后浏览器会自动打开 Vite 的本地开发地址默认http://localhost:5173/一个空的 react-admin 管理后台即可运行。生成的项目默认使用 TypeScript脚本命令定义在模板的 packages/create-react-admin/templates/common/package.json 中除了dev之外还包含buildvite build生产构建、servevite preview预览产物、type-checktsc --noEmit类型检查、lintESLint 自动修复和formatPrettier 格式化。使用其他包管理器调用npx并不是唯一入口官方同样支持npm、yarn和bun三种方式# Using npx npx create-react-adminlatest your-admin-name # Using npm npm create react-adminlatest your-admin-name # Using yarn yarn create react-admin your-admin-name # Using bun bun create react-adminlatest your-admin-name需要注意的是不同命令在传递额外参数时对--的要求不同# npx 不需要在参数前加 -- npx create-react-adminlatest your-admin-name --interactive # npm create 则必须在参数前加 -- npm create react-adminlatest your-admin-name -- --interactive从源码看CLI 通过meow库解析参数其--help别名-h、--interactive别名-i等定义位于 packages/create-react-admin/src/cli.tsx若执行时未提供应用名且未开启交互模式CLI 会直接打印Please provide a name for your admin application: create-react-admin name并以非零码退出cli.tsx。命令选项一览create-react-admin接受以下五个选项全部可选选项作用可选值--interactive开启 CLI 交互模式逐个询问配置布尔值--data-provider指定应用使用的 data providerfakerest、simple-rest、json-server、supabase、none--auth-provider指定应用使用的 auth providerlocal-auth-provider、none--resource为指定资源初始化基于 guessers 的 CRUD 页面可重复使用设为skip可跳过交互式资源步骤资源名或skip--install指定用于安装依赖的包管理器yarn、npm、bun、pnpm、skip选项的默认行为源码级解读当你不使用--interactive时各选项会按如下规则取默认值见 cli.tsx 的getDataProvider、getAuthProvider、getInstall、getResources函数data provider未指定时默认none即生成一个不带数据源的空应用由你自行配置 data provider。auth provider未指定时默认none不生成 authProvider但如果 data provider 选择的是supabase则强制为none并且当你显式传入--auth-provider时会打印警告Providing an auth-provider when using ra-supabase is not supported. It will be ignored.cli.tsx。installer未指定时会根据当前进程的npm_config_user_agent环境变量自动推断你正在使用的包管理器例如用yarn create调用则默认yarn推断逻辑在 getDefaultInstaller推断失败时回退为npm。resources未指定且非交互模式时默认[skip]即跳过资源初始化步骤生成空应用。此外源码中还定义了短名映射fakerest→ra-data-fakerest、json-server→ra-data-json-server、simple-rest→ra-data-simple-rest、supabase→ra-supabase以及local→local-auth-providercli.tsx因此这些短名与包名均可作为选项值使用。--interactive交互式向导模式create-react-admin是纯命令行交互应用基于 React 的终端渲染库 Ink 实现。使用--interactive选项后终端会依次向你询问四个问题选择 data provider选择 auth provider输入要添加的 resources 名称可连续输入多个直接回车表示结束选择用于安装依赖的 package manager。这些交互步骤在源码中对应 app.tsx 的状态机name→data-provider→auth-provider→resources→install→generate→run-install→finish。每一步由一个独立的 Step 组件负责渲染StepName.tsx输入项目名StepDataProvider.tsx通过方向键 回车选择一个 data provider选项带描述文本StepAuthProvider.tsx选择 auth providerStepResources.tsx反复输入资源名留空结束StepInstall.tsx选择依赖安装方式StepGenerate.tsx 与 StepRunInstall.tsx分别执行项目文件生成与依赖安装。交互模式下若前一步已通过命令行选项显式指定例如--data-provider fakerest状态机会自动跳过对应步骤见 app.tsx 的getNextStep。仓库docs/img目录下提供了交互过程的演示视频 create-react-admin.webm另有 create-react-admin.mp4 格式可直观了解整个向导流程。--data-provider选择数据源react-admin 通过 data provider 与后端 API 通信。create-react-admin目前内置五种 data provider 预设选项定义见 StepDataProvider.tsx值说明fakerest基于 FakeRest 的客户端内存 data provider使用一个 JSON 对象作为初始数据无需后端即可开发json-server基于 JSON Server API 的 data providersimple-rest面向简单 REST API 的 data provider对应仓库中的ra-data-simple-rest包supabase面向 Supabase 的 data provider选择后会自动跳过 auth-provider 与 resources 步骤none默认不生成数据源由你自行配置 data provider通过命令行直接指定npx create-react-adminlatest your-admin-name --data-provider json-server从实现上看选择不同 data provider 会直接影响生成的项目文件generateProject会将templates/下对应模板目录的内容拷贝进新项目例如ra-data-json-server模板会生成 packages/create-react-admin/templates/ra-data-json-server/src/dataProvider.tsra-data-fakerest模板会生成src/data.json与 packages/create-react-admin/templates/ra-data-fakerest/src/dataProvider.ts详见 generateProject.ts。值得一提的细节是交互模式下选择fakerest且未指定任何资源时脚手架会自动为你预设posts与comments两个资源并附带一份可运行的应用测试选择ra-data-fakerest后若同时指定了其他资源则会自动为每个资源在src/data.json中生成一个空数组app.tsx 与 generateProject.ts。--auth-provider选择认证方案create-react-admin目前支持两种 auth provider 预设值说明local-auth-provider硬编码用户名/密码的本地认证方案none默认不生成 authProvider应用无认证逻辑指定方式npx create-react-adminlatest your-admin-name --auth-provider local-auth-provider选择local-auth-provider后脚手架会从 packages/create-react-admin/templates/local-auth-provider 模板生成src/authProvider.ts与src/users.json。生成的 authProvider.ts 实现了 react-admin 标准的AuthProvider接口login在硬编码的用户表中校验用户名与密码、成功后把用户信息剔除密码字段写入localStoragelogout清除缓存checkAuth依据localStorage判断登录态另有checkError、getPermissions、getIdentity的实现。源码注释明确提示该 provider仅供测试使用切勿用于生产环境authProvider.ts。--resource初始化带 CRUD 页面的资源create-react-admin默认生成的是空应用。如果需要一开始就为若干资源生成列表、编辑、详情页面可以使用--resource选项可重复使用npx create-react-adminlatest your-admin-name --resource posts --resource comments生成的每个资源页面都基于 react-admin 的 Guesser 组件ListGuesser、EditGuesser、ShowGuesser它们会从 API 响应中自动推断字段结构无需手写任何字段声明。生成的src/App.tsx内容与 generateAppFile.ts 中生成逻辑一致import { Admin, Resource, ListGuesser, EditGuesser, ShowGuesser } from react-admin; import { Layout } from ./Layout; export const App () ( Admin layout{Layout} dataProvider{dataProvider} Resource nameposts list{ListGuesser} edit{EditGuesser} show{ShowGuesser} / Resource namecomments list{ListGuesser} edit{EditGuesser} show{ShowGuesser} / /Admin );警告--resource与--data-provider supabase不兼容。由于ra-supabase提供了专门的AdminGuesser组件在 Supabase 场景下需要用它来推断资源结构在 Supabase 应用中无法使用--resource生成的标准 guesser 页面。另外CLI 也支持将--resource显式设为skip来跳过交互式资源步骤npx create-react-adminlatest your-admin-name --resource skip--install选择依赖安装器脚手架在生成项目文件后会自动安装依赖支持以下包管理器值说明npm默认使用 npm 安装yarn使用 yarn 安装bun使用 bun 安装pnpm使用 pnpm 安装skip跳过安装由你自行安装指定方式npx create-react-adminlatest your-admin-name --install bun源码对安装器的处理有几个细节见 generateProject.ts若选择yarn生成器会执行yarn --version探测本机 yarn 版本并在package.json中写入packageManager: yarnversion字段若检测到 Yarn 1.x还会额外合并一份resolutions配置以规避依赖解析问题而 Yarn 2Berry则拷贝 templates/yarn 目录中的专属配置文件。生成项目时若--install skipCLI 在收尾阶段不会执行安装而是提示你稍后用喜欢的包管理器自行安装app.tsx。交互模式下选择 Dont install dependencies, Ill do it myself. 即对应skip见 StepInstall.tsx。幕后机制模板合并与文件生成流程create-react-admin的核心逻辑集中在 packages/create-react-admin/src/generateProject.ts其生成流程可以概括为五个阶段初始化目录在当前工作目录下创建以应用名命名的文件夹若同名目录已存在会直接抛错终止generateProject.ts。拷贝公共模板将 templates/common 下的全部文件index.html、vite.config.ts、tsconfig系列、ESLint/Prettier 配置、src/Layout.tsx、src/index.tsx等拷贝进项目并做 token 替换把{{name}}、{{installCommand}}、{{devCommand}}、{{buildCommand}}替换为实际值见 generateProject.ts。合并所选模板按 data provider、auth provider 的选择分别从templates/data-provider、templates/auth-provider目录拷贝额外文件如dataProvider.ts、authProvider.ts、.env等。.env由各模板的环境变量片段拼接生成generateProject.ts。生成应用入口若所选 data provider 模板不自带src/App.tsx则由 generateAppFile.ts 动态生成没有资源时只渲染Admin layout{Layout}有资源时渲染带ListGuesser/EditGuesser/ShowGuesser的Resource列表data provider 与 auth provider 分别为none时对应的 prop 不会被渲染。生成辅助文件合并各模板的package.json生成最终依赖清单、生成.gitignore、README并汇总各模板help.txt中的提示信息在收尾阶段展示generateProject.ts。最终生成的package.json由公共模板的依赖与所选模板的依赖深度合并而来。以 templates/common/package.json 为例基础依赖包括react、react-dom、react-admin、react-router/react-router-dom、MUI 系列mui/material、mui/icons-material、emotion/react等开发依赖包括vite、typescript、vitejs/plugin-react、ESLint 与 Prettier 相关插件所选 data provider / auth provider 模板会在此基础上追加对应包。下一步从脚手架到真实应用生成的项目是一个完整的 Vite TypeScript 工程接下来可以从这几个方向继续理解生成的目录结构核心入口是src/index.tsx与src/App.tsx布局组件位于src/Layout.tsx这是你定制侧边栏、顶部栏的起点。了解 data provider 的工作方式阅读 DataFetchingGuide.md 中的 data provider 章节掌握如何自定义数据源或将none场景替换为真实后端仓库 packages/ra-data-simple-rest 等目录提供了各预设 data provider 的参考实现。理解资源与 CRUD 概念--resource生成的 guesser 页面会随 API 响应自动推断字段进阶可参考 Resource.md 了解资源定义与自定义页面参考 EditGuesser.md、ListGuesser.md、ShowGuesser.md 了解 guesser 的局限guesser 只用于快速原型正式项目建议替换为显式声明的组件。补充认证逻辑将local-auth-provider替换为真实的后端认证方案可参考 Authentication.md 与 AuthProviderWriting.md。工程化配置Vite 相关配置与优化建议包括生产环境 sourcemap、单元测试接入等见 Vite.md。总而言之create-react-admin把「搭建工程、选择数据源、接入认证、生成 CRUD 骨架、安装依赖」这一整套项目初始化工作收敛为一条命令是启动 react-admin 新项目的最快路径。开发者可以通过交互式向导获得全程引导也可以通过命令行参数实现完全非交互的自动化初始化便于集成到团队脚手架或 CI 流程中。赞分享前端UI组件【免费下载链接】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点击查看免费下载相关推荐create-email 使用指南用一条命令搭建 React Email 邮件项目create email 使用指南用一条命令搭建 React Email 邮件项目 create email 是 React Email 官方提供的项目脚手架前端UI组件create-mastra 快速上手指南一行命令搭建 Mastra AI 应用项目create mastra 快速上手指南一行命令搭建 Mastra AI 应用项目 create mastra 是 Mastra 官方推荐的项目初始化工具用人工智能Agent 框架AI AgentRAG后端Jest 快速初始化指南使用 create-jest 一条命令搭建测试工程Jest 快速初始化指南使用 create jest 一条命令搭建测试工程 本文围绕 Jest 官方脚手架工具 create jest 展开介绍如何通过 n测试质量保障代码覆盖率开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考