If you’ve ever had to build an admin panel at work, you probably weren’t too excited about it. Every business needs an admin user interface for day-to-day management – finding user addresses, marking orders as refunds, resetting passwords – but it can be a little tricky to create and maintain. However, if you’re using React, react-admin will probably make things easier.
Which reaction admin?
React-admin is a framework that uses React, Material UI, React Router, Redux and React-final form to provide you with an overall administrator framework that you can customize to suit your dashboard creation needs. It is developed and maintained by a developer store called bootstrap dashboard (I guess they are tired of building the same admin UI for their customers over and over again).
React-admin is a front-end framework so it is built to use your existing REST / GraphQL APIs. It allows you to easily create a front-end admin application that interacts with your backend in a standard way via a data provider.
What is a data provider?
React-admin is unique in how it handles interactions between your frontend and backend:
It uses something called an adapter (data provider) approach: the data provider acts as an interface between your framework and your backend → handles queries and response management between your frontend and backend APIs to allow you to focus on creating your dashboard in step modular.
To get started, react admin template provides us with data providers that can be used to reverse engineer our APIs if they are not already built, or in the more likely scenario that they already exist, you can write your own data providers to interact with your existing APIs **. **
At a high level, react-admin offers some pretty interesting features (we’ll cover one of these later):
• Relationship support
• Conditional formatting
• Complete data network
• Optimistic rendering
Long story short: it’s a powerful setting.
I would say that what you need to do to write your data provider really depends on your api scheme. If it is standard, it is likely to fall under one of the standard data providers listed above, or be quite easy to implement. However, if your api is not standard, it may take more than a few minutes for the data provider to work.