Getting Started: React Admin

Getting Started: React Admin

Table of content
  1. What is React Admin?
  2. Setup
  3. Result
  4. Customisability

At Teacode.io we come across the need to provide administrative technology on a daily basis. However, knowing that admin panels are not the actual money-maker for our clients we had to embark on a quest to find a solution that allows fast development while maintaining full customizability.

On our journey through different frameworks, we came upon one that could just have the golden ratio between development time and personalisation. It’s React Admin! Let me show you why and get you rolling with it.

What is React Admin?

“A frontend Framework for building admin applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design.”

In other words, it is an easy-to-use React.js framework with the goal of cutting down on the time required to deploy an admin dashboard for your application.

By providing a variety of out of the box components it allows one to build a fully functional admin panel in little or even no time. Furthermore, it is fully customisable, hence however fancy your needs would be react-admin will not be limiting you.

There will also be no need for sacrifice in the looks! The components are built using the Material UI package, which have one of the most fashionable designs out there.

Adding extra functionality is a piece of cake with the use of Redux and Saga that are neatly integrated into react-admin.

So… Let’s dive into the basic setup!

Setup

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>
)
Image for post
The result of rendering the PostList component

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}
/>

Result

A fully working, good looking basic admin panel with full CRUD capability.

Image for post
The built-in Edit view in React Admin
Image for post
Create new entries with the PostCreate component in React Admin

Customisability

Now that we have dealt with the basics we can have a quick look at the customisability of react-admin. As all the components provided are built around basic react concepts it is simple to add your own elements to it. It is important to remember that react-admin provides components, which are just that, not a magical creature that only works with itself.

The admin component has built-in handling for custom routes, redux reducers and sagas. What is more building custom fields and inputs is just simply creating a component that is a Redux-Form field or that will display some data. A quick tutorial on how to integrate the components with the data is available in the documentation.


Hopefully with the help of this article, you should be able to meet your administrative needs. However, should you require a more sophisticated interface I would highly recommend familiarising with the documentation.

Try react-admin for yourself and enjoy or choose TeaCode to do it for you!

AI/ML Developer at TeaCode