1. 简介
react-admin 是一个基于 React 和 Redux 构建的通用管理面板。它可以轻松创建可定制的管理界面，用于处理任意数量的数据。react-admin 是一个强大的前端工具，可以帮助你快速创建高质量的管理面板，无需花费大量时间和精力。
2. 安装和配置
安装方式：通过 npm 安装 react-admin：
npm install react-admin
使用 react-admin，需要在应用程序的根组件中引入它，并通过一个包含 dataProvider 的自定义 App 组件来配置 react-admin：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------ -------- - ---- --------------
------ ------------------ ---- ----------------------
------ - --------- ----------- -------- - ---- ----------
----- ------------ - --------------------------------------------
----- --- - -- -- -
------ ----------------------------
--------- ------------ --------------- ------------------- --------------- --
--------
--
------ ------- ----这段代码中，dataProvider 对象被传递给 Admin 组件，以便整个应用程序都可以使用数据提供程序。Resource 组件则用于将数据提供程序的资源转换为 React 组件。
3. 实现详解
react-admin 的主要思想是将组件分为两类: 界面组件和逻辑组件。
- 界面组件：主要处理用户界面部分的代码，比如增加、删除、编辑等功能。这类组件主要使用 React 的
props属性进行配置，以获取要显示的数据并显示所需的图形界面元素。 - 逻辑组件：主要处理数据存储、API 请求和其他不直接与 UI 相关的功能。这些组件通常被称为数据提供者。
react-admin 使用了同一的翻译层来管理应用程序的本地化。因此，无论何时用户与应用程序交互，应用程序都能够适当地使用本地化语言。
4. 实例代码
这里提供几个简单的实例代码来演示 react-admin 的主要组件、props 和数据源。这些示例代码可以帮助你更好地理解 react-admin 的使用方法：
-- -------------------- ---- -------
-- ---- ---------
------ - -- ----- ---- --------
------ - ----- --------- ---------- ---------- - ---- --------------
------ ----- -------- - ------- -- -
----- -----------
--------- ----------------
---------- ----------- --
---------- ------------- --
----------- -------------- --
-----------
-------
--
-- ---- ---------
------ - -- ----- ---- --------
------ - ----- ----------- ---------- ----------- - ---- --------------
------ ----- -------- - ------- -- -
----- -----------
------------
---------- -------- ----------- --
---------- ------------- --
------------ ------------ --
-------------
-------
--
-- ------ ---------
------ - -- ----- ---- --------
------ - ------- ----------- ---------- ----------- - ---- --------------
------ ----- ---------- - ------- -- -
------- -----------
------------
---------- ------------- --
------------ ------------ --
-------------
---------
--
-- ---- --------
------ ----- ---- --------
----- ------------ - -
-------- ----- ---------- ------- -- -
----- - ---- - - ----- -------------------------------------------
------ -
----- -----
------ ------------
--
--
------- ----- ---------- ------- -- -
----- - ---- - - ----- --------------------------------------------------------
------ -
----- -----
--
--
------- ----- ---------- ------- -- -
----- - ---- - - ----- ------------------------------------------- -------------
------ -
----- - --------------- --- ------- --
--
--
------- ----- ---------- ------- -- -
----- - ---- - - ----- ------------------------------------------------------- -------------
------ -
----- -----
--
--
------- ----- ---------- ------- -- -
----- - ---- - - ----- -----------------------------------------------------------
------ -
----- -----
--
--
--
------ - ------------ --在这些示例代码中，我们定义了一个 UserList、UserEdit 和 UserCreate 组件，这些组件对应于数据源中存储的用户资源。通过组合 List、Edit 和 Create 组件和一些其他无状态和状态组件，我们可以提供一个完整的用户管理工具。
通过 dataProvider 对象，我们定义了所需的 CRUD API，以便 react-admin 使用。该组件使用 axios 库来实现数据资源的 HTTP 交互。
5. 总结
react-admin 是一个经过充分考虑并且易于使用的 React 应用程序框架。它将 React 和 Redux 的强大功能组合在一起，使你可以轻松地构建管理面板。在我的实践中，react-admin 已经证明了它的可靠性和强大性，我非常建议你探索一下这个框架，看看它是否适合你的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-admin