Administrator React: Wprowadzenie

„ Framework frontendowy do tworzenia aplikacji administracyjnych działających w przeglądarce na bazie interfejsów API REST/GraphQL przy użyciu ES6, React i Material Design . ”

Zasadniczo ułatwia budowanie aplikacji React, zmniejszając wysiłek związany z tworzeniem złożonych komponentów internetowych. Pozwala na interakcję z backendem w standardowy sposób za pośrednictwem niestandardowych dostawców danych.

Dlaczego React Admin?

Jeśli musimy stworzyć wewnętrzną aplikację administracyjną, która skróci czas rozwoju i zapewni wysoką konfigurowalność, React-admin jest do tego doskonałym frameworkiem. Zapewnia niestandardowe komponenty do wykonywania operacji CRUD, wraz z tworzeniem motywów, tłumaczeniem, buforowaniem, uwierzytelnianiem openId i wieloma innymi.

Instalacja

React-admin jest dostępny z npm. Utwórz aplikację React i zainstaluj następujące zależności (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

Teraz skonfigurujmy nasz plik App.js. Tutaj będziemy używać fałszywego REST API w naszym dostawcy danych, chociaż możesz w pełni stworzyć własnego dostawcę danych od podstaw i zdefiniować jego zachowanie.

Uwaga: to interfejs API jest tylko do odczytu, więc tworzenie i aktualizowanie nie nastąpi.

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

<Resource>komponenty są podstawowymi elementami budulcowymi, ponieważ tworzą szkielet aplikacji i jej wewnętrznego magazynu danych. Na przykład, <Resource name = 'posts' />złoży żądanie GET, http://jsonplaceholder.typicode.com/postsaby uzyskać listę postów. Podobnie, wyśle ​​​​żądanie POST do http://jsonplaceholder.typicode.com/postsutworzenia nowego posta. Właściwość list pobiera komponent, który wyrenderuje listę danych. Podobnie tworzenie i edycja właściwości pobiera komponent, który renderuje odpowiednio widok tworzenia i edycji.

Teraz utworzymy plik post.js i dostarczymy mu kod dla różnych widoków.

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}

• W komponencie PostList zdefiniujemy, jak będzie wyglądać lista. Komponent <List> pobiera listę rekordów od dostawcy danych i renderuje domyślny układ listy (tytuł, przyciski, filtry, paginacja).<Datagrid> jest bezpośrednio odpowiedzialny za renderowanie listy danych. Na koniec określamy, które pola powinny być wyświetlane.
• Komponenty PostCreate i PostEdit dodają funkcje odpowiednio do tworzenia i edycji. Tutaj używamy SimpleForm , który odpowiada za renderowanie rzeczywistego formularza.

Podstawowy panel administracyjny React-Administrator z umiejętnościami CRUD.

Wniosek

W tym artykule pokazałem, jak rozpocząć pracę z React Admin i zbudowałem prosty panel z funkcjami CRUD.

Mam nadzieję, że to było pomocne!