React Admin: Perkenalan

“ Kerangka kerja frontend untuk membangun aplikasi admin yang berjalan di browser di atas REST/GraphQL API, menggunakan ES6, React dan Material Design . ”

Pada dasarnya, membuat aplikasi React menjadi mudah dengan mengurangi upaya untuk membuat komponen web yang kompleks. Ini memungkinkan Anda untuk berinteraksi dengan backend Anda dengan cara standar melalui penyedia data khusus.

Mengapa Bereaksi Admin?

Jika kita harus membuat aplikasi administratif internal yang mempertahankan waktu pengembangan yang lebih sedikit dan memberikan kemampuan penyesuaian yang tinggi, React-admin adalah kerangka kerja yang sangat baik untuk itu. Ini menyediakan komponen yang disesuaikan untuk melakukan operasi CRUD, bersama dengan tema, terjemahan, caching, otentikasi openId dan banyak lagi.

Instalasi

React-admin tersedia dari npm. Buat aplikasi reaksi, dan instal dependensi berikut (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

Sekarang mari kita konfigurasikan file App.js kita. Di sini kami akan menggunakan REST API palsu di penyedia data kami, meskipun Anda dapat sepenuhnya membuat penyedia data Anda sendiri dari awal dan menentukan perilakunya.

Catatan: Api ini hanya bisa dibaca, jadi pembuatan dan pembaruan tidak akan terjadi.

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>komponen adalah blok bangunan fundamental, karena mereka membentuk kerangka aplikasi, dan penyimpanan data internalnya. Misalnya, <Resource name = 'posts' />akan membuat permintaan GET http://jsonplaceholder.typicode.com/postsuntuk mendapatkan daftar posting. Demikian pula, itu akan membuat permintaan POST http://jsonplaceholder.typicode.com/postsuntuk membuat posting baru. Daftar prop mengambil komponen yang akan membuat daftar data . Demikian pula, buat dan edit prop mengambil komponen yang akan membuat tampilan buat dan edit masing-masing.

Sekarang kita akan membuat file post.js dan menyediakannya dengan kode untuk tampilan yang berbeda.

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}

• Di komponen PostList , kita akan menentukan tampilan daftarnya. Komponen <List> mengambil daftar record dari penyedia data, dan merender tata letak daftar default (judul, tombol, filter, pagination).<Datagrid> bertanggung jawab langsung untuk merender daftar data. Akhirnya, kami menentukan bidang mana yang harus ditampilkan.
• Komponen PostCreate dan PostEdit masing-masing menambahkan fungsionalitas untuk Buat dan Edit. Di sini kita menggunakan SimpleForm yang bertanggung jawab untuk merender formulir yang sebenarnya.

Panel reaksi-admin dasar dengan kemampuan CRUD.

Kesimpulan

Dalam artikel ini, saya telah mendemonstrasikan bagaimana memulai dengan React Admin dan membuat panel sederhana dengan kemampuan CRUD.

Semoga bermanfaat!