React Admin

Oct 04, 2019 • ☕️ 1 min read

React Admin (react-admin) is the frontend framework to build admin dashboard/panel with React, Material UI design, and adapts to any RESTful, GraphQL or custom APIs.

Home Page - Documentation - Demo

react-admin is more than just a HTML/CSS admin template. It is a complete framework to build any dashboard in just couple of hours. It provides data adapters, CRUD components, Authentication & Authorization, Theming, Translation and an ecosystem of awesome supporting packages.

The best part is react-admin can be used standalone or integrated into existed React app. I recommend to use as a standalone app because its update rate is quite low and will restrict react and react-dom versions.

This solution is very powerful; I’ve been using react-admin in many projects and the developer experience is awesome.

Setup

React-admin uses React. We’ll use Facebook’s create-react-app to create an empty React app, and install the react-admin package:

npm install -g create-react-app
create-react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server prop-types
yarn start

Features

- Relationships support
- Full-featured datagrid
- Undo
- Rich text editor
- Filter as you type
- Internationalization
- Accessible
- Optimistic rendering
- Data validation

Already works with your API

React-admin supports most REST and GraphQL dialects, and writing your own adapter takes minutes.

- Open API
- Json API
- GraphQL
- API Platform
- Django
- Firebase
- Hasura
- Prisma
- Spring

Customizable by design

Choose among many variants, or replace any component by your own.

- Theming
- UI framework
- Custom fields
- Custom layout
- Authentication plugins
- Custom routes

Built on top of state-of-the-art Tech

- React
- Material UI
- React Router
- Redux
- Redux Saga
- Redux Form

License

React-admin is licensed under the MIT License, sponsored and supported by marmelab.

Reading More

Yeoman Scaffolding System

Scaffolding system allows for rapidly getting started on new projects and streamlines the maintenance of existing projects.

The hype microservices. Should I switch to it?

Microservices are an architectural and organizational approach to software development where software is composed of small independent services that communicate over well-defined APIs

Cracking The Frontend Interview, Part 2: HTML

I discuss some HTML topics like living standard, semantic markup, accessibility, and more

AssemblyScript - TypeScript to Wasm Compiler

A tool that makes WebAssembly more accessible to JavaScript developers by compiling a strict subset of Typescript to Wasm using Binaryen