Introduction
A good number of web applications have evolved from static websites that just display content to dynamic webpages where users access and interact with content. This content is often powered by APIs that send and receive data.
Often, an admin page is needed to sort and handle this data. The usual practice would be to build an interface and connect every endpoint by sending requests to the API. This used to be a tedious process until react-admin
was introduced.
react-admin
is a framework that builds admin interfaces by consuming your APIs – Rest, GraphQL or custom. You also won’t have to worry about style formatting as it’s themed with Material UI – a React library used in designing application interfaces. In this blog post, we will learn how react-admin
scaffolds admin interfaces for applications.
Getting started
Let’s begin by creating a new React project and installing react-admin
in its directory like this:
npx create-react-app react-admin-app cd react-admin-app # install react-admin npm install react-admin
Your application should be running with an empty React app on port 3000.
Modifying and filtering data with guessers
It is essential for an admin page to have CRUD functionalities. We’ll use an API to show how react-admin
does this. The JSONPlaceholder is a dummy REST API which exists for illustration purposes, here’s a sample of the data we’ll be getting:
{ "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } }
We first need to install JSONPlaceholder in our react-admin
app:
npm install ra-data-json-server prop-types
Let’s try fetching data from the API. For this purpose, react-admin
uses <Admin>
, its root component to provide the data exchange between APIs and applications. Replace the default syntax in src/App.js
with this:
import React, { Component } from "react"; import { Admin } from "react-admin"; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider} /> ); } } export default App;
Running npm start
at this point should render an app with a confirmatory message on your browser:
While still in development, react-admin
creates admin interfaces through “guessers”. Guessers receive data from the API, determine what sort of data it is and then make decisions on what kind of format the data should be displayed in. Let’s try to display a list of users by applying guessers:
import React, { Component } from "react"; import { Admin, Resource, ListGuesser } from "react-admin"; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={ListGuesser} /> </Admin> ); } } export default App;
In the code block above, the <resource>
element is responsible for mapping the name
property to an endpoint in the API. Here <resource>
appends the users
value to our API and fetches the data of users from the API. The list
property uses the <ListGuesser>
component to display this data as a list of users.
<ListGuesser>
is not meant to be used in production thus it has to be replaced by a custom component. An awesome feature of guessers is the display of the source code of data retrieved from the API in the browser’s console. Let’s take a look at what <ListGuesser>
displays:
So this shows us how our user list should be created. Let’s replicate this data in our application. In the src
folder of your project, create a file and name it users.js
:
/src/users.js import React from 'react'; 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> );
In the code block above a couple of changes were made. First, we use the <UrlField>
element to make the links on our website column clickable. Then we add a label
property to the address and company columns to make their headers more presentable. Let’s navigate to App.js
and replace ListGuesser
with UserList
:
/src/App.js import React, { Component } from "react"; import { Admin, Resource } from "react-admin"; import { UserList } from './users'; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={UserList} /> </Admin> ); } } export default App;
Admin pages should be able to edit and create data as well. react-admin
also does this by the use of guessers. EditGuesser
is used to edit data of admin pages. In App.js
, import EditGuesser
from react-admin
:
src/App.js import React from 'react'; import { Admin, Resource, EditGuesser } from "react-admin"; import { UserList } from './users'; class App extends Component { render() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={UserList} edit={EditGuesser} /> </Admin> ); } }
Now we can edit user details on our admin interface:
One important thing to note is that JSONPlaceholder, the API we are using doesn’t have editing and creating functionalities. What occurs here is a concept called optimistic rendering – which react-admin
uses to display changes made while simultaneously sending an update query in the background. Should the query fail, the data will change back to its original form.
Similar to listing users, a look at our console will give us an idea of what to input as markup. Here’s what we have after using EditGuesser
:
Let’s replicate our console’s markup in our application. Append the code sample below in users.js
:
//src/users.js import React from 'react'; import { Edit, UrlField, DisabledInput, SimpleForm, TextInput } from 'react-admin'; export const UserEdit = props => ( <Edit {...props}> <SimpleForm> <DisabledInput source="id" /> <TextInput source="name" /> <TextInput source="username" /> <TextInput source="email" /> <TextInput source="address.street" label="Address" /> <TextInput source="phone" /> <UrlField source="website" /> <TextInput source="company.name" label="Company" /> </SimpleForm> </Edit> );
The DisabledInput
element prevents sensitive properties from being edited. In App.js
, replace EditGuesser
with UserEdit
:
//src/App.js import React, { Component } from "react"; import { Admin, Resource } from "react-admin"; import { UserList, UserEdit } from './users'; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={UserList} edit={UserEdit} /> </Admin> ); } } export default App;
The process of creating a new user is almost the same as editing one save for a few elements. In users.js
, replicate the code sample below:
//src/users.js import React from 'react'; import { Create, UrlField, DisabledInput, SimpleForm, TextInput } from 'react-admin'; 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" /> <UrlField source="website" /> <TextInput source="company.name" label="Company" /> </SimpleForm> </Create> );
and in App.js
add the UserCreate
component:
//src/App.js import React, { Component } from "react"; import { Admin, Resource } from "react-admin"; import { UserList, UserEdit, UserCreate } from './users'; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} /> </Admin> ); } } export default App;
On our interface let’s try to create a new user:
Similar to what happens when we try to edit the details of a user, optimistic rendering occurs. This explains why in the last seconds of the snippet above our newly created user is displayed for a while before the message NOT FOUND
can be seen.
Authentication
Every admin page needs an authentication process. It could be basic or a bit more complex (JWT, OAuth). Although by default, react-admin
apps do not need authentication to function, it’s still best practice to integrate authentication to admin pages.
react-admin
lets you be flexible with how you implement authentication. JSONPlaceholder has no authentication model so we are going to create a dummy authentication process which will accept any values as username
and password
and store these values in localStorage
. In your src
folder, create a file called authProvider
:
// src/authProvider.js import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin'; export default (type, params) => { // when a user tries to log in if (type === AUTH_LOGIN) { const { username } = params; localStorage.setItem('username', username) return Promise.resolve(); } // when a user tries to logout if (type === AUTH_LOGOUT) { localStorage.removeItem('username', username) return Promise.resolve(); } // when the API throws an error if (type === AUTH_ERROR) { const { status } = params; if (status === 401 || status === 403) { localStorage.removeItem('username'); return Promise.reject() } return Promise.resolve() } // when a user navigates to a new location if (type === AUTH_CHECK) { return localStorage.getItem('username') ? Promise.resolve() : Promise.reject(); } return Promise.reject('Unknown Method'); };
Then head on to App.js
and pass the authProvider
property in the <Admin>
component:
//src/App.js import React, { Component } from "react"; import { Admin, Resource } from "react-admin"; import authProvider from "./authProvider"; import { UserList, UserEdit, UserCreate } from './users'; import jsonServerProvider from "ra-data-json-server"; const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com"); class App extends Component { render() { return ( <Admin dataProvider={dataProvider} authProvider={authProvider}> <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} /> </Admin> ); } } export default App;
Now when we restart our application, we first get to a login page:
Summary
Creating admin applications does not have to be as complex as it once was. With react-admin
, we can scaffold admin interfaces quite readily. Authentication processes are equally important and they are not excluded here. Should you need to take a look at the source code, you can find it here on CodeSandBox.
Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
Outstanding, and thank you for this informative blog on ‘react-admin’! Just a not about the code, which is corrected codesandbox….., the username variable should be left out in the authentication component in the following manner. Referring to the codesandbox shows the correction made:
// when a user tries to logout
if (type === AUTH_LOGOUT) {
localStorage.removeItem(‘username’)
return Promise.resolve();
}
I’ve learned a lot in a relatively brief period of instruction and it’s much appreciated.
RL Glover
where can we see the code in log in and its styles? pls reply immediately… thanks
You may want to update some parts in here…
The DisabledInput Component Was Removed
You can replace with a disabled or read-only TextInput.
how to remove check box and display just items