Construindo Aplicações Orientadas a Dados com React Admin

Se você já construiu um painel administrativo do zero—configurando tabelas, formulários, paginação e chamadas de API manualmente—sabe quanto código repetitivo é necessário antes de escrever uma única linha de lógica de negócio. O React Admin elimina isso ao fornecer um framework estruturado para construir aplicações CRUD sobre qualquer API. Este artigo explica como ele funciona, focando na arquitetura que o torna independente de backend e genuinamente reutilizável.

O Que React Admin Realmente É

React Admin não é um template de UI. É um framework React desenvolvido especificamente para painéis administrativos orientados a dados e ferramentas internas. Ele vem com componentes para listar, criar, editar e excluir registros, mas o verdadeiro valor está em como ele separa sua camada de dados da camada de UI.

Em seu núcleo, o React Admin v5 é construído sobre React Query, react-hook-form e react-router. Ele usa MUI por padrão, mas não está limitado a isso—React Admin suporta uso headless, o que significa que você pode trazer sua própria biblioteca de componentes se necessário.

Os Três Blocos de Construção: Admin, Resource e dataProvider

Toda aplicação React Admin começa com três conceitos:

• <Admin> — o componente raiz que conecta tudo
• <Resource> — mapeia um nome para um conjunto de visualizações CRUD e um endpoint de API
• dataProvider — o adaptador entre o React Admin e seu backend

import { Admin, Resource } from "react-admin"
import { dataProvider } from "./dataProvider"
import { MovieList } from "./MovieList"
import { MovieEdit } from "./MovieEdit"

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="movies" list={MovieList} edit={MovieEdit} />
  </Admin>
)

Quando um usuário navega para a lista de filmes, o React Admin chama dataProvider.getList("movies", params). Quando editam um registro, ele chama dataProvider.update("movies", params). A UI nunca se comunica diretamente com sua API.

Como Funciona o dataProvider do React Admin

O dataProvider é construído em torno de nove métodos principais: getList, getOne, getMany, getManyReference, create, update, updateMany, delete e deleteMany. Cada método recebe um objeto de requisição e retorna uma Promise, e os provedores podem ser estendidos com métodos adicionais quando necessário.

const dataProvider = {
  getList: async (resource, params) => {
    const { page, perPage } = params.pagination
    const { field, order } = params.sort
    const url = `${apiUrl}/${resource}?page=${page}&perPage=${perPage}&sort=${field}&order=${order}`
    const { json, headers } = await httpClient(url, { signal: params.signal })
    return {
      data: json,
      total: parseInt(headers.get("content-range").split("/").pop(), 10),
    }
  },
  // ...outros métodos
}

O React Admin não se importa se seu backend é REST, GraphQL, Supabase ou até IndexedDB. Desde que cada registro tenha um campo id consistente e seu dataProvider retorne o formato esperado, ele funciona. Adaptadores pré-construídos existem para backends comuns—ra-data-simple-rest, ra-data-graphql e outros—então você frequentemente não precisa escrever um do zero.

Tratando Autenticação

A autenticação não está integrada ao dataProvider. O React Admin usa um authProvider separado para login, logout e verificações de permissão. Um padrão comum é armazenar um token após o login e lê-lo dentro do seu dataProvider ao fazer requisições, mas o React Admin também suporta integração com provedores de identidade externos.

const httpClient = (url, options = {}) => {
  options.user = {
    authenticated: true,
    token: localStorage.getItem("token"),
  }
  return fetchUtils.fetchJson(url, options)
}

Construindo Visualizações de Listagem e Edição

Uma vez que seu dataProvider está configurado, construir visualizações é principalmente declarativo. Para visualizações de listagem, o componente <Datagrid> do React Admin renderiza colunas baseadas nos componentes de campo que você compõe. Note que <Datagrid> ainda é amplamente usado, mas versões mais recentes também introduzem <DataTable> como uma alternativa mais moderna.

import { List, Datagrid, TextField, DateField, ReferenceField } from "react-admin"

export const MovieList = () => (
  <List>
    <Datagrid rowClick="edit">
      <TextField source="title" />
      <DateField source="release" />
      <ReferenceField source="director_id" reference="directors">
        <TextField source="lastname" />
      </ReferenceField>
    </Datagrid>
  </List>
)

<ReferenceField> automaticamente chama dataProvider.getMany("directors", ...) para resolver registros relacionados—nenhuma busca manual necessária.

Formulários de edição seguem o mesmo padrão usando <Edit> e <SimpleForm>:

import { Edit, SimpleForm, TextInput, DateInput } from "react-admin"

export const MovieEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="title" />
      <DateInput source="release" />
    </SimpleForm>
  </Edit>
)

Quando Você Precisa de Lógica Personalizada

Para comportamento específico de recursos—como excluir registros relacionados antes que um registro pai seja removido—o React Admin fornece withLifecycleCallbacks:

import { withLifecycleCallbacks } from "react-admin"

export const dataProvider = withLifecycleCallbacks(baseDataProvider, [
  {
    resource: "movies",
    beforeDelete: async (params, dp) => {
      const { data: reviews } = await dp.getList("reviews", {
        filter: { movie_id: params.id },
        pagination: { page: 1, perPage: 1000 },
        sort: { field: "id", order: "DESC" },
      })
      await dp.deleteMany("reviews", { ids: reviews.map((r) => r.id) })
      return params
    },
  },
])

Isso mantém sua lógica de negócio próxima à camada de dados sem espalhá-la pelos componentes.

O Que React Admin Não Faz Nativamente

Algumas coisas que vale a pena saber antes de se comprometer:

• RBAC (controle de acesso baseado em funções granular) requer o módulo enterprise; verificações básicas de permissão são tratadas através do authProvider
• Atualizações em tempo real requerem um provedor de dados compatível com realtime e configuração adicional
• Upload de arquivos precisa de lógica personalizada no dataProvider para lidar com multipart/form-data

O React Admin também é compatível com frameworks como Next.js (incluindo tanto Pages quanto App Router) e suporta soluções de roteamento alternativas além de sua configuração padrão.

Conclusão

A força do React Admin é sua abstração de dataProvider. Uma vez que você implementa esses métodos principais contra sua API, você obtém um painel administrativo CRUD totalmente funcional com ordenação, filtragem, paginação e tratamento de relacionamentos—sem construir nada disso você mesmo. Comece com um adaptador pré-construído se um se adequar ao seu backend, escreva um personalizado se não, e adicione camadas de autenticação e callbacks de ciclo de vida conforme sua aplicação cresce.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.