"Фронтенд-фреймворк для создания приложений администрирования, работающих в браузере, поверх REST/GraphQL API, с использованием ES6, React и Material Design.»

По сути, это упрощает создание приложения React, сокращая усилия по созданию сложных веб-компонентов. Это позволяет вам взаимодействовать с вашим бэкэндом стандартным способом через пользовательских поставщиков данных.

Почему React Admin?

Если нам нужно создать внутреннее административное приложение, которое требует меньше времени на разработку и обеспечивает широкие возможности настройки, React-admin — отличная основа для этого. Он предоставляет настраиваемые компоненты для выполнения операций CRUD, а также темы, перевод, кэширование, аутентификацию openId и многое другое.

Установка

React-admin доступен из npm. Создайте приложение для реагирования и установите следующие зависимости (react-admin, ra-data-json-server):

npx create-react-app ra-demo 
cd ra-demo
npm install ra-data-json-server
npm install react-admin

Настройка

Теперь давайте настроим наш файл App.js. Здесь мы будем использовать поддельный REST API в нашем поставщике данных, хотя вы можете полностью создать свой собственный поставщик данных с нуля и определить его поведение.

Примечание. Этот API доступен только для чтения, поэтому его создание и обновление невозможны.

import React from 'react'
import {Admin, Resource} from 'react-admin'
import jsonServerProvider from 'ra-data-json-server'
import { PostList, PostCreate, PostEdit } from './posts'
const App = () => (
  <Admin
   dataProvider={jsonServerProvider(
     'http://jsonplaceholder.typicode.com'
   )}
  >
    <Resource
      name='posts'
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
    />
  </Admin>
)
export default App

Компонент ‹Admin› принимает реквизит dataProvider, который вызывается всякий раз, когда реагирующему администратору необходимо связаться с API. Поставщик данных преобразует команды REST в HTTP-запросы.

Компоненты <Resource> являются фундаментальными строительными блоками, поскольку они формируют каркас приложения и его внутреннего хранилища данных. Например, <Resource name = 'posts' /> отправит запрос GET к http://jsonplaceholder.typicode.com/posts, чтобы получить список сообщений. Точно так же он сделает запрос POST к http://jsonplaceholder.typicode.com/posts для создания нового сообщения. Свойство list принимает компонент, который будет отображать список данных. Точно так же create и editprop принимает компонент, который будет отображать представление создания и редактирования соответственно.

Теперь мы создадим файл post.js и снабдим его кодом для разных представлений.

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  EditButton,
  SimpleForm,
  TextInput,
  Edit,
  Create,
  DeleteButton
} from 'react-admin'
const PostCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
    <TextInput source='title' label='Title' />
    <TextInput source='body' label='Body' multiline />
    </SimpleForm>
  </Create>
)
const PostEdit = (props) => (
  <Edit title='Post Edit' {...props}>
    <SimpleForm>
      <TextInput label='id' source='id' disabled />
      <TextInput source='title' label='Title' />
      <TextInput source='body' label='Body' multiline />
    </SimpleForm>
  </Edit>
)
const PostList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source='id' />
      <TextField source='title' label='Title' />
      <EditButton />
      <DeleteButton />
    </Datagrid>
  </List>
)
export { PostCreate, PostEdit, PostList}

В post.js мы создали 3 компонента: PostList, PostEdit и PostCreate.

  • В компоненте PostList мы определим, как будет выглядеть список. Компонент «Список» извлекает список записей из поставщика данных и отображает макет списка по умолчанию (заголовок, кнопки, фильтры, нумерацию страниц). «Сетка данных» непосредственно отвечает за отображение списка данных. Наконец, мы определяем, какие поля должны отображаться.
  • Компоненты PostCreate и PostEdit добавляют функции создания и редактирования соответственно. Здесь мы используем SimpleForm, который отвечает за отрисовку фактической формы.

Результат

Базовая реактивная панель администратора с возможностями CRUD.

Заключение

В этой статье я продемонстрировал, как начать работу с React Admin, и создал простую панель с возможностями CRUD.

Надеюсь, это было полезно!