React 관리자: 소개

" ES6, React 및 Material Design 을 사용하여 REST/GraphQL API 위에 브라우저에서 실행되는 관리 애플리케이션을 빌드하기 위한 프론트엔드 프레임워크 . "

기본적으로 복잡한 웹 컴포넌트를 만드는 노력을 줄여 React 애플리케이션을 쉽게 구축할 수 있습니다. 사용자 지정 데이터 공급자를 통해 표준 방식으로 백엔드와 상호 작용할 수 있습니다.

왜 관리자에게 반응합니까?

개발 시간을 적게 유지하고 높은 사용자 정의 기능을 제공하는 내부 관리 응용 프로그램을 만들어야 하는 경우 React-admin은 이를 위한 훌륭한 프레임워크입니다. 테마, 번역, 캐싱, openId 인증 등과 함께 CRUD 작업을 수행하기 위한 맞춤형 구성 요소를 제공합니다.

설치

React-admin은 npm에서 사용할 수 있습니다. 반응 앱을 만들고 다음 종속 항목(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

이제 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

<Resource>구성 요소는 응용 프로그램의 골격과 내부 데이터 저장소를 형성하기 때문에 기본적인 빌딩 블록입니다. 예를 들어, 게시물 목록을 가져오기 위해 <Resource name = 'posts' />GET 요청을 수행합니다. http://jsonplaceholder.typicode.com/posts마찬가지로 http://jsonplaceholder.typicode.com/posts새 게시물을 만들기 위해 POST 요청을 보냅니다. 목록 소품은 데이터 목록을 렌더링할 구성 요소를 사용합니다 . 유사하게, create 및 edit prop은 각각 생성 및 편집 뷰를 렌더링하는 구성 요소를 취합니다.

이제 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}

• PostList 구성 요소 에서 우리는 목록이 어떻게 생겼는지 정의할 것입니다. <List> 구성 요소는 데이터 공급자로부터 레코드 목록을 가져오고 기본 목록 레이아웃(제목, 버튼, 필터, 페이지 매김)을 렌더링합니다. <Datagrid>는 데이터 목록 렌더링을 직접 담당합니다. 마지막으로 표시할 필드를 결정합니다.
• PostCreate 및 PostEdit 구성 요소 는 각각 생성 및 편집에 대한 기능을 추가합니다. 여기서는 실제 양식을 렌더링하는 SimpleForm 을 사용합니다.

CRUD 기능이 있는 기본 반응 관리자 패널입니다.

결론

이 기사에서는 React Admin을 시작하고 CRUD 기능이 있는 간단한 패널을 구축하는 방법을 보여주었습니다.

도움이 되었기를 바랍니다!