"Фронтенд-фреймворк для создания приложений администрирования, работающих в браузере, поверх 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-servernpm 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.
Надеюсь, это было полезно!