I am going to assume you are familiar with React from now on. First we are going to need to create an application using create-react-app and install the react-admin package.
npx create-react-app admin-app
cd ./admin-app
npm install --save react-admin
Next we will configure our App.js file and use a fake REST API ‘http://jsonplaceholder.typicode.com’, which is designed for prototyping data. Just to note the API is read-only, hence creating and updating will not be possible.
import React, { Component } from 'react'
import {Admin, Delete, Resource} from 'react-admin'
import jsonServerProvider from 'ra-data-json-server'
import { PostList } from './posts'
class App extends Component {
render () {
return (
<Admin
dataProvider={jsonServerProvider('http://jsonplaceholder.typicode.com')}
>
<Resource
name="posts"
list={PostList}
/>
</Admin>
)
}
}
export default App
The <Admin> component expects the dataProvider prop, which is a function that will translate REST commands into HTTP requests. A tutorial on how to build your own Data Provider is available in the documentation. Also here at TeaCode we are preparing a production-ready data provider, which we will open-source soon.
The <Resource> component is responsible for handling data from your api. The name property defines a set of RESTful resources/endpoints to which requests will be sent. For example,<Resource name = "posts" /> will make a GET request to http://jsonplaceholder.typicode.com/posts obtain a list of posts. Finally, the list prop takes a component that will render the data list.
Next, we will create a posts.js file in the src folder and supply it with code.
import React from 'react'
import {
List,
Datagrid,
TextField,
EditButton,
SimpleForm,
TextInput,
LongTextInput,
Edit,
DisabledInput,
Create,
DeleteButton
} from 'react-admin'
export const PostCreate = (props) => (
<Create {...props}>
<SimpleForm>
<TextInput source='title' label='Title' />
<LongTextInput source='body' label='Body' />
</SimpleForm>
</Create>
)
export const PostEdit = (props) => (
<Edit title='Post Edit' {...props}>
<SimpleForm>
<DisabledInput label='id' source='id' />
<TextInput source='title' label='Title' />
<LongTextInput source='body' label='Body' />
</SimpleForm>
</Edit>
)
export const PostList = (props) => (
<List {...props}>
<Datagrid>
<TextField source='id' />
<TextField source='title' label='Title' />
<EditButton />
<DeleteButton />
</Datagrid>
</List>
)
Breaking the code down inside posts.js we’ve created 3 components: PostList, PostEdit and PostCreate. This is where the beauty of react-admin comes in.
- In the PostList component, you will define how the List of data will look like. The
<List> component serves as an interface between Redux and child components. <Datagrid> is directly responsible for rendering the list of data. Finally within <Datagrid> we determine which fields should be displayed just as seen on the screenshot above. All available field components can be found in the documentation. - The PostCreate and PostEdit Components add functionality just like their names imply. The concept is the same as with PostList with the difference that instead of Datagrid there is a SimpleForm which is a wrapper for redux-form. However, at this point, the admin panel will not use the defined create and edit components. Fear not as it only requires to add a couple of extra props to the
<Resource> component.
<Resource
name='post'
list={PostList}
remove={Delete}
edit={PostEdit}
create={PostCreate}
/>
.png)
.svg){kind=icon}
