Skip to main content

React-admin ile React Uygulamalarında Yönetici (Admin) Arayüzü Oluşturma

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, react-admin kütüphanesini kullanarak bir React uygulamasına hızlıca yönetici paneli eklemeyi öğreneceksiniz.
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.
Bu sayede uygulamanızın verilerini dakikalar içinde yönetilebilir hale getireceksiniz.

🚧 Ön Koşullar​

Başlamadan önce aşağıdakilere sahip olmalısınız:

  • Yerel Node.js geliştirme ortamı
  • Temel React bilgisi
  • Bu rehber Node v16+, npm v7+, react-admin v3.17+ sürümleriyle test edilmiştir

1️⃣ Proje Kurulumu​

Yeni bir React uygulaması oluşturun:

npx create-react-app yonetim-paneli-ornek

Bu komut boş bir React projesi oluşturur.

Proje dizinine geçin:

cd yonetim-paneli-ornek

react-admin ve veri sağlayıcı paketlerini kurun:


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

Bilgi: ra-data-json-server, API ile iletişimi sağlayan veri sağlayıcıdır. Eğer kendi API’niz JSON Server standardına uymuyorsa, kendi dataProvider’ınızı yazabilirsiniz.

2️⃣ Temel Admin Bileşenini Eklemek​

src/App.js dosyasını açın ve temel Admin bileşenini tanımlayın:


import { Admin } 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={dataProvider} />;
}

export default App;

Projeyi çalıştırın:


npm start

Tarayıcıda “Welcome to React-admin” yazısını görüyorsanız kurulum tamamdır.

3️⃣ Verileri Listeleme – ListGuesser Kullanımı​

Şimdi kullanıcıları listeleyelim. ListGuesser, API’den gelen verileri otomatik olarak algılayıp tablo şeklinde gösterir.


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>
  );
}

Bu yapı “users” endpoint’inden aldığı verileri tabloya dönüştürür.

Ancak ListGuesser geçicidir. Şimdi özel bir bileşenle kalıcı hale getirelim.

4️⃣ Özelleştirilmiş Kullanıcı Listesi (UserList) Oluşturma​

Yeni dosya: src/Kullanicilar.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>
);

Bu bileşen kullanıcıların tüm temel bilgilerini listeler.

App.js içinde güncelleyin:


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

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

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

Artık “Adres” ve “Şirket” gibi etiketler daha okunabilir hale geldi.

5️⃣ Düzenleme ve Yeni Kullanıcı Oluşturma (Edit & Create)​

✏️ Düzenleme Formu (KullaniciDuzenleme)


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>
);

id alanı düzenlenemez şekilde tanımlandı.

➕ Yeni Kullanıcı Oluşturma (KullaniciOlusturma)


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>
);

App.js dosyasını son haline getirin:


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={dataProvider}>
      <Resource
        name="users"
        list={KullaniciListesi}
        edit={KullaniciDuzenleme}
        create={KullaniciOlusturma}
      />
    </Admin>
  );
}

Uygulamayı yenilediğinizde “Yeni Oluştur” düğmesi otomatik olarak belirecektir.

💬 Sıkça Sorulan Sorular (SSS)​

  1. react-admin’in Optimistic Rendering özelliği nedir?

Kullanıcı bir değişiklik yaptığında arayüz hemen güncellenir; işlem arka planda doğrulanır. Bu sayede kullanıcı beklemeden sonuç görür.

  1. API’m JSON Server formatında değilse ne yapabilirim?

Kendi veri sağlayıcınızı (dataProvider) tanımlayabilirsiniz. react-admin bu konuda geniş dokümantasyon sunar.

  1. Sadece listeleme veya düzenleme yapabilir miyim?

Evet. Resource bileşeninde sadece list, edit veya create özelliklerini tanımlayabilirsiniz.

  1. Material-UI teması değiştirilebilir mi?

Elbette. react-admin tamamen Material-UI üzerine kurulu ve özelleştirmeye açıktır.

  1. react-admin hangi tür API’lerle çalışır?

REST, GraphQL veya özel JSON API’leriyle uyumludur.

🏁 Sonuç​

Bu rehberde, React-admin ile REST API verilerini yöneten modern bir yönetici paneli oluşturmayı öğrendiniz. Material-UI temasıyla birleşen React-admin, CRUD işlemlerini kolaylaştırır ve geliştirme süresini ciddi ölçüde azaltır.

🚀 Gerçek API’lerle denemek için Rabisu Bulut platformunda hemen uygulayın!

yaml