Administrador de React: Introducción

“ Un marco frontend para crear aplicaciones de administración que se ejecutan en el navegador sobre las API REST/GraphQL, utilizando ES6, React y Material Design . ”

Básicamente, facilita la creación de aplicaciones React al reducir los esfuerzos para crear componentes web complejos. Le permite interactuar con su backend de forma estándar a través de proveedores de datos personalizados.

¿Por qué reaccionar administrador?

Si tenemos que hacer una aplicación administrativa interna que mantenga menos tiempo de desarrollo y proporcione una alta personalización, React-admin es un marco excelente para ello. Proporciona componentes personalizados para realizar operaciones CRUD, junto con temas, traducción, almacenamiento en caché, autenticación openId y mucho más.

Instalación

React-admin está disponible en npm. Cree una aplicación de reacción e instale las siguientes dependencias (react-admin, ra-data-json-server):

npx create-react-app ra-demo 
cd ra-demo
npm install ra-data-json-server
npm install react-admin

Ahora configuremos nuestro archivo App.js. Aquí usaremos una API REST falsa en nuestro proveedor de datos, aunque puede crear su propio proveedor de datos desde cero y definir su comportamiento.

Nota: esta API es de solo lectura, por lo que no se creará ni actualizará.

import React from 'react'
import {Admin, Resource} from 'react-admin'
import jsonServerProvider from 'ra-data-json-server'
import { PostList, PostCreate, PostEdit } from './posts'
const App = () => (
  <Admin
   dataProvider={jsonServerProvider(
     'http://jsonplaceholder.typicode.com'
   )}
  >
    <Resource
      name='posts'
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
    />
  </Admin>
)
export default App

<Resource>Los componentes son bloques de construcción fundamentales, ya que forman el esqueleto de la aplicación y de su almacén de datos interno. Por ejemplo, <Resource name = 'posts' />realizará una solicitud GET http://jsonplaceholder.typicode.com/postspara obtener una lista de publicaciones. Del mismo modo, realizará una solicitud POST http://jsonplaceholder.typicode.com/postspara crear una nueva publicación. El apoyo de la lista toma un componente que representará la lista de datos. De manera similar, crear y editar prop toma un componente que representará la vista de creación y edición respectivamente.

Ahora crearemos un archivo post.js y le proporcionaremos el código para diferentes vistas.

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  EditButton,
  SimpleForm,
  TextInput,
  Edit,
  Create,
  DeleteButton
} from 'react-admin'
const PostCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
    <TextInput source='title' label='Title' />
    <TextInput source='body' label='Body' multiline />
    </SimpleForm>
  </Create>
)
const PostEdit = (props) => (
  <Edit title='Post Edit' {...props}>
    <SimpleForm>
      <TextInput label='id' source='id' disabled />
      <TextInput source='title' label='Title' />
      <TextInput source='body' label='Body' multiline />
    </SimpleForm>
  </Edit>
)
const PostList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source='id' />
      <TextField source='title' label='Title' />
      <EditButton />
      <DeleteButton />
    </Datagrid>
  </List>
)
export { PostCreate, PostEdit, PostList}

• En el componente PostList , definiremos cómo se verá la lista. El componente <List> obtiene la lista de registros del proveedor de datos y presenta el diseño de lista predeterminado (título, botones, filtros, paginación). <Datagrid> es directamente responsable de presentar la lista de datos. Finalmente, determinamos qué campos deben mostrarse.
• Los componentes PostCreate y PostEdit agregan funcionalidad para Crear y Editar respectivamente. Aquí usamos SimpleForm, que es responsable de representar el formulario real.

Un panel básico de administración de reacción con habilidades CRUD.

Conclusión

En este artículo, demostré cómo comenzar con React Admin y construí un panel simple con capacidades CRUD.

¡Espero que haya sido útil!