How To Create an Admin Panel in React

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>&lt;Admin dataProvider={dataProvider}&gt;</em></p>

<p><em>&lt;Resource name="users" list={UserList}/&gt;</em></p>

<p><em>&lt;Resource name="posts" list={ListsGuesser}/&gt;</em></p>

<p><em>&lt;/Admin&gt;</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.