206 lines
8.0 KiB
Markdown
206 lines
8.0 KiB
Markdown
|
# react-admin
|
||
|
|
||
|
A frontend Framework for building admin applications running in the browser on top of REST/GraphQL services, using ES6, [React](https://facebook.github.io/react/) and [Material Design](https://material.io/). Open sourced and maintained by [marmelab](https://marmelab.com/).
|
||
|
|
||
|
[Demo](https://marmelab.com/react-admin-demo/) - [Documentation](https://marmelab.com/react-admin/) - [Releases](https://github.com/marmelab/react-admin/releases) - [Support](http://stackoverflow.com/questions/tagged/react-admin)
|
||
|
|
||
|
[](https://vimeo.com/205118063)
|
||
|
|
||
|
## Features
|
||
|
|
||
|
* Adapts to any backend (REST, GraphQL, SOAP, etc.)
|
||
|
* Complete documentation
|
||
|
* Optimistic rendering (renders before the server returns)
|
||
|
* Relationships (many to one, one to many)
|
||
|
* Internationalization (i18n)
|
||
|
* Conditional formatting
|
||
|
* Themeable
|
||
|
* Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
|
||
|
* Full-featured Datagrid (sort, pagination, filters)
|
||
|
* Filter-as-you-type
|
||
|
* Supports any form layout (simple, tabbed, etc.)
|
||
|
* Data Validation
|
||
|
* Custom actions
|
||
|
* Large library of components for various data types: boolean, number, rich text, etc.
|
||
|
* WYSIWYG editor
|
||
|
* Customize dashboard, menu, layout
|
||
|
* Super easy to extend and override (it's just React components)
|
||
|
* Highly customizable interface
|
||
|
* Can connect to multiple backends
|
||
|
* Leverages the best libraries in the React ecosystem (Redux, redux-form, redux-saga, material-ui, recompose)
|
||
|
* Can be included in another React app
|
||
|
* Inspired by the popular [ng-admin](https://github.com/marmelab/ng-admin) library (also by marmelab)
|
||
|
|
||
|
## Versions In This Repository
|
||
|
|
||
|
* [master](https://github.com/marmelab/react-admin/commits/master) - commits that will be included in the next _patch_ release
|
||
|
|
||
|
* [next](https://github.com/marmelab/react-admin/commits/next) - commits that will be included in the next _major_ or _minor_ release
|
||
|
|
||
|
Bugfix PRs that don't break BC should be made against **master**. All other PRs (new features, bugfix with BC break) should be made against **next**.
|
||
|
|
||
|
## Installation
|
||
|
|
||
|
React-admin is available from npm. You can install it (and its required dependencies)
|
||
|
using:
|
||
|
|
||
|
```sh
|
||
|
npm install --save-dev react-admin
|
||
|
```
|
||
|
|
||
|
## Documentation
|
||
|
|
||
|
Read the [Tutorial](http://marmelab.com/react-admin/Tutorial.html) for a 15 minutes introduction. After that, head to the [Documentation](http://marmelab.com/react-admin/index.html), or checkout the [source code of the demo](https://github.com/marmelab/react-admin-demo) for an example usage.
|
||
|
|
||
|
## At a Glance
|
||
|
|
||
|
```jsx
|
||
|
// in app.js
|
||
|
import 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(
|
||
|
<Admin dataProvider={restProvider('http://localhost:3000')}>
|
||
|
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon}/>
|
||
|
</Admin>,
|
||
|
document.getElementById('root')
|
||
|
);
|
||
|
```
|
||
|
|
||
|
The `<Resource>` component is a configuration component that allows to define sub components for each of the admin view: `list`, `edit`, and `create`. These components use Material UI and custom components from react-admin:
|
||
|
|
||
|
```jsx
|
||
|
// in posts.js
|
||
|
import React from 'react';
|
||
|
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin';
|
||
|
export PostIcon from '@material-ui/core/svg-icons/action/book';
|
||
|
|
||
|
export const PostList = (props) => (
|
||
|
<List {...props}>
|
||
|
<Datagrid>
|
||
|
<TextField source="id" />
|
||
|
<TextField source="title" />
|
||
|
<DateField source="published_at" />
|
||
|
<TextField source="average_note" />
|
||
|
<TextField source="views" />
|
||
|
<EditButton basePath="/posts" />
|
||
|
</Datagrid>
|
||
|
</List>
|
||
|
);
|
||
|
|
||
|
const PostTitle = ({ record }) => {
|
||
|
return <span>Post {record ? `"${record.title}"` : ''}</span>;
|
||
|
};
|
||
|
|
||
|
export const PostEdit = (props) => (
|
||
|
<Edit title={<PostTitle />} {...props}>
|
||
|
<SimpleForm>
|
||
|
<TextInput disabled source="id" />
|
||
|
<TextInput source="title" />
|
||
|
<TextInput source="teaser" options={{ multiLine: true }} />
|
||
|
<TextInput multiline source="body" />
|
||
|
<DateInput label="Publication date" source="published_at" />
|
||
|
<TextInput source="average_note" />
|
||
|
<TextInput disabled label="Nb views" source="views" />
|
||
|
</SimpleForm>
|
||
|
</Edit>
|
||
|
);
|
||
|
|
||
|
export const PostCreate = (props) => (
|
||
|
<Create title="Create a Post" {...props}>
|
||
|
<SimpleForm>
|
||
|
<TextInput source="title" />
|
||
|
<TextInput source="teaser" options={{ multiLine: true }} />
|
||
|
<TextInput multiline source="body" />
|
||
|
<TextInput label="Publication date" source="published_at" />
|
||
|
<TextInput source="average_note" />
|
||
|
</SimpleForm>
|
||
|
</Create>
|
||
|
);
|
||
|
```
|
||
|
|
||
|
## Does It Work With My API?
|
||
|
|
||
|
Yes.
|
||
|
|
||
|
React-admin uses an adapter approach, with a concept called *Data Providers*. Existing providers can be used as a blueprint to design your API, or you can write your own Data Provider to query an existing API. Writing a custom Data Provider is a matter of hours.
|
||
|
|
||
|

|
||
|
|
||
|
See the [Data Providers documentation](https://marmelab.com/react-admin/DataProviders.html) for details.
|
||
|
|
||
|
## Batteries Included But Removable
|
||
|
|
||
|
React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://www.material-ui.com/#/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.
|
||
|
|
||
|
## Run the example
|
||
|
|
||
|
You can run the example app by calling:
|
||
|
|
||
|
```sh
|
||
|
npm install
|
||
|
make run
|
||
|
```
|
||
|
|
||
|
And then browse to [http://localhost:8080/](http://localhost:8080/).
|
||
|
The credentials are **login/password**
|
||
|
|
||
|
## Contributing
|
||
|
|
||
|
Pull requests are welcome. You must follow the coding style of the existing files (based on [prettier](https://github.com/prettier/prettier)), and include unit tests and documentation. Be prepared for a thorough code review, and be patient for the merge - this is an open-source initiative.
|
||
|
|
||
|
You can run the tests (linting, unit and functional tests) by calling
|
||
|
|
||
|
```sh
|
||
|
make test
|
||
|
```
|
||
|
|
||
|
If you have coding standards problems, you can fix them automatically using `prettier` by calling
|
||
|
|
||
|
```sh
|
||
|
make prettier
|
||
|
```
|
||
|
|
||
|
If you want to contribute to the documentation, install jekyll, then call
|
||
|
|
||
|
```sh
|
||
|
make doc
|
||
|
```
|
||
|
|
||
|
And then browse to [http://localhost:4000/](http://localhost:4000/)
|
||
|
|
||
|
*Note*: if you have added a section with heading to the docs, you also have to add it to `docs/_layouts/default.html` (the links on the left) manually.
|
||
|
|
||
|
If you are using react-admin as a dependency, and if you want to try and hack it, here is the advised process:
|
||
|
|
||
|
```sh
|
||
|
# in myapp
|
||
|
# install react-admin from GitHub in another directory
|
||
|
$ cd ..
|
||
|
$ git clone git@github.com:marmelab/react-admin.git && cd react-admin && make install
|
||
|
# replace your node_modules/react-admin by a symbolic link to the github checkout
|
||
|
$ cd ../myapp
|
||
|
$ npm link ../react-admin
|
||
|
# go back to the checkout, and replace the version of react by the one in your app
|
||
|
$ cd ../react-admin
|
||
|
$ npm link ../myapp/node_modules/react
|
||
|
$ make watch
|
||
|
# in another terminal, go back to your app, and start it as usual
|
||
|
$ cd ../myapp
|
||
|
$ npm run
|
||
|
```
|
||
|
|
||
|
**Tip**: If you're on Windows and can't use `make`, try [this Gist](https://gist.github.com/mantis/bb5d9f7d492f86e94341816321500934).
|
||
|
|
||
|
## License
|
||
|
|
||
|
React-admin is licensed under the [MIT License](https://github.com/marmelab/react-admin/blob/master/LICENSE.md), sponsored and supported by [marmelab](http://marmelab.com).
|
||
|
|
||
|
## Donate
|
||
|
|
||
|
This library is free to use, even for commercial purpose. If you want to give back, please talk about it, [help newcomers](https://stackoverflow.com/questions/tagged/react-admin), or contribute code. But the best way to give back is to **donate to a charity**. We recommend [Doctors Without Borders](http://www.doctorswithoutborders.org/).
|