react로 화면 관리를 간단하게 할 수 있는 "react-admin"

어제@Tyanri_의viewer-model로 WebAR 해볼게요.였습니다.
사이트에서 AR을 사용할 수 있다니 대단하다!
MYJLab 추가 달력 12일째 보도다.
이번에react로간단히화면관리를할 수 있는"react-admin"를소개한다.
이른바 react-admin
react의 프로그램 라이브러리는 몇 줄의 코드 기술을 통해 REST API에서 얻은 데이터를 표시하는 표와 계기판을 실현할 수 있습니다.인증, 정렬 기능, 검색 기능, CSV 내보내기 기능, 데이터 편집, 추가, 삭제 등 화면 관리에 필요한 기능을 갖추고 있다.
할 일
이번에는 간단한 CRUD 기능을 갖춘 관리 화면을 제작했다.

원래 데이터베이스를 준비했지만 관리 화면에 나타난 데이터는 이미 준비된 것을 이용한다JSONPlaceholder.
실제 사용한 샘플 데이터는 터미널에서 아래를 치면 확인할 수 있습니다.

curl https://jsonplaceholder.typicode.com/users

Getting Started
우선 create react-app로 react 프로그램을 만듭시다.
그리고 필요한 프로그램 라이브러리를 추가하고 시작합니다.

yarn create react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server
yarn start

다음은 App입니다.다음은 js를 고쳐 쓰세요.

import * as React from "react";
import { Admin, Resource } from 'react-admin';
import { PostList, PostEdit, PostCreate } from './post';
import jsonServerProvider from 'ra-data-json-server';

import PostIcon from '@material-ui/icons/Book';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
  </Admin>
);

export default App;

마지막으로 src 폴더에post.js를 만드십시오. 아래와 같이 고쳐 쓰십시오.
이렇게 다시 시작하면 위의 애니메이션과 같은 CRUD 기능이 실현된 관리 화면이 제작될 수 있다는 것을 확인할 수 있을 것 같습니다.

import * as React from "react";
import {
    List,
    Datagrid,
    TextField,
    EditButton,
    Edit,
    Create,
    SimpleForm,
    TextInput,
} from 'react-admin';


export const PostList = props => (
    <List {...props}>
        <Datagrid>
           <TextField source="id" />
            <TextField source="title" />
            <EditButton />
        </Datagrid>
    </List>
);

export const PostEdit = props => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput multiline source="title" />
            <TextInput multiline source="body" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = props => (
   <Create {...props}>
     <SimpleForm>
        <TextInput multiline source="title" /> 
        <TextInput multiline source="body" />   
    </SimpleForm>
    </Create>
);

최후
어때?
나는 매우 간단하게 CRUD 기능을 갖춘 관리 화면을 만들었다고 생각한다.
이 밖에react-admin은 편리한 구성 요소를 갖추고 있어 검색 기능과 정렬 등을 쉽게 실현할 수 있다.
프로그램 라이브러리를 사용하면 고장이 적고 핵심적인 선행 기능의 실현에 집중할 수 있다는 점이 매력적이다.
관심 있는 분들은 꼭 해보세요react-admin 자습서.
감사합니다!