Quản trị viên React: Giới thiệu

“ Khung giao diện người dùng để xây dựng các ứng dụng quản trị chạy trong trình duyệt trên các API REST / GraphQL, sử dụng ES6, React và Material Design . ”

Về cơ bản, nó giúp dễ dàng xây dựng ứng dụng React bằng cách giảm nỗ lực tạo các thành phần web phức tạp. Nó cho phép bạn tương tác với chương trình phụ trợ của mình theo cách tiêu chuẩn thông qua các nhà cung cấp dữ liệu tùy chỉnh.

Tại sao React Admin?

Nếu chúng ta phải tạo một ứng dụng quản trị nội bộ duy trì ít thời gian phát triển hơn và cung cấp khả năng tùy biến cao, thì React-admin là một khuôn khổ tuyệt vời cho nó. Nó cung cấp các thành phần tùy chỉnh để thực hiện các hoạt động CRUD, cùng với chủ đề, bản dịch, bộ nhớ đệm, xác thực openId và hơn thế nữa.

Cài đặt

React-admin có sẵn từ npm. Tạo một ứng dụng phản ứng và cài đặt các phần phụ thuộc sau (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

Bây giờ, hãy cấu hình tệp App.js của chúng ta. Ở đây, chúng tôi sẽ sử dụng API REST giả trong nhà cung cấp dữ liệu của mình, mặc dù bạn hoàn toàn có thể tạo nhà cung cấp dữ liệu của riêng mình từ đầu và xác định hành vi của nó.

Lưu ý: Api này chỉ được đọc, vì vậy việc tạo và cập nhật sẽ không diễn ra.

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>các thành phần là các khối xây dựng cơ bản, vì chúng tạo thành khung của ứng dụng và kho dữ liệu nội bộ của ứng dụng. Ví dụ, <Resource name = 'posts' />sẽ thực hiện một yêu cầu GET http://jsonplaceholder.typicode.com/postsđể nhận danh sách các bài đăng. Tương tự, nó sẽ thực hiện một yêu cầu ĐĂNG để http://jsonplaceholder.typicode.com/poststạo một bài đăng mới. Hỗ trợ danh sách nhận một thành phần sẽ hiển thị danh sách dữ liệu. Tương tự, hỗ trợ tạo và chỉnh sửa lấy một thành phần sẽ hiển thị chế độ xem tạo và chỉnh sửa tương ứng.

Bây giờ chúng ta sẽ tạo tệp post.js và cung cấp mã cho các chế độ xem khác nhau.

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}

• Trong c omponent PostList, chúng ta sẽ xác định danh sách sẽ như thế nào. Thành phần <List> tìm nạp danh sách các bản ghi từ trình cung cấp dữ liệu và hiển thị bố cục danh sách mặc định (tiêu đề, các nút, bộ lọc, phân trang). <Datagrid> chịu trách nhiệm trực tiếp trong việc hiển thị danh sách dữ liệu. Cuối cùng, chúng tôi xác định trường nào sẽ được hiển thị.
• Các Thành phần PostCreate và PostEdit thêm chức năng cho Tạo và Chỉnh sửa tương ứng. Ở đây chúng tôi sử dụng SimpleForm chịu trách nhiệm hiển thị biểu mẫu thực tế.

Một bảng điều khiển quản trị phản ứng cơ bản với khả năng CRUD.

Sự kết luận

Trong bài viết này, tôi đã trình bày cách bắt đầu với React Admin và xây dựng một bảng điều khiển đơn giản với các khả năng CRUD.

Hy vọng nó là hữu ích!