React-Admin 是一个基于 React 和 Material Design 的开源框架，可以帮助我们快速构建漂亮且易于使用的管理界面。在本篇文章中，我们将介绍如何使用 React-Admin 构建中后台应用，并提供一些示例代码和指导意义。
安装和配置
首先，我们需要使用 npm 或 yarn 安装 react-admin：
npm install react-admin # 或者 yarn add react-admin
接下来，在我们的入口文件中引入所需的依赖项和配置：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ -------- - ---- --------------
------ ------------------ ---- ----------------------
----- ------------ - ----------------------------------------------------------
----- --- - -- -- -
------ ----------------------------
--- ------ ---
--------
--
------ ------- ----其中，jsonServerProvider 是一个可以使用 JSON 数据创建 REST API 的实用库。此处示例使用了 JSONPlaceholder 提供的免费数据。
创建资源
在 Admin 组件中，我们需要添加一个或多个 Resource 组件，以将数据模型转换为可编辑的界面。例如，我们可以使用以下代码为博客文章创建资源：
-- -------------------- ---- -------
------ - ----- --------- ---------- ----------- ------------- ------- ----------- ---------- --------- - ---- --------------
------ ----- -------- - ------- -- -
----- -----------
----------
---------- ----------- --
---------- -------------- --
---------- ------------- --
----------- ----------------- --
------------- ----------------- --
-----------
-------
--
------ ----- ---------- - ------- -- -
------- -----------
------------
---------- -------------- --
---------- --------- ------------- --
---------- ----------------- -------------------- --
-------------
---------
--
------ ----- -------- - ------- -- -
----- -----------
------------
---------- -------- ----------- --
---------- -------------- --
---------- --------- ------------- --
---------- ----------------- -------------------- --
-------------
-------
--
------ ----- ---------- - ------- -- -
------- ---------- --
--
------ ----- ------------ - -
----- ---------
------- -----------
----- ---------
------- -----------
--在上面的代码中，我们定义了用于展示和编辑博客文章的四个组件：PostList、PostCreate、PostEdit 和 PostDelete。然后，我们将这些组件包装成一个资源对象 PostResource，并将其添加到 Admin 组件中：
import { PostResource } from './resources';
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="posts" {...PostResource} />
</Admin>
);现在，我们已经成功创建了一个可供编辑的博客文章管理界面。
进一步学习
本文仅介绍了 React-Admin 的基础使用方法。如果您想深入了解该库的更多功能和用法，请查看 官方文档，或者查看 GitHub 仓库 获取源代码和示例。
希望这篇文章能够对你在实战中使用 React-Admin 构建中后台应用有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39349