React-Admin is a frontend framework for building B2B applications on top of REST/GraphQL APIs. It leverages React, Redux, and Material-UI to create powerful administration interfaces effortlessly. If you're looking to build an admin panel for your application and want to dive into React Admin, you're in the right place.

This blog post will provide a step-by-step React admin tutorial to get you started with React Admin, covering all the basics you need to create a fully functional administration interface.

What is React Admin?

React Admin is a robust, flexible, and modern frontend framework primarily designed for building administration interfaces and B2B applications. It is built on top of React, React Redux, and Material-UI and is capable of working with RESTful APIs, GraphQL, or even custom servers, thanks to its adaptable Data Provider function.

React Admin comes with a wealth of pre-designed components that cater to various administrative functions. This includes data tables, forms, buttons, inputs, and other essential interface elements, all ready to be customized and combined according to the specific needs of your admin application.

Features of React Admin:

Data Providers: React Admin communicates with APIs to fetch and modify data through Data Providers. These providers are adaptable to connect to REST APIs, GraphQL APIs, or even your custom server.

Interface Customization: React Admin provides a set of pre-built components that can be used and customized to create unique admin interfaces. It is also built on top of Material-UI, which allows for rich styling and theming capabilities.

Support for Authentication and Authorization: React Admin comes with built-in support for user authentication and authorization. It includes features such as user login, logout, and permissions, ensuring secure access to administrative functions.

Internationalization (i18n): React Admin is built with internationalization in mind, enabling multi-language support for your admin interface.

Developer-friendly: React Admin is designed to be developer-friendly, supporting modern development practices. It uses React, Redux, React Router, and Material-UI, some of the most well-documented and community-supported libraries in the React ecosystem.

Responsive: The interface rendered by React Admin is responsive, ensuring optimal viewing across different devices and screen sizes.

React Admin is an open-source project, which means it has the backing and support of a large and active community. This means regular updates, a wealth of resources, and quick assistance with any issues you might encounter. This makes it a good choice for developers who want to create efficient, scalable, and robust admin interfaces for their applications.

Setting Up the Project

First, we need to create a new React project. The easiest way to get started is with Create React App:

npx create-react-app react-admin-tutorial

Then, navigate into your newly created project:

cd react-admin-tutorial

Next, you need to install react-admin as a dependency. You can do this using npm or Yarn:

npm install react-admin ra-data-json-server
# or
yarn add react-admin ra-data-json-server

The ra-data-json-server package is a Data Provider for React Admin. Data Providers are adapters for your API, and they allow you to communicate with any type of backend (REST, GraphQL, SOAP, etc.).

Setting Up React Admin

Let's begin by creating a new file Admin.js in your src folder. In this file, we're going to set up the basic layout of our React Admin application.

// src/Admin.js
import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => <Admin dataProvider={dataProvider}></Admin>;

export default App;

In this file, we're importing the necessary modules from react-admin and setting up our data provider. We're using jsonplaceholder.typicode.com as our API endpoint for this tutorial, but you should replace this with your own API endpoint.

Creating Resources

Resources in React Admin are representations of your entities (e.g., posts, users, products, etc.). To create a resource, you need to import the Resource component from react-admin and include it inside your Admin component.

For each resource, you can define a list, create, edit, and show views using the ListGuesser, CreateGuesser, EditGuesser, and ShowGuesser components.

Update the Admin.js file as follows:

// src/Admin.js
import * as React from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

export default App;

Here, we've added a users resource, and we've used the ListGuesser component from react-admin to automatically guess the list fields.

Creating Custom Views

While the Guesser components are excellent to start with, you will quickly want to create your own views. For each resource, you can define four different views: list, create, edit, and show.

To create these views, React Admin provides four components: List, Create, Edit, and Show. These components are designed to work with react-final-form, and they expect a render function as a child, which will receive record, resource, basePath, and several other props.

To create a custom list view for our users resource, we can create a new UserList.js file in the src folder:

// src/UserList.js
import * as React from "react";
import { List, Datagrid, TextField, EmailField } from "react-admin";

export const UserList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <EmailField source="email" />
    </Datagrid>
  </List>
);

In this file, we're creating a UserList component using the List component from react-admin. We've added a Datagrid component inside the list, which will render a table. We've also added three fields to our table: id, name, and email.

We can now use this UserList component in our Admin.js file:

// src/Admin.js
import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { UserList } from "./UserList";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
  </Admin>
);

export default App;

By following similar steps, you can also create custom create, edit, and show views for your resources.

Conclusion

React Admin is a powerful library for creating admin interfaces with ease. It allows developers to quickly bootstrap an admin application based on an existing API. Although we only scratched the surface of what's possible with React Admin in this tutorial, you now have a solid foundation in react-admin tutorial to start building your own admin applications.

If you're seeking expert guidance or looking to outsource your application development, CronJ IT Technologies is a leading software development company with an experienced team of React developers. They offer efficient and scalable solutions to cater to your business needs.

Happy coding!

References

https://github.com/facebook/react/wiki