react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab.
In this tutorial we will use react-admin to build an admin interface that uses the JSONPlaceholder API.
install the for react-admin:
npm install react-admin
C:\reactdev\myreactdev>npm install react-admin
https://github.com/marmelab/react-admin
Install ra-data-json-server
JSON Server Data Provider For React-Admin
npm install --save ra-data-json-server
C:\reactdev\myreactdev>npm install --save ra-data-json-server
https://www.npmjs.com/package/ra-data-json-server
JSON Server Data Provider for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services.
https://jsonplaceholder.typicode.com/users
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import {
Admin,
Resource,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
UserList,
UserEdit,
UserCreate,
} from './Users';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
function App() {
return (
<Admin dataProvider={dataProvider}>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
/>
</Admin>
);
}
export default App;
src/Users.js
//src/Users.js
import {
List,
Datagrid,
TextField,
EmailField,
UrlField,
Edit,
SimpleForm,
TextInput,
Create,
} from 'react-admin';
export const UserList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="name" />
<TextField source="username" />
<EmailField source="email" />
<TextField source="address.street" label="Address" />
<TextField source="phone" />
<UrlField source="website" />
<TextField source="company.name" label="Company" />
</Datagrid>
</List>
);
export const UserEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput source="id" disabled />
<TextInput source="name" />
<TextInput source="username" />
<TextInput source="email" />
<TextInput source="address.street" label="Address" />
<TextInput source="phone" />
<TextInput source="website" />
<TextInput source="company.name" label="Company" />
</SimpleForm>
</Edit>
);
export const UserCreate = props => (
<Create {...props}>
<SimpleForm>
<TextInput source="name" />
<TextInput source="username" />
<TextInput source="email" />
<TextInput source="address.street" label="Address" />
<TextInput source="phone" />
<TextInput source="website" />
<TextInput source="company.name" label="Company" />
</SimpleForm>
</Create>
);
