React Admin入門｜Viteで管理画面を作る基本手順

React Adminとは

React Adminは、RESTやGraphQLなどのAPIを利用する管理画面を構築するためのReactフレームワークです。旧記事は環境情報だけだったため、現行の導入手順として全面的に書き直しました。

重要なのは画面部品よりData Providerです。バックエンドAPIの形式をReact Adminが期待する取得・作成・更新・削除のインターフェースへ変換します。

Viteプロジェクトへ導入

npm create vite@latest admin-app -- --template react-ts
cd admin-app
npm install
npm install react-admin ra-data-json-server
npm run dev

最小構成

実サービスでは認証、認可、入力検証、エラー処理が必要です。ListGuesserは構造確認には便利ですが、本番画面は必要なFieldを明示して作ります。

import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

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

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

よくある失敗

• APIレスポンス形式を確認せずData Providerを選ぶ
• フロント側で非表示にしただけで認可できたと考える
• 総件数を返さず、一覧のページネーションが壊れる
• 本番でもGuesserコンポーネントへ依存する

参考資料

• React Admin documentation
• Vite Getting Started