Datengetriebene Apps mit React Admin erstellen

Wenn Sie jemals ein Admin-Dashboard von Grund auf neu erstellt haben – mit manueller Verkabelung von Tabellen, Formularen, Paginierung und API-Aufrufen – wissen Sie, wie viel Boilerplate-Code nötig ist, bevor Sie auch nur eine einzige Zeile Geschäftslogik schreiben. React Admin durchbricht dies, indem es Ihnen ein strukturiertes Framework für die Erstellung von CRUD-Apps auf Basis beliebiger APIs bietet. Dieser Artikel zeigt, wie es funktioniert, mit Fokus auf die Architektur, die es backend-agnostisch und wirklich wiederverwendbar macht.

Was React Admin tatsächlich ist

React Admin ist keine UI-Vorlage. Es ist ein React-Framework, das speziell für datengetriebene Admin-Dashboards und interne Tools entwickelt wurde. Es wird mit Komponenten zum Auflisten, Erstellen, Bearbeiten und Löschen von Datensätzen ausgeliefert, aber der eigentliche Wert liegt darin, wie es Ihre Datenschicht von Ihrer UI-Schicht trennt.

Im Kern basiert React Admin v5 auf React Query, react-hook-form und react-router. Standardmäßig verwendet es MUI, ist aber nicht darauf beschränkt – React Admin unterstützt die Headless-Nutzung, was bedeutet, dass Sie bei Bedarf Ihre eigene Komponentenbibliothek einbinden können.

Die drei Bausteine: Admin, Resource und dataProvider

Jede React Admin-App beginnt mit drei Konzepten:

• <Admin> — die Root-Komponente, die alles miteinander verbindet
• <Resource> — ordnet einen Namen einem Satz von CRUD-Ansichten und einem API-Endpunkt zu
• dataProvider — der Adapter zwischen React Admin und Ihrem 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>
)

Wenn ein Benutzer zur Filmliste navigiert, ruft React Admin dataProvider.getList("movies", params) auf. Wenn er einen Datensatz bearbeitet, ruft es dataProvider.update("movies", params) auf. Die UI kommuniziert niemals direkt mit Ihrer API.

Wie der React Admin dataProvider funktioniert

Der dataProvider basiert auf neun Kernmethoden: getList, getOne, getMany, getManyReference, create, update, updateMany, delete und deleteMany. Jede Methode erhält ein Request-Objekt und gibt ein Promise zurück, und Provider können bei Bedarf um zusätzliche Methoden erweitert werden.

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),
    }
  },
  // ...weitere Methoden
}

React Admin ist es egal, ob Ihr Backend REST, GraphQL, Supabase oder sogar IndexedDB ist. Solange jeder Datensatz ein konsistentes id-Feld hat und Ihr dataProvider die erwartete Form zurückgibt, funktioniert es. Vorgefertigte Adapter existieren für gängige Backends – ra-data-simple-rest, ra-data-graphql und andere – sodass Sie oft keinen von Grund auf neu schreiben müssen.

Authentifizierung handhaben

Die Authentifizierung ist nicht in den dataProvider integriert. React Admin verwendet einen separaten authProvider für Login, Logout und Berechtigungsprüfungen. Ein gängiges Muster ist es, nach dem Login ein Token zu speichern und es innerhalb Ihres dataProviders beim Stellen von Anfragen zu lesen, aber React Admin unterstützt auch die Integration mit externen Identity-Providern.

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

Listen- und Bearbeitungsansichten erstellen

Sobald Ihr dataProvider eingerichtet ist, ist das Erstellen von Ansichten größtenteils deklarativ. Für Listenansichten rendert die <Datagrid>-Komponente von React Admin Spalten basierend auf den Field-Komponenten, die Sie komponieren. Beachten Sie, dass <Datagrid> weiterhin weit verbreitet ist, aber neuere Versionen auch <DataTable> als modernere Alternative einführen.

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> ruft automatisch dataProvider.getMany("directors", ...) auf, um verknüpfte Datensätze aufzulösen – kein manuelles Abrufen erforderlich.

Bearbeitungsformulare folgen demselben Muster mit <Edit> und <SimpleForm>:

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

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

Wenn Sie benutzerdefinierte Logik benötigen

Für ressourcenspezifisches Verhalten – wie das Löschen verknüpfter Datensätze, bevor ein übergeordneter Datensatz entfernt wird – bietet React Admin 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
    },
  },
])

Dies hält Ihre Geschäftslogik nahe an der Datenschicht, ohne sie über Komponenten zu verstreuen.

Was React Admin nicht standardmäßig bietet

Ein paar Dinge, die Sie wissen sollten, bevor Sie sich festlegen:

• RBAC (feinkörnige rollenbasierte Zugriffskontrolle) erfordert das Enterprise-Modul; grundlegende Berechtigungsprüfungen werden über den authProvider behandelt
• Echtzeit-Updates erfordern einen kompatiblen Realtime-Data-Provider und zusätzliche Einrichtung
• Datei-Uploads benötigen benutzerdefinierte dataProvider-Logik zur Handhabung von multipart/form-data

React Admin ist auch mit Frameworks wie Next.js (einschließlich Pages und App Router) kompatibel und unterstützt alternative Routing-Lösungen über seine Standardeinrichtung hinaus.

Fazit

Die Stärke von React Admin liegt in seiner dataProvider-Abstraktion. Sobald Sie diese Kernmethoden gegen Ihre API implementiert haben, erhalten Sie ein voll funktionsfähiges CRUD-Admin-Dashboard mit Sortierung, Filterung, Paginierung und Beziehungshandhabung – ohne dass Sie etwas davon selbst erstellen müssen. Beginnen Sie mit einem vorgefertigten Adapter, wenn einer zu Ihrem Backend passt, schreiben Sie einen benutzerdefinierten, wenn nicht, und fügen Sie Authentifizierung und Lifecycle-Callbacks hinzu, während Ihre App wächst.

Häufig gestellte Fragen

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.