react로 화면 관리를 간단하게 할 수 있는 "react-admin"
3722 단어 react-adminReact
사이트에서 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 자습서.
감사합니다!
Reference
이 문제에 관하여(react로 화면 관리를 간단하게 할 수 있는 "react-admin"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Kakki78/items/f3bd02e7c3fb371b1140텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)