React-Admin: Through the Looking Glass ??

In today’s fast-paced world of web development, having an efficient and user-friendly admin interface is not only important but also a necessity. React-Admin, a well-known open-source framework built using React and MUI , a React implementation of Material Design, and maintained by marmelab , provides developers with the necessary tools to create powerful and responsive admin interfaces with ease. In this article, I will give an overview of the key features of React-Admin that I have found and showcase some practical examples to help explain its capabilities better.

What is React-Admin?

React-admin is a library built on top of React for building user interfaces. It was designed to consist of loosely coupled React components and hooks exposing reusable components that would allow a developer to implement, or override with their custom component.

Key Features ??

• Resources
• Declarative UI Components
• Guessers
• Data Providers

Resources ??

A resource, in the context of React-Admin, is a fundamental building block used to map to an endpoint or set of data endpoints. As an example, if we were to include a resource named “users” into App.jsx, it would look like this:

import { UserList } from "./Users"
import { UserEdit} from "./Users"
import { UserShow} from "./Users"
import { UserInvite } from "./Users";        

export const App = () => (
<Admin dataProvider={dataProvider}>
  <Resource
    name="users"
    list={UserList}
    edit={UserEdit}
    show={UserShow}
    create={UserInvite}
  />
</Admin>
)        

What the above allows us to do, is specify the components that should be used for different operations on the “users” resource. In this case, when a user navigates to <site_url>/users , they will see our custom UserList component or if they go to <site_url>/users/create then they will see our custom UserInvite component.

Declarative UI Components ??

React-admin has this neat ability to allow us as developers to define the structure of the UI in a declarative manner. What this means is we get to declare what it is that we want, and React-Admin will take of rendering it for us, and if need be we also get to override or customize that too.

Let’s continue the users example, and let’s take a peek at what the UserList component might look like ??

We are going to declare a UserList component, based on the following code can you guess what might happen?

import { List, Datagrid, TextField, EmailField } from 'react-admin';        

export const UserList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" label="ID"/>
            <TextField source="name" label="Name"/>
            <TextField source="email" label="Email Address" />
        </Datagrid>
    </List>
);        

I bet you could guess pretty closely, what we have is reusable React-Admin components allowing us to make use of:

• List component: Used to define how a collection of records should be displayed, including the columns, sorting, pagination, and any custom actions associated with the list.
• Datagrid: A key component within the List component, it is responsible for rendering a tabular representation of the data. It displays the list of records in a grid format.
• TextField: The final piece of this jigsaw, displays text values within the context of Datagrid. We can also use NumberField, EmailField, FunctionField, ReferenceField to be more specific and tailored to our data.

The wonderful thing about these components is the customizability through props which you can often find is shared amongst a lot of the components, for example, the sx prop is a commonly shared prop that is very useful when you want to give some styling to a component that might not outright have a prop for whatever it is you want to define, such as the TextField having a prop to define the font-weight but not the colour so we can pass the declaration of the colour via the sxprop as a way to override the styling on the component.

<TextField sx={{ color: "blue" }} fontWeight="bold" source="name" label="Name"/>        

Guessers ??

A cool feature that React-Admin offers up is that it can infer configuration based on your data structure, by making assumptions about the data model.

• ListGuesser: This will generate a basic list view with columns for each field.
• EditGuesser: This will create a basic edit form with fields that correspond to each attribute.
• ShowGuesser: This will generate read-only views for resources.

These guessers are helpful when you want to build a basic admin interface without manually specifying all of the configuration details, and when the app is running it will log the output of the code it used for these assumptions, to your console. This is super handy as it means you can copy and paste this into a custom component and build on it further to completely customize the component, which you will most likely want to do as it tends to stack the fields in 1 column as a view.

It is also important to note that guessers are a convention-over-configuration approach where pre-defined defaults are assumed based on the structure of our data. By sticking to standard naming conventions in the API data, the guessers can jumpstart the development process, however, I would strongly recommend that the use of guessers be viewed as a development tool to allow you to insert custom components that you have tailored to your needs.

Data Providers ??

To have a communication flow between the application and the backend API, there are Data Providers React-Admin utilises, which is responsible for handling the CRUD operations, fetching and sending data to the server. We are provided with a range of high-level hooks and components to simplify the process of developing a complex application.

The data provider is responsible for fetching data from the server, sending data to the server, and handling other CRUD (Create, Read, Update, Delete) operations. It acts as an abstraction layer that allows React-admin to work with various backend APIs while keeping a consistent API for the frontend.

The data provider typically implements methods such as:

1. getList: Fetches a list of records.
2. getOne: Fetches a single record by its ID.
3. create: Creates a new record.
4. update: Updates an existing record.
5. delete: Deletes a record.

dataProvider
    .getOne('users', { id: 5})
    .then(response => {
        console.log(response.data); // { id: 5, name: "Scott Maitland" }
    });        

Summary

Pros ??

React-Admin is an excellent choice for developers building powerful and flexible admin interfaces. It uses a declarative approach and has an extensive component library to draw from to build quickly, and I found that the support for various data sources has made it a versatile tool for creating a sophisticated interface that you and your users can be happy with.

Cons ?? ?? ??

React-Admin does have some drawbacks, I found that there was an early learning curve for implementing React-Admin into a project, such as learning about Data Providers and how to configure them, or how theGridcomponent isn’t a complete implementation of CSS Grid (Can’t span across rows for example), this can still be achieved but requires more complexity in using the sxprop. Whilst React-Admin allows us to spin up a lot of UI quickly for basic requirements if we were to deviate too greatly from standard CRUD conventions, then we can find ourselves doing a lot of research and seeing an increase in the complexity of our application to have it operate as we expect it to.

?? I hope you have enjoyed this article and it has provided a glimpse into how you can utilize React-Admin’s features to develop quickly and efficiently, enabling you to focus on other critical aspects of your application. ??