react-admin

Un framework frontend per costruire applicazioni single-page che girano nel browser, basato su API REST o GraphQL, utilizzando TypeScript, React e Material Design. Progetto open source mantenuto da marmelab.

Homepage - Documentazione - Esempi - Blog - Releases - Supporto

Caratteristiche

• 🔌 Backend Agnostico: si collega a qualsiasi API REST o GraphQL, con oltre 45 adattatori disponibili
• 🧩 Tutti i Componenti Necessari: hook e componenti per autenticazione, routing, moduli e validazione, griglia dati, ricerca e filtri, relazioni, ruoli e permessi, editor di testo ricco, i18n, notifiche, menù, theming e caching
• 🪡 Alta Qualità: accessibilità, responsive, sicuro, veloce, testabile
• 💻 Ottima Esperienza per Sviluppatori: documentazione completa, autocompletamento IDE, sicurezza tipica con TypeScript, storybook, app demo con codice sorgente, architettura modulare, API dichiarativa
• 👑 Ottima Esperienza Utente: rendering ottimistico, filtri in tempo reale, annulla, preferenze, query salvate
• 🛠 Personalizzazione Completa: sostituisci qualsiasi componente con il tuo
• ☂️ Tipizzazione Opzionale: sviluppo in TypeScript o JavaScript
• 👨‍👩‍👧‍👦 Basato su Material UI, react-hook-form, react-router, react-query, TypeScript

Installazione

React-admin è disponibile su npm:

npm install react-admin
# oppure
yarn add react-admin

Documentazione

• Leggi il Tutorial per un'introduzione di 30 minuti
• Guarda i video tutorial su YouTube
• Consulta la documentazione completa
• Esplora il codice degli esempi di app: e-commerce, CRM, blog semplice, media player

Panoramica di Utilizzo

// in app.js
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

createRoot(document.getElementById('root')!).render(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>
);

Il componente <Resource> definisce pagine CRUD (list, edit, create) per l'endpoint /posts.

Esempio di componenti React-admin per visualizzare, modificare e creare post:

import * as React from "react";
import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
export const PostIcon = BookIcon;

export const PostList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="title" />
            <DataTable.Col source="published_at" field={DateField} />
            <DataTable.Col source="average_note" />
            <DataTable.Col source="views" />
            <DataTable.Col>
                <EditButton />
            </DataTable.Col>
        </DataTable>
    </List>
);

const PostTitle = () => {
    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);

Compatibilità con API

React-admin usa un approccio basato su adapter chiamati Data Provider. È possibile utilizzare un provider esistente o scrivere un Data Provider personalizzato per qualsiasi API. Scrivere un Data Provider richiede poche ore.

Architettura e Personalizzazione

React-admin è una libreria di componenti React disaccoppiati che espongono logica di controllo riutilizzabile. È facile sostituire qualunque parte con componenti propri (ad esempio una griglia dati personalizzata, GraphQL invece di REST, Bootstrap invece di Material Design).

Esempi

Esempi disponibili nella cartella examples:

Esecuzione degli esempi:

make install
# oppure
yarn install

# Eseguire l'esempio semplice
make run-simple

# Eseguire l'esempio tutorial
make build
make run-tutorial

# Eseguire l'esempio demo
make build
make run-demo

Poi visita l'URL indicata nella console.

Supporto

• Supporto commerciale da Marmelab con React-Admin Enterprise Edition
• Supporto comunitario su Discord e StackOverflow

Contribuire

Puoi contribuire segnalando bug, rispondendo a domande su StackOverflow, creando pull request per bugfix o funzionalità. Segui lo stile di codice basato su prettier e scrivi test/documentazione. Usa make per i comandi automatici.

Testing e sviluppo

• Usa make test per eseguire test (lint, unit e funzionali).
• Esempio visuale principale: make run-simple con live reload.
• Esempio demo: make run-demo o make run-graphql-demo, no live reload.
• Usa yarn link per collegare la versione locale di react-admin al tuo progetto client.

...