Interested in learning how to create an admin panel? Stuck due to a lack of accessible resources? Don’t worry, this blog will guide you through the process of building a React admin panel step-by-step.
What is a React Admin Panel?
The Admin Panel is the backbone of all websites. Admin panel controls the whole functioning of a website. React is a popular framework used for creating admin panels. You can find some of the best react admin dashboards on bootstrapdash.com
The admin panel is what manages and defines the efficiency of a website. So it is important that you have a strong admin panel that reflects the worth of your business.
How to Create a React Admin Panel?
Here is a detailed guide for building an admin panel using React:
1. Some Prerequisites
Before getting into the process, we need to have npx and Create React app installed. Once this is done, the next step is to create a storage folder for the codebase of the admin panel.
2. Creating Admin Blank Page
The next step is to create a blank React admin page to work with. Use this code line in Create React app for that:
npx create-react-app my-react-admin-page
Now we need to install admin packages and data provider using these line of codes:
cd my-react-admin-page npm install react-admin ra-data-json-server npm start
3. Setting Up Default Page
This can be done by replacing src/app.js with these line of codes:
import { Admin } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com'); function App() { return ( <Admin dataProvider={dataProvider} /> ); } export default App;
4. Setting Up Resource Component
The completion of this step lets the admin dashboard to display a user resource. Follow the below codes to set up the resource component:
import { Admin, Resource,ListGuesser } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com'); function App() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={ListGuesser}/> </Admin> ); } export default App;
Now copy the parts of the table elements that are needed to customize. Once this is done, copy the same into the console as well. Doing so should give a result similar to this:
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" /> <TextField source="phone" /> <TextField source="website" /> <TextField source="company.name" /> </Datagrid> </List> );
The next step is to remove unwanted data like usernames. After changing street address and labels, the line of codes would reduce to this:
import { List, Datagrid, TextField, EmailField } from 'react-admin'; export const UserList = props => ( <List {...props}> <Datagrid rowClick="edit"> <TextField source="address.street" label="Street Address"/> <TextField source="phone" sortable={false}/> <TextField source="company.name" label="Company Name"/></Datagrid> </List> );
Now add the following codes in App.js to insert the above list instead of ListGuesser :
- import {UserList} from “./components/users”;
- <Resource name=”users” list={UserList} />
This process has to be repeated for setting up the posts. Insert the following line of codes to link the post and user-creator:
<p><em>import { Admin, Resource,ListGuesser } from 'react-admin';</em></p> <p><em>import jsonServerProvider from 'ra-data-json-server';</em></p> <p><em>import {UserList} from "./components/users";</em></p> <p><em>const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');</em></p> <p><em>D</em></p> <p><em>function App() {</em></p> <p><em>return (</em></p> <p><em><Admin dataProvider={dataProvider}></em></p> <p><em><Resource name="users" list={UserList}/></em></p> <p><em><Resource name="posts" list={ListsGuesser}/></em></p> <p><em></Admin></em></p> <p><em>);</em></p> <p><em>}</em></p> <p><em>export default App;</em></p>
5. Creating an Edit Button
You can add the edit button to make modifications using the below codes:
import { List, Datagrid,ReferenceField, TextField, EmailField,EditButton } from 'react-admin'; export const PostList = props => ( <List {...props}> <Datagrid rowClick="edit"> <ReferenceField source="userId" reference="users"><TextField source="name" /></ReferenceField> <TextField source="id" /> <TextField source="title" /> <TextField source="body" /> <EditButton/> </Datagrid> </List> );
Now operate with the below codes to pass an edit prop:
import { Admin, Resource,ListGuesser,EditGuesser } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; import {UserList} from "./components/users"; import {PostList} from "./components/posts"; const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com'); function App() { return ( <Admin dataProvider={dataProvider}> <Resource name="users" list={UserList}/> <Resource name="posts" list={PostList} edit={EditGuesser}/> </Admin> ); } export default App;
Now copy the generated edits into src/components/posts.js. The result should be this:
<export const PostEdit = props => ( <Edit {...props}> <SimpleForm> <ReferenceInput source="userId" reference="users"> <SelectInput optionText="id"/> </ReferenceInput> <TextInput source="id"/> <TextInput source="title"/> <TextInput source="body"/> </SimpleForm> </Edit>
Now the PostCreate and PostEdit components have to be added into the post resource using these code operation:
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate}/>
6. Creating a New Directory
In this step, we create a src/providers/authProvider.js. file using these line of codes:
export default { login: ({ username }) => { localStorage.setItem('username', username); return Promise.resolve(); }, logout: () => { localStorage.removeItem('username'); return Promise.resolve(); }, checkError: ({ status }) => { if (status === 401 || status === 403) { localStorage.removeItem('username'); return Promise.reject(); } return Promise.resolve(); }, checkAuth: () => { return localStorage.getItem('username') ? Promise.resolve() : Promise.reject(); }, getPermissions: () => Promise.resolve(), };
Now add authProvider={authProvider} prop and the authProvider component with these codes:
import authProvider from "./providers/authProvider";
You will have successfully created a very basic React admin panel upon the completion of these code operations above!
Summing Up
As you might have figured by now, creating a React admin panel consists of a lot of code operations. A fully functional admin panel requires much more operations to be done. If you want to choose a shortcut and skip these operations with codes, you can consider using web app generators.