Construcción de Aplicaciones Basadas en Datos con React Admin

Si alguna vez has construido un panel de administración desde cero—conectando tablas, formularios, paginación y llamadas a API manualmente—sabes cuánto código repetitivo se necesita antes de escribir una sola línea de lógica de negocio. React Admin elimina esa complejidad al proporcionarte un framework estructurado para construir aplicaciones CRUD sobre cualquier API. Este artículo explica cómo funciona, enfocándose en la arquitectura que lo hace agnóstico al backend y genuinamente reutilizable.

Qué es Realmente React Admin

React Admin no es una plantilla de UI. Es un framework de React diseñado específicamente para paneles de administración basados en datos y herramientas internas. Incluye componentes para listar, crear, editar y eliminar registros, pero el verdadero valor está en cómo separa tu capa de datos de tu capa de UI.

En su núcleo, React Admin v5 está construido sobre React Query, react-hook-form y react-router. Por defecto utiliza MUI, pero no está limitado a él—React Admin soporta uso headless, lo que significa que puedes traer tu propia biblioteca de componentes si es necesario.

Los Tres Bloques Fundamentales: Admin, Resource y dataProvider

Toda aplicación de React Admin comienza con tres conceptos:

• <Admin> — el componente raíz que conecta todo
• <Resource> — mapea un nombre a un conjunto de vistas CRUD y un endpoint de API
• dataProvider — el adaptador entre React Admin y tu 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>
)

Cuando un usuario navega a la lista de películas, React Admin llama a dataProvider.getList("movies", params). Cuando editan un registro, llama a dataProvider.update("movies", params). La UI nunca habla directamente con tu API.

Cómo Funciona el dataProvider de React Admin

El dataProvider se construye alrededor de nueve métodos principales: getList, getOne, getMany, getManyReference, create, update, updateMany, delete y deleteMany. Cada método recibe un objeto de solicitud y devuelve una Promise, y los proveedores pueden extenderse con métodos adicionales cuando sea necesario.

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),
    }
  },
  // ...otros métodos
}

A React Admin no le importa si tu backend es REST, GraphQL, Supabase o incluso IndexedDB. Mientras cada registro tenga un campo id consistente y tu dataProvider devuelva la estructura esperada, funciona. Existen adaptadores preconstruidos para backends comunes—ra-data-simple-rest, ra-data-graphql, y otros—por lo que a menudo no necesitas escribir uno desde cero.

Manejo de Autenticación

La autenticación no está integrada en el dataProvider. React Admin utiliza un authProvider separado para inicio de sesión, cierre de sesión y verificaciones de permisos. Un patrón común es almacenar un token después del inicio de sesión y leerlo dentro de tu dataProvider al hacer solicitudes, pero React Admin también soporta integración con proveedores de identidad externos.

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

Construcción de Vistas de Lista y Edición

Una vez que tu dataProvider está conectado, construir vistas es principalmente declarativo. Para vistas de lista, el componente <Datagrid> de React Admin renderiza columnas basadas en componentes de campo que compones. Ten en cuenta que <Datagrid> todavía se usa ampliamente, pero las versiones más recientes también introducen <DataTable> como una alternativa más 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> automáticamente llama a dataProvider.getMany("directors", ...) para resolver registros relacionados—no se requiere obtención manual de datos.

Los formularios de edición siguen el mismo patrón usando <Edit> y <SimpleForm>:

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

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

Cuando Necesitas Lógica Personalizada

Para comportamiento específico de recursos—como eliminar registros relacionados antes de que se elimine un padre—React Admin proporciona 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
    },
  },
])

Esto mantiene tu lógica de negocio cerca de la capa de datos sin dispersarla a través de los componentes.

Lo que React Admin No Hace de Forma Predeterminada

Algunas cosas que vale la pena conocer antes de comprometerte:

• RBAC (control de acceso basado en roles de grano fino) requiere el módulo empresarial; las verificaciones básicas de permisos se manejan a través del authProvider
• Actualizaciones en tiempo real requieren un proveedor de datos compatible con tiempo real y configuración adicional
• Carga de archivos necesita lógica personalizada en el dataProvider para manejar multipart/form-data

React Admin también es compatible con frameworks como Next.js (incluyendo tanto Pages como App Router) y soporta soluciones de enrutamiento alternativas más allá de su configuración predeterminada.

Conclusión

La fortaleza de React Admin es su abstracción del dataProvider. Una vez que implementas esos métodos principales contra tu API, obtienes un panel de administración CRUD completamente funcional con ordenamiento, filtrado, paginación y manejo de relaciones—sin construir nada de eso tú mismo. Comienza con un adaptador preconstruido si uno se ajusta a tu backend, escribe uno personalizado si no, y agrega autenticación y callbacks de ciclo de vida a medida que tu aplicación crece.

Preguntas Frecuentes

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.