Cómo crear interfaces de administración en React con react-admin

Introducción

Las aplicaciones que exponen una API a menudo necesitarán una página de administrador (admin) para ver y editar los datos detrás de la aplicación. Crear una página suele requerir el minucioso proceso de crear una interfaz, seguido del manual de manejo de cada solicitud de OBTENER o PUBLICAR datos hacia y desde la API.

react-adminreduce esta tarea consumiendo automáticamente su API (REST, GraphQL, personalizada) y permitiéndole construir rápidamente una interfaz de administración temática con el elegante marco Material-UI.

En este artículo, utilizará la API JSONPlaceholder react-adminpara crear una interfaz de administración.

Prerrequisitos

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local.
• Si tienes alguna familiaridad con React, puedes leer nuestra serie Cómo programar en React.js.

Este tutorial fue verificado con Node v16.6.1, npmv7.20.3, reactv17.0.2, react-adminvv3.17.1 y ra-data-json-serverv3.17.1.

Paso 1: Configuración del proyecto

Para comenzar, vamos a crear una nueva aplicación React usando create-react-app:

npx create-react-app react-admin-example

A continuación, navegue hasta el nuevo directorio del proyecto:

cd react-admin-example

Luego, instala las dependencias para react-admin:

npm install react-admin@3.17.1^ ra-data-json-server@3.17.1^

ra-data-json-serveres lo que se denomina un proveedor de datos. Los proveedores de datos son los que permiten react-admincomunicarse con su API. Aquí, lo usamos ra-data-json-serverporque JSONPlaceholder funciona con JSON Server. Si está usando una API que no coincide exactamente con la de JSONPlaceholder, deberá implementar su propio proveedor de datos. Consulte la documentación del proveedor de datos para obtener más información.

En este punto, tienes un nuevo proyecto React con react-admine ra-data-json-serverinstalado.

Paso 2: creación de la aplicación

Primero, abriremos src/App.jsnuestro editor de código y agregaremos nuestro Admincomponente raíz:

fuente/App.js

import {  Admin} from 'react-admin';import jsonServerProvider from 'ra-data-json-server';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider} /  );}export default App;

Guarde los cambios en su archivo y ejecute la aplicación:

npm run start

A continuación, abrimos la aplicación en nuestro navegador y nos aparecerá un mensaje confirmando que react-adminse ha configurado correctamente:

OutputWelcome to React-adminYour application is properly configured.Now you can add a Resource as child of Admin.

Ahora, podemos comenzar a mapear los puntos finales de la API en la interfaz de administración.

Paso 3: Uso ListGuesserpara mapear datos

Siempre que agregues un nuevo punto de conexión, primero usas un adivinador. Este tomará los datos de la API y adivinará qué tipo de componente generará. El primer punto de conexión que agregaremos es usersy lo usaremos ListGuesserpara representar automáticamente una lista de todos los usuarios:

fuente/App.js

import {  Admin,  Resource,  ListGuesser,} from 'react-admin';import jsonServerProvider from 'ra-data-json-server';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider}      ^Resource        name="users"        list={ListGuesser}      /    /Admin  );}export default App;

Guarde los cambios en su archivo y observe la aplicación en su navegador.

Hay una interfaz de administración que se completa automáticamente con una lista de usuarios, incluidos sus nombres, correos electrónicos, números de teléfono y más.

Funciona casi a la perfección, pero los adivinadores no están pensados ​​para usarlos de forma permanente. Solo están ahí para ayudarnos a empezar. Vamos a tomar la salida de la lista adivinada del adivinador (que se puede encontrar en la consola de DevTools) y la usaremos para crear un componente de lista personalizado:

export const UserList = (props) = (  List {...props}    Datagrid rowClick="edit"      TextField source="id" /      TextField source="name" /      TextField source="username" /      EmailField source="email" /      TextField source="address.street" /      TextField source="phone" /      TextField source="website" /      TextField source="company.name" /    /Datagrid  /List);

Tomaremos esta salida y la pegaremos en un nuevo archivo llamado Users.js, asegurándonos de agregar todas las importaciones de react-admin:

src/Usuarios.js

import {  List,  Datagrid,  TextField,  EmailField,} from 'react-admin';export const UserList = (props) = (  List {...props}    Datagrid rowClick="edit"      TextField source="id" /      TextField source="name" /      TextField source="username" /      EmailField source="email" /      TextField source="address.street" /      TextField source="phone" /      TextField source="website" /      TextField source="company.name" /    /Datagrid  /List);

Ahora necesitamos reemplazarlo ListGuessercon nuestro componente recién creado:

fuente/App.js

import {  Admin,  Resource,} from 'react-admin';import jsonServerProvider from 'ra-data-json-server';import {  UserList,} from './Users';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider}      Resource        name="users"        list={UserList}      /    /Admin  );}export default App;

¡Genial! En la ventana del navegador podemos comprobar que la lista funciona exactamente igual que con ListGuesser.

Vamos a hacer algunos cambios para UserListmejorarlo un poco. Cambiaremos la websitecolumna aa UrlFieldpara que se pueda hacer clic en ella. También agregaremos una etiqueta a las columnas addressy companypara que sea un poco más legible:

src/Usuarios.js

import {  List,  Datagrid,  TextField,  EmailField,  UrlField,} from 'react-admin';export const UserList = props = (  List {...props}    Datagrid rowClick="edit"      TextField source="id" /      TextField source="name" /      TextField source="username" /      EmailField source="email" /      TextField source="address.street" label="Address" /      TextField source="phone" /      UrlField source="website" /      TextField source="company.name" label="Company" /    /Datagrid  /List);

En lugar de Address.street la etiqueta se muestra como Address . En lugar de Company.name la etiqueta se muestra como Company . ¡Mucho mejor!

Paso 4: Uso EditGuesserpara crear, editar y eliminar mapas

Nuestra interfaz de administración funciona muy bien si solo intentas ver usuarios, pero ¿qué pasa si quieres crear, editar o incluso eliminar usuarios? Afortunadamente, react-admintambién hay una forma de hacer esto. Usaremos un adivinador nuevamente, pero esta vez es un EditGuesser:

fuente/App.js

import {  Admin,  Resource,  EditGuesser,} from "react-admin";import jsonServerProvider from 'ra-data-json-server';import {  UserList,} from './Users';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider}      Resource        name="users"        list={UserList}        edit={EditGuesser}      /    /Admin  );}export default App;

Ahora, abramos el administrador en nuestro navegador y hagamos clic en cualquier usuario. Esto abrirá la interfaz de edición y, una vez más, ¡el adivinador hace un buen trabajo!

Vamos a hacer lo mismo que antes y copiaremos la salida del adivinador y la pegaremos en nuestro Users.jsarchivo. También vamos a cambiar la idcolumna a una disabledentrada; ¡No querrás que el idcampo sea editable!

src/usuarios.js

import {  List,  Datagrid,  TextField,  EmailField,  UrlField,  Edit,  SimpleForm,  TextInput,} from 'react-admin';export const UserList = props = ( ... );export const UserEdit = props = (  Edit {...props}    SimpleForm      TextInput source="id" disabled /      TextInput source="name" /      TextInput source="username" /      TextInput source="email" /      TextInput source="address.street" label="Address" /      TextInput source="phone" /      TextInput source="website" /      TextInput source="company.name" label="Company" /    /SimpleForm  /Edit);

Y finalmente, reemplace el EditGuessercon nuestro componente personalizado:

fuente/App.js

import {  Admin,  Resource,} from "react-admin";import jsonServerProvider from 'ra-data-json-server';import {  UserList,  UserEdit,} from './Users';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider}      Resource        name="users"        list={UserList}        edit={UserEdit}      /    /Admin  );}export default App;

¡Ahora tenemos una interfaz de edición funcional! Desafortunadamente, JSONPlaceholder no permite ediciones. Sin embargo, intenta editar un usuario y observa qué sucede. Notarás el cambio de usuario durante un segundo antes de react-adminque vuelva a su forma original. Esto se debe a que react-adminutilice una representación optimista. Esto significa que cuando un usuario realiza un cambio, react-adminse muestra ese cambio inmediatamente mientras se envía una consulta de actualización en segundo plano. Esto permite una experiencia de usuario perfecta, sin necesidad de esperar una respuesta del servidor antes de actualizar la interfaz de administración.

Lo único que nos falta ahora es una forma de crear nuevos usuarios. Dado que el formulario de creación es muy similar al formulario de edición, podemos copiar nuestro UserEditcomponente y llamar al nuevo componente UserCreate. Asegúrese de eliminar el idcampo, ya que el usuario no puede tener un idantes de la creación.

src/Usuarios.js

import {  List,  Datagrid,  TextField,  EmailField,  UrlField,  Edit,  SimpleForm,  TextInput,  Create,} from 'react-admin';export const UserList = props = ( ... );export const UserEdit = props = ( ... );export const UserCreate = props = (  Create {...props}    SimpleForm      TextInput source="name" /      TextInput source="username" /      TextInput source="email" /      TextInput source="address.street" label="Address" /      TextInput source="phone" /      TextInput source="website" /      TextInput source="company.name" label="Company" /    /SimpleForm  /Create);

Ahora agregue el nuevo componente a App.js:

fuente/App.js

import {  Admin,  Resource,} from "react-admin";import jsonServerProvider from 'ra-data-json-server';import {  UserList,  UserEdit,  UserCreate,} from './Users';const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');function App() {  return (    Admin dataProvider={dataProvider}      Resource        name="users"        list={UserList}        edit={UserEdit}        create={UserCreate}      /    /Admin  );}export default App;

¡Y así, react-adminagregaremos un botón Crear a nuestra lista de usuarios!

Conclusión

En este artículo, se utilizó react-adminpara crear una interfaz de administración que utiliza la API JSONPlaceholder).

Hemos creado una pequeña y agradable interfaz de administración con react-admin, pero apenas hemos comenzado a explorar lo que tiene para ofrecer. react-admines altamente personalizable: la funcionalidad y la apariencia de cada componente que hemos usado hasta ahora (y más) se pueden personalizar. Para obtener más información, consulte la react-admindocumentación.