React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or GraphQL APIs, utilizing React, ES6, and Material UI. React admin is used for creating admin panels for business, also it is an open-sourced project and managed by the company called Marmelab. Whose earlier name was admin-on-rest.
React-admin Features
- Operates over any back-end platform like REST, GraphQL, SOAP, and many more.
- Extremely fast UI because of optimistic rendering, the rendering is completed before the server returns.
- It is in cooperation with platforms like redux, react-final-form, material-UI, react-router, reselect, etc.
- Has the features to move back from the updates and delete them for a few moments.
- Finalized react admin documentation.
- Many to one, one to many relationships are featured.
- Enables Data Validation.
- Internationalization (i18n)
- Supports Conditional formatting.
- Compatible with any authentication provider, REST API, OAuth, Basic Auth, etc.
- Themeable.
- Features a full DataGrid comprising of the sort, pagination, and filters.
- Any layout is supported like simple, tabbed, etc.
- Filter-as-you-type.
- A vast library of components is available of several data types (Boolean, number, rich text, etc.)
- Customized actions.
- Customizable menu, layout, dashboard.
- Provides a WYSIWYG editor.
- Like React components it is effortless to extend and override.
- Thoroughly customizable interface.
- Connection with multiple backends.
- Can be integrated with other react apps.
- Influenced by the popular libraries ng-admin and Marmelab.
Versions in this Archive
- Master – obligated that it will be included in the upcoming patch release.
- Next – obligated that it will be installed in the forthcoming major or minor release.
Master should be made against the Bugfix PRs that do not break BC. Other PRs like Bugfix with BC break and new features should be made against next.
React-admin Installation
React-admin and its dependencies can be downloaded from npm using this command:
npm install react-admin
(or)
yarn add react-admin
React admin Documentation
For a 30 minutes introduction, you can read the tutorial. After that, read the react admin documentation or the source code of the demo as an example.
At a Glance
// in app.js import * as React from "react"; import { render } from 'react-dom'; import { Admin, Resource } from 'react-admin'; import restProvider from 'ra-data-simple-rest'; import { PostList, PostEdit, PostCreate, PostIcon } from './posts'; render( , document.getElementById('root') );
The is a configuration component that permits you to define sub Components for every admin view: list, edit and create. Custom-built components and material UI are used by them from the react-admin
// inside the posts.js. import * as React from "react"; import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin'; import BookIcon from '@material-ui/core/svg-icons/action/book'; export const PostIcon = BookIcon; export const PostList = (props) => ( ); const PostTitle = ({ record }) => { return Post {record ? `"${record.title}"` : ''}; }; export const PostEdit = (props) => ( } {...props}> ); export const PostCreate = (props) => ( );
Will it operate on my API?
React-admin follows an adapter approach, along with Data providers. You can use existing data providers as a draft for designing your API. Instead, you can create a custom Data Provider in place of using an existing one. Then connect it to an existing API. But developing a custom data Provider is a task that will take several hours to complete. You can see the react admin documentation of Data Providers for further details.
Components include, but can be removed
React-admin is built over material UI, besides the controller functions that are performed in the Redux method. It is built as a vast collection of roughly connected react components, and it is effortless to change a segment of it with your own. For example, you can use a self-designed DataGrid rather than REST or bootstrap in place of Material UI.
Examples:
Multiple numbers of examples of react-admin can be located in the examples folder:
- Simple (CodeSandbox): it is a simple app with posts, comments, and users that is used for our e2e tests.
- tutorial (from CodeSandbox): this example app is designed according to the method shown in the tutorial
- demo (Live): this is the official react-admin demo of a fictional poster shop admin. This example can be called a complete react-admin app.
You can execute these examples from the following commands and then go to the URL displayed in your console.
# at the beginning of the react-admin project write. make install # or. yarn install # launch the simple application. make run-simple # launch the tutorial application. make build make run-tutorial # launch the demo application. make build make run-demo
Contribute to React Admin
If you wish to help to improve react-admin, you are always welcome! There’s a big list of services to which you can contribute.
Bug triaging:
This is a straightforward task. All you have to do is check for new issues on GitHub and see if they are reproducible by following the issued template. If a template is not available, you can comment on the topic for providing one. If you successfully reproduced the problem by following the instructions, then comment about it. And if not, then tell that something is missing.
Answer support questions:
This is another way to contribute by answering questions on StackOverflow. You don’t need to be extremely experienced with react-admin for this. There are several simple questions for beginners too.
Bug fixing:
Bug fixing pull requests are always helpful. There are a bunch of issues you can resolve. This is the most excellent way to contribute to our code. There are bug issues marked with the “Good First Issue” in the bug tracker that is perfect, to begin with.
Add your feature:
You can open a pull request for adding your feature from the next branch. But for maintaining the react-admin code small and convenient, we do not accept every feature request. But you can try to make your feature an additional npm package. If you doubt, you can issue a “feature request” before developing the feature to see if the core team accepts it or not.
For every pull request, you are supposed to follow the coding pattern of the existing files (based on prettier) and also incorporate unit tests and properly react admin documentation. During the process, you should be prepared for a thorough review of your code before it is accepted. Also, be patient because the review can take some time to be approved as it is an open-source project.
Tip: You can use the make command to see the list of available commands. Most of the react-admin code by the developers is automated in the makefile.
Setup:
You can duplicate the entire archive, and then execute the command make install to get the required dependencies. Then compile resources from Typescript to Javascript from the command make build.
Testing your changes made in the Example Apps
Most of the time, a simple example is used to check the app. To launch the example on port 8080, execute the command make a run (http://localhost:8080).
A watch command is included in the command. That shows the live changes made by you in the simple example on the browser.
The example is the same app that is used by CodeSandbox for reproducing errors whose source code is located in examples/simple
(See: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).
Sometimes the simple example is very limited. In such a situation, you can use the demo example that is more complete.
make run-demo is used for initializing the demonstration example, in which REST data provider is already included.
You can launch it with a GraphQL dataProvider with this command to make run-graphql-demo.
To watch the changes made in the packages, you will need to rebuild the react-admin packages with the command
make build
or the more focused
make build-ra-core make build-ra-ui-materialui
Because we use Create React App, we are unable to see the changes made in the demo app, to compensate for this we install the admin packages.
The advantage is that the API is imitated over the client-side instead of the server. Hence these examples do not need a server for their execution.
Test changes made in your app
Instead of npm, you can use yarn to provide your app with a local check of the react-admin package. The following command can check your changes made in the react-admin package:
# list your local react-admin as a linkable package. $ cd /code/path/to/react-admin/packages/react-admin && yarn link # Replace the npm-installed version with a symlink to your local version. $ cd /code/path/to/myapp/ && yarn link react-admin #You will need to register the version of your app as a linkable package if you get stuck in trouble with React red-screen. $ cd /code/path/to/myapp/node_modules/react && yarn link # After that you can interchange the npm-installed version of React with a symlink to your app’s node_modules version $ cd /code/path/to/react-admin/ && yarn link react # Rebuild the packages with the same version of React $ cd /code/path/to/react-admin/ && make build # Return to your app and ensure all dependencies have resolved $ cd /code/path/to/myapp/ && yarn install # Start your app $ yarn start
Automated tests
Automated teas are essential in the development process. To perform the tests, you can write the following command:
make test
This command will execute all the tests like linting, unit, and functional tests.
For testing specific parts like units, components, etc. you need to run jest. Jest runs a specific subset of tests from a group of tests. It can run tests automatically when changes are made in the program code, bypassing options with the command
yarn jest
Also, tests on modified components can also be executed automatically when changes are made. For this, you will have to use a git pre-commit hook. This means that you will not be able to perform changes if the testing files break the test.
If you are executing end-to-end tests, you can start cypress to make your job easy. It will automatically handle the testing on end-to-end files. You can experience the demonstration on your own while performing tests on the simple example app () and then launching cypress on a different node. To open the simple example, use the commands:
make run-simple
(or)
yarn run-simple
with the command:
make test-e2e-local
(or)
yarn test-e2e-loca
you can start cypress.
Coding Standards
In React-admin, you will strictly need to follow the coding standards. If you are in trouble with this issue, you can resolve them with prettier by using the command:
make prettier
These commands are executed at every change or commit, such that you don’t need to worry about the coding standard.
React admin Documentation
If you wish to contribute to making the react admin documentation better or add something new you can install Jekyll and then call the command
make doc
After that, go to http://localhost:4000/, to start with the react admin documentation part.
License
React-admin has the MIT license and is sponsored and supported by Marmelab.