React Admin: Introdução

“ Um framework frontend para construir aplicativos administrativos rodando no navegador em cima de APIs REST/GraphQL, usando ES6, React e Material Design . ”

Basicamente, ele facilita a construção de aplicativos React, reduzindo os esforços para criar componentes web complexos. Ele permite que você interaja com seu back-end de maneira padrão por meio de provedores de dados personalizados.

Por que React Admin?

Se tivermos que fazer um aplicativo administrativo interno que mantenha menos tempo de desenvolvimento e forneça alta personalização, o React-admin é um excelente framework para isso. Ele fornece componentes personalizados para realizar operações CRUD, juntamente com temas, tradução, cache, autenticação openId e muito mais.

Instalação

O React-admin está disponível no npm. Crie um aplicativo react e instale as seguintes dependências (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

Agora vamos configurar nosso arquivo App.js. Aqui usaremos uma API REST falsa em nosso provedor de dados, embora você possa criar totalmente seu próprio provedor de dados do zero e definir seu comportamento.

Observação: esta API é somente leitura, portanto, a criação e a atualização não ocorrerão.

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>componentes são blocos de construção fundamentais, pois formam o esqueleto do aplicativo e de seu armazenamento de dados interno. Por exemplo, <Resource name = 'posts' />fará uma solicitação GET http://jsonplaceholder.typicode.com/postspara obter a lista de postagens. Da mesma forma, ele fará uma solicitação POST http://jsonplaceholder.typicode.com/postspara criar uma nova postagem. A prop list pega um componente que irá renderizar a lista de dados. Da mesma forma, criar e editar prop pega um componente que renderizará a visualização de criação e edição, respectivamente.

Agora vamos criar um arquivo post.js e fornecer o código para diferentes visualizações.

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}

• No componente PostList , definiremos como será a aparência da lista. O componente <List> busca a lista de registros do provedor de dados e renderiza o layout de lista padrão (título, botões, filtros, paginação).<Datagrid> é diretamente responsável por renderizar a lista de dados. Por fim, determinamos quais campos devem ser exibidos.
• Os componentes PostCreate e PostEdit adicionam funcionalidades para Criar e Editar, respectivamente. Aqui usamos o SimpleForm que é responsável por renderizar o formulário real.

Um painel react-admin básico com habilidades CRUD.

Conclusão

Neste artigo, demonstrei como começar a usar o React Admin e construí um painel simples com recursos CRUD.

Espero que tenha sido útil!