Creating an Admin Interface in React Applications with React-admin

🎯 What Will You Learn in This Guide?

In this guide, you will learn how to quickly add an admin panel to a React application using the react-admin library.
JSONPlaceholder gibi bir REST API'den veri çeken, listeleme, düzenleme ve oluşturma (CRUD) işlemleri yapabilen bir arayüzü adım adım oluşturacağız.
In this way, you will make your application's data manageable in minutes.

🚧 Prerequisites

Before you start, you must have the following:

Local Node.js development environment
Basic React knowledge
This guide has been tested with Node v16+, npm v7+, react-admin v3.17+

1️⃣ Project Setup

Create a new React app:

npx create-react-app yonetim-paneli-ornek

This command creates an empty React project.

Change to the project directory:

cd yonetim-paneli-ornek

Install react-admin and data provider packages:

npm install react-admin ra-data-json-server

Information: ra-data-json-server is the data provider that enables communication with the API. If your own API does not comply with the JSON Server standard, you can write your own dataProvider.

2️⃣ Adding the Basic Admin Component

Open src/App.js and define the base Admin component:

import &#123; Admin &#125; from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

// JSONPlaceholder API'yi veri sağlayıcı olarak tanımlıyoruz
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return <Admin dataProvider=&#123;dataProvider&#125; />;
}

export default App;

Run the project:

npm start

If you see “Welcome to React-admin” in the browser, the installation is complete.

3️⃣ Listing Data – Using ListGuesser

Now let's list the users. ListGuesser automatically detects the data coming from the API and displays it in tabular form.

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=&#123;dataProvider&#125;>
      <Resource name="users" list=&#123;ListGuesser&#125; />
    </Admin>
  );
}

This structure converts the data received from the “users” endpoint into a table.

However, ListGuesser is temporary. Now let's make it permanent with a custom component.

4️⃣ Creating a Customized User List

New file: src/Users.js

import { List, Datagrid, TextField, EmailField, UrlField } from 'react-admin';

export const KullaniciListesi = props => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="username" />
      <EmailField source="email" />
      <TextField source="address.street" label="Adres" />
      <TextField source="phone" />
      <UrlField source="website" />
      <TextField source="company.name" label="Şirket" />
    </Datagrid>
  </List>
);

This component lists all the basic information of the users.

Update in app.js:

import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import &#123; KullaniciListesi &#125; from './Kullanicilar';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider=&#123;dataProvider&#125;>
      <Resource name="users" list=&#123;KullaniciListesi&#125; />
    </Admin>
  );
}

Now labels like “Address” and “Company” are more readable.

5️⃣ Editing and Creating a New User (Edit & Create)

✏️ Edit Form (UserEdit)

import { Edit, SimpleForm, TextInput } from 'react-admin';

export const KullaniciDuzenleme = props => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="id" disabled />
      <TextInput source="name" />
      <TextInput source="username" />
      <TextInput source="email" />
      <TextInput source="address.street" label="Adres" />
      <TextInput source="phone" />
      <TextInput source="website" />
      <TextInput source="company.name" label="Şirket" />
    </SimpleForm>
  </Edit>
);

The id field is defined as non-editable.

➕ Creating a New User (Creating User)

import { Create, SimpleForm, TextInput } from 'react-admin';

export const KullaniciOlusturma = props => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <TextInput source="username" />
      <TextInput source="email" />
      <TextInput source="address.street" label="Adres" />
      <TextInput source="phone" />
      <TextInput source="website" />
      <TextInput source="company.name" label="Şirket" />
    </SimpleForm>
  </Create>
);

Finalize the App.js file:

import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { KullaniciListesi, KullaniciDuzenleme, KullaniciOlusturma } from './Kullanicilar';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider=&#123;dataProvider&#125;>
      <Resource
        name="users"
        list=&#123;KullaniciListesi&#125;
        edit=&#123;KullaniciDuzenleme&#125;
        create=&#123;KullaniciOlusturma&#125;
      />
    </Admin>
  );
}

When you refresh the app, the “Create New” button will automatically appear.

💬 Frequently Asked Questions (FAQ)

What is the Optimistic Rendering feature of react-admin?

When the user makes a change, the interface is updated immediately; The transaction is verified in the background. In this way, the user sees results without waiting.

What can I do if my API is not in JSON Server format?

You can define your own data provider (dataProvider). react-admin provides extensive documentation on this subject.

Can I just list or edit?

Yes. You can only define list, edit or create properties in the Resource component.

Can the Material-UI theme be changed?

Certainly. react-admin is completely based on Material-UI and is open to customization.

What types of APIs does react-admin work with?

Compatible with REST, GraphQL or custom JSON APIs.

🏁 Result

In this guide, you learned how to create a modern admin panel that manages REST API data with React-admin. React-admin combined with the Material-UI theme simplifies CRUD operations and significantly reduces development time.

🚀 Apply now on the GenixNode platform to try it with real APIs!

yaml

🎯 What Will You Learn in This Guide?​

🚧 Prerequisites​

1️⃣ Project Setup​

2️⃣ Adding the Basic Admin Component​

3️⃣ Listing Data – Using ListGuesser​

4️⃣ Creating a Customized User List​

5️⃣ Editing and Creating a New User (Edit & Create)​

💬 Frequently Asked Questions (FAQ)​

🏁 Result​