How To Create Admin Interfaces in React with react-admin
source link: https://www.digitalocean.com/community/tutorials/react-react-admin-interface
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
Applications exposing an API will often need an administrator (admin) page to view and edit the data behind the application. Creating one usually requires the painstaking process of building an interface, followed by manually handling every request to GET or POST data to and from the API.
react-admin
reduces this drudgery by automatically consuming your (REST, GraphQL, custom) API and allowing you to quickly build an admin interface themed with the elegant Material-UI framework.
In this article, you will use react-admin
to build an admin interface that uses the JSONPlaceholder API.
Prerequisites
- A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
- Some familiarity with React. You can read our How To Code in React.js series.
This tutorial was verified with Node v16.6.1, npm
v7.20.3, react
v17.0.2, react-admin
vv3.17.1, and ra-data-json-server
v3.17.1.
Step 1 — Setting Up the Project
To get started, we’re going to create a new React application using create-react-app
:
npx create-react-app react-admin-example
Next, navigate to the new project directory:
cd react-admin-example
Then, install the dependencies for react-admin
:
npm install react-admin@<3.17.1^> [email protected]<^>
ra-data-json-server
is what’s called a data provider. Data providers are what allow react-admin
to communicate with your API. Here, we’re using ra-data-json-server
because JSONPlaceholder is powered by JSON Server. If you’re using an API that doesn’t exactly match that of JSONPlaceholder, you will need to implement your own data provider. Consult the data provider documentation for more information.
At this point, you have a new React project with react-admin
and ra-data-json-server
installed.
Step 2 — Building the Application
First, we’ll open up src/App.js
in our code editor and add in our root Admin
component:
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;
Save the changes to your file and run the application:
npm run start
Then, open the application in our browser. It will display a message confirming that react-admin
has been properly configured:
Output
Welcome to React-admin
Your application is properly configured.
Now you can add a <Resource> as child of <Admin>.
Now, we can start mapping the API endpoints into the admin interface.
Step 3 — Using ListGuesser
to Map Data
Whenever you add a new endpoint, you first use a guesser. This will take the data from the API and guess what kind of component to output. The first endpoint we’ll add is users
, and we’re going to use ListGuesser
to automatically render a list of all users:
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;
Save the changes to your file and observe the application in your browser.
There is an admin interface that is automatically populated with a list of users! Including their names, emails, phone number, and more!
It works almost perfectly but guessers aren’t meant to be used permanently. They are only there to help us get started. We’re going to take the guessed list output from the guesser (which can be found in the DevTools console) and use it to create a custom list component:
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>
);
We’ll take this output and paste it into a new file called Users.js
, while making sure to add all the imports from react-admin
:
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>
);
Now we need to replace the ListGuesser
with our newly created component:
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;
Great! In the browser window, we can verify that the list works exactly as it did with ListGuesser
.
Let’s make some changes to UserList
to make it a little better. We’ll change the website
column to a UrlField
to make it clickable. We’ll also add a label to the address
and company
columns to make it a bit more readable:
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>
);
Instead of Address.street the label displays as Address. Instead of Company.name the label displays as Company. Much better!
Step 4 — Using EditGuesser
to Map Create, Edit, Delete
Our admin interface works great if you’re just trying to view users, but what if you want to create, edit, or even delete users? Thankfully, react-admin
has a way to do this as well. We’re going to use a guesser again, but this time, it’s an EditGuesser
:
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;
Now, let’s open up the admin in our browser and click on any user. This will bring up the edit interface, and once again, the guesser does a good job!
We’re going to do the same thing as before and copy the output from the guesser and paste it into our Users.js
file. We’re also going to change the id
column to a disabled
input; you wouldn’t want the id
field to be editable!
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>
);
And finally, replace the EditGuesser
with our custom component:
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;
Now we have a functional edit interface! Unfortunately, JSONPlaceholder doesn’t allow edits. However, try to edit a user and observe what happens. You will experience the user change for a second before react-admin
changes it back to its original form. This is because react-admin
uses optimistic rendering. This means that when a user makes a change, react-admin
displays that change immediately while sending an update query in the background. This allows for a seamless user experience, with no need to wait for a server response before updating the admin interface.
The only thing we’re missing now is a way to create new users. Since the creation form is so similar to the edit form, we can copy our UserEdit
component and call the new component UserCreate
. Make sure to remove the id
field, since the user can’t have an id
before creation.
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>
);
Now add the new component to 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;
And just like that, react-admin
will add a Create button to our list of users!
Conclusion
In this article, you used react-admin
to build an admin interface that uses the JSONPlaceholder) API.
We’ve created a nice little admin interface using react-admin
, but we’ve barely scratched the surface of what it has to offer. react-admin
is highly customizable: the functionality and appearance of every component we’ve used so far (and more) can be customized. To learn more, consult the react-admin
documentation.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK