Описание тега react-admin

Ссылки

• Домашняя страница
• Документация
• Репозиторий GitHub
• Блог

Функции

• Backend Agnostic: подключается к любому API (REST или GraphQL, см. список более 45 адаптеров )

• Все строительные блоки, которые вам нужны: предоставляет крючки и компоненты для аутентификации, маршрутизации, форм и проверки, сетки данных, поиска и фильтрации, отношений, проверки, ролей и разрешений, текстового редактора, i18n, уведомлений, меню, тем, кэширования и т. д.

• Высокое качество: доступность, отзывчивость, безопасность, быстрота, возможность тестирования

• Отличный опыт разработчика: полная документация, автозаполнение IDE, безопасность типов, сборник рассказов, демонстрационные приложения с исходным кодом, модульная архитектура, декларативный API.

• Отличный пользовательский интерфейс: оптимистичный рендеринг, фильтрация по мере ввода, отмена, настройки, сохраненные запросы.

• Полная настройка: замените любой компонент своим

• ☂️ Типы подписки: разработка на TypeScript или JavaScript.

• ‍‍‍ Работает на MUI, react-hook-form, react-router, react-query, TypeScript и некоторых других.

С одного взгляда

      // 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(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>,
    document.getElementById('root')
);

The <Resource>component — это компонент конфигурации, который позволяет определять подкомпоненты для каждого из представлений администратора:list,edit, иcreate. Эти компоненты используют MUI и пользовательские компоненты от react-admin:

      // in posts.js
import * as React from "react";
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
export const PostIcon = BookIcon;

export const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <TextField source="average_note" />
            <TextField source="views" />
            <EditButton />
        </Datagrid>
    </List>
);

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

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);