React初学者的管理文档

React admin是一个框架 前端开发 数据驱动的应用程序。这是通过React，ES6和Material UI在REST或GraphQL API之上的浏览器中进行的。 React admin用于创建业务管理面板，它也是一个开源项目，由一家名为 Marmelab。较早的名字是休息管理员。

React-admin功能

• 可在任何后端平台（如REST，GraphQL，SOAP等）上运行。
• 由于乐观渲染，UI极快，渲染在服务器返回之前完成。
• 它与redux，react-final-form，material-UI，react-router，reselect等平台合作。
• 具有从更新中移回并删除它们片刻的功能。
• 完成了react admin文档
• 具有多对一，一对多的关系。
• 启用数据验证。
• 国际化（i18n）
• 支持条件格式。
• 与任何身份验证提供程序，REST API，OAuth，基本身份验证等兼容。
• 主题化的。
• 具有完整的DataGrid，包括排序，分页和过滤器。
• 支持任何布局，例如简单，选项卡式等。
• 根据您的输入进行过滤。
• 大量的组件库可提供几种数据类型（布尔，数字，富文本等）。
• 自定义动作。
• 可自定义的菜单，布局，仪表板。
• 提供一个所见即所得的编辑器。
• 与React组件一样，它可以轻松扩展和覆盖。
• 完全可定制的界面。
• 与多个后端连接。
• 可以与其他React应用程序集成。
• 受流行的ng-admin和marmelab库影响。

此档案中的版本

• Master –有义务将其包含在即将发布的修补程序版本中。 
• 下一步–必须将其安装在即将发布的主要或次要版本中。

应该针对不会破坏BC的Bugfix PR制作Master。其他公关，如带有BC中断的Bugfix和新功能，应与下一个抵制。

React-admin安装

可以使用以下命令从npm下载React-admin及其依赖项：

npm install react-admin 

（要么）

yarn add react-admin

React管理员文档

对于30分钟的介绍，您可以阅读该教程。之后，请阅读react admin文档或该示例的源代码作为示例。

乍看上去

// in app.js
import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

render(

   ,
   document.getElementById('root')
);

是一个配置组件，它允许您为每个管理视图定义子组件：列出，编辑和创建。自定义组件和材料UI由react-admin使用

// inside the posts.js.

import * as React from "react";
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin';
import BookIcon from '@material-ui/core/svg-icons/action/book';
export const PostIcon = BookIcon;

export const PostList = (props) => (

   );

const PostTitle = ({ record }) => {
   return Post {record ? `"${record.title}"` : ''};
};

export const PostEdit = (props) => (
   } {...props}>

);

export const PostCreate = (props) => (

);

可以在我的API上运行吗？

React-admin遵循适配器方法以及数据提供程序。您可以将现有的数据提供程序用作设计API的草稿。相反，您可以创建自定义数据提供程序来代替使用现有数据提供程序。然后将其连接到现有的API。但是开发自定义数据提供程序是一项需要花费数小时才能完成的任务。您可以查看数据提供者的react admin文档以获取更多详细信息。

组件包括但可以删除

除了在Redux方法中执行的控制器功能外，React-admin还基于物料UI构建。它是由大量大致连接的React组件组成的，无需费心即可自行更改其中的一部分。例如，您可以使用自行设计的DataGrid而不是REST或引导程序来代替Material UI。

例子：

可以在examples文件夹中找到大量的react-admin示例：

1. 简单（CodeSandbox）：这是一个简单的应用程序，具有帖子，评论和用户，用于我们的e2e测试。  

2. 教程（来自CodeSandbox）：此示例应用是根据教程中显示的方法设计的

3. demo（Live）：这是虚构的海报商店管理员的官方react-admin演示。该示例可以称为完整的react-admin应用程序。  

您可以从以下命令执行这些示例，然后转到控制台中显示的URL。

＃在react-admin项目的开头写入。

make install

＃ 要么。

yarn install

＃启动简单的应用程序。

make run-simple

＃启动教程应用程序。

make build

make run-tutorial

＃启动演示应用程序。

make build
make run-demo

贡献给React Admin

如果您希望帮助改善react-admin，我们将永远欢迎您！那里’您可以提供大量服务的清单。  

错误分类：

这是一项简单的任务。您要做的就是检查GitHub上的新问题，并按照发布的模板查看它们是否可复制。如果没有可用的模板，则可以对提供模板的主题进行评论。如果您按照说明成功重现了该问题，请对此进行评论。如果不是，则告诉您缺少某些内容。

回答支持问题：

这是通过回答有关StackOverflow的问题做出贡献的另一种方法。你不’为此，需要在react-admin方面具有丰富的经验。初学者也有几个简单的问题。

错误修复:

错误修复请求请求总是很有帮助的。您可以解决许多问题。这是为我们的代码做出贡献的最出色的方法。有标记为“Good First Issue”首先是完美的错误跟踪器。

添加您的功能:

您可以打开下一个分支的拉取请求以添加功能。但是为了保持react-admin代码小而方便，我们不接受每个功能请求。但是您可以尝试将功能作为附加的npm软件包使用。如果您有疑问，可以发出“feature request”在开发功能之前，先查看核心团队是否接受它。

对于每个拉取请求，您都应该遵循现有文件的编码模式（基于漂亮的文件），并结合单元测试和适当的react admin文档。在此过程中，您应该做好接受代码之前进行彻底检查的准备。另外，请耐心等待，因为这是一个开源项目，因此审核可能需要一些时间才能获得批准。

提示：可以使用make命令查看可用命令的列表。开发人员的大多数react-admin代码都是在makefile中自动完成的。

设定：

您可以复制整个档案，然后执行命令make install获取所需的依赖关系。然后从命令make build将Typescript的资源编译为Javascript。

测试您在示例应用中所做的更改

大多数情况下，都会使用一个简单的示例来检查应用程序。要在端口8080上启动示例，请执行命令运行（http：// localhost：8080）。

监视命令包含在命令中。这显示了您在浏览器上的简单示例中所做的实时更改。

该示例与CodeSandbox用于重现其源代码位于示例/简单示例中的错误的应用相同

(See: //codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

有时，简单的例子非常有限。在这种情况下，您可以使用更完整的演示示例。

make run-demo用于初始化演示示例，其中已包含REST数据提供程序。

您可以使用此命令通过GraphQL dataProvider启动它，以运行run-graphql-demo。

要查看软件包中所做的更改，您将需要使用以下命令来重建react-admin软件包：

make build

或更专注

make build-ra-core
make build-ra-ui-materialui

因为我们使用 创建React应用，我们看不到演示应用程序中所做的更改，为了弥补这一点，我们安装了管理软件包。

优点是，API是在客户端而不是服务器上模仿的。因此，这些示例不需要服务器即可执行。

测试您的应用程序中所做的更改

您可以使用yarn代替npm为您的应用程序提供对react-admin软件包的本地检查。以下命令可以检查您在react-admin软件包中所做的更改：

# list your local react-admin as a linkable package.
$ cd /code/path/to/react-admin/packages/react-admin && yarn link

# Replace the npm-installed version with a symlink to your local version.
$ cd /code/path/to/myapp/ && yarn link react-admin

#You will need to register the version of your app as a linkable package if you get stuck in trouble with React red-screen.
$ cd /code/path/to/myapp/node_modules/react && yarn link

# After that you can interchange the npm-installed version of React with a symlink to your app’s node_modules version
$ cd /code/path/to/react-admin/ && yarn link react

# Rebuild the packages with the same version of React
$ cd /code/path/to/react-admin/ && make build

# Return to your app and ensure all dependencies have resolved
$ cd /code/path/to/myapp/ && yarn install

# Start your app
$ yarn start

自动化测试

自动化茶在开发过程中至关重要。要执行测试，您可以编写以下命令：

make test

该命令将执行所有测试，如棉绒，单元测试和功能测试。

为了测试特定部件，例如单元，组件等，您需要运行jest。 Jest运行一组测试中的特定测试子集。当在程序代码中进行更改时，它可以自动运行测试，并绕过命令的选项

yarn jest

同样，在进行更改时，对修改的组件的测试也可以自动执行。为此，您将必须使用git pre-commit钩子。这意味着如果测试文件破坏了测试，您将无法执行更改。

如果要执行端到端测试，则可以启动赛普拉斯以简化工作。它将自动处理端到端文件的测试。在简单的示例应用程序（）上执行测试，然后在其他节点上启动cypress时，您可以自己体验演示。要打开简单的示例，请使用以下命令：

make run-simple 

（要么）

yarn run-simple

使用命令：

make test-e2e-local 

（要么）

yarn test-e2e-loca

您可以启动柏树。

编码标准

在React-admin中，您将严格遵循编码标准。如果您遇到此问题，可以使用以下命令更漂亮地解决它们：

make prettier

这些命令在每次更改或提交时都执行，因此您不必’无需担心编码标准。

React管理员文档

如果您希望为改进React Admin文档做出贡献或添加新内容，可以安装Jekyll，然后调用以下命令

make doc

之后，转到http：// localhost：4000 /，以react admin文档部分开始。

执照

React-admin具有MIT许可证，并由Marmelab赞助和支持。

捐

React-admin是一个开源库，这意味着它对所有人都是免费的，甚至出于商业目的。但是，如果您想帮助我们，我们可以讨论一下，帮助初学者解决他们的问题或为我们的代码做出贡献。除此之外，最出色的是向慈善机构捐款，而不是帮助我们的网站。