react-adminとReactで管理インターフェースを作成する方法

序章

APIを公開するアプリケーションでは、多くの場合、アプリケーションの背後にあるデータを表示および編集するための管理者（admin）ページが必要になります。 通常、インターフェースを作成するには、インターフェースを構築するという骨の折れるプロセスが必要です。その後、APIとの間でデータをGETまたはPOSTするすべてのリクエストを手動で処理します。

react-admin は、（REST、GraphQL、カスタム）APIを自動的に使用し、エレガントな Material-UI フレームワークをテーマにした管理インターフェースをすばやく構築できるようにすることで、この煩わしさを軽減します。

この記事では、react-adminを使用して、 JSONPlaceholderAPIを使用する管理インターフェースを構築します。

前提条件

• Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
• Reactにある程度精通している。 React.jsシリーズのコーディング方法を読むことができます。

このチュートリアルは、ノードv16.6.1、npm v7.20.3、react v17.0.2、react-admin vv3.17.1、およびra-data-json-serverv3.17.1で検証されました。 。

ステップ1—プロジェクトの設定

まず、create-react-appを使用して新しいReactアプリケーションを作成します。

npx create-react-app react-admin-example

次に、新しいプロジェクトディレクトリに移動します。

cd react-admin-example

次に、react-adminの依存関係をインストールします。

npm install react-admin@<3.17.1^> ra-data-json-server@3.17.1<^>

ra-data-json-serverは、データプロバイダーと呼ばれるものです。 データプロバイダーは、react-adminがAPIと通信できるようにするものです。 ここでは、JSONPlaceholderが JSONサーバーを利用しているため、ra-data-json-serverを使用しています。 JSONPlaceholderのAPIと完全に一致しないAPIを使用している場合は、独自のデータプロバイダーを実装する必要があります。 詳細については、データプロバイダーのドキュメントを参照してください。

この時点で、react-adminとra-data-json-serverがインストールされた新しいReactプロジェクトがあります。

ステップ2—アプリケーションの構築

まず、コードエディタでsrc/App.jsを開き、ルートAdminコンポーネントを追加します。

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;

ファイルへの変更を保存し、アプリケーションを実行します。

npm run start

次に、ブラウザでアプリケーションを開きます。 react-adminが正しく構成されていることを確認するメッセージが表示されます。

Output
Welcome to React-admin
Your application is properly configured.
Now you can add a <Resource> as child of <Admin>.

これで、APIエンドポイントの管理インターフェースへのマッピングを開始できます。

ステップ3—ListGuesserを使用してデータをマッピングする

新しいエンドポイントを追加するときは常に、最初にguesserを使用します。 これにより、APIからデータが取得され、出力するコンポーネントの種類が推測されます。 追加する最初のエンドポイントはusersで、ListGuesserを使用してすべてのユーザーのリストを自動的にレンダリングします。

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;

ファイルへの変更を保存し、ブラウザでアプリケーションを観察します。

ユーザーのリストが自動的に入力される管理インターフェースがあります！ 彼らの名前、メールアドレス、電話番号などを含みます！

ほぼ完璧に機能しますが、推測者が永続的に使用されることを意図したものではありません。 彼らは私たちが始めるのを助けるためだけにあります。 推測者（DevToolsコンソールにあります）から推測されたリストの出力を取得し、それを使用してカスタムリストコンポーネントを作成します。

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

この出力を取得して、Users.jsという名前の新しいファイルに貼り付けます。その間、react-adminからのすべてのインポートを追加してください。

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

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

次に、ListGuesserを新しく作成したコンポーネントに置き換える必要があります。

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

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

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

export default App;

素晴らしい！ ブラウザウィンドウで、リストがListGuesserの場合とまったく同じように機能することを確認できます。

UserListを少し改善するために、いくつか変更を加えましょう。 website列をUrlFieldに変更して、クリックできるようにします。 また、address列とcompany列にラベルを追加して、もう少し読みやすくします。

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

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" label="Address" />
      <TextField source="phone" />
      <UrlField source="website" />
      <TextField source="company.name" label="Company" />
    </Datagrid>
  </List>
);

Address.street の代わりに、ラベルはAddressと表示されます。 Company.name の代わりに、ラベルはCompanyと表示されます。 ずっといい！

ステップ4— EditGuesserを使用して、作成、編集、削除をマップします

私たちの管理インターフェースは、ユーザーを表示しようとしているだけの場合はうまく機能しますが、ユーザーを作成、編集、または削除したい場合はどうでしょうか。 ありがたいことに、react-adminにもこれを行う方法があります。 もう一度推測を使用しますが、今回はEditGuesserです。

import {
  Admin,
  Resource,
  EditGuesser,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
} from './Users';

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

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

export default App;

それでは、ブラウザで管理者を開き、任意のユーザーをクリックしてみましょう。 これにより編集インターフェースが表示され、もう一度、推測者は良い仕事をします！

前と同じことを行い、推測からの出力をコピーして、Users.jsファイルに貼り付けます。 また、id列をdisabled入力に変更します。 idフィールドを編集可能にしたくないでしょう。

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

export const UserList = props => ( ... );

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

最後に、EditGuesserをカスタムコンポーネントに置き換えます。

import {
  Admin,
  Resource,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
  UserEdit,
} from './Users';

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

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

export default App;

これで、機能的な編集インターフェイスができました。 残念ながら、JSONPlaceholderは編集を許可していません。 ただし、ユーザーを編集して、何が起こるかを観察してみてください。 react-adminが元の形式に戻す前に、ユーザーの変更が1秒間発生します。 これは、react-adminがオプティミスティックレンダリングを使用しているためです。 これは、ユーザーが変更を加えると、react-adminは、バックグラウンドで更新クエリを送信している間、その変更をすぐに表示することを意味します。 これにより、管理インターフェイスを更新する前にサーバーの応答を待つ必要がなく、シームレスなユーザーエクスペリエンスが可能になります。

私たちが今欠けているのは、新しいユーザーを作成する方法だけです。 作成フォームは編集フォームに非常に似ているため、UserEditコンポーネントをコピーして、新しいコンポーネントUserCreateを呼び出すことができます。 ユーザーは作成前にidを使用できないため、idフィールドは必ず削除してください。

import {
  List,
  Datagrid,
  TextField,
  EmailField,
  UrlField,
  Edit,
  SimpleForm,
  TextInput,
  Create,
} from 'react-admin';

export const UserList = props => ( ... );

export const UserEdit = props => ( ... );

export const UserCreate = props => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <TextInput source="username" />
      <TextInput source="email" />
      <TextInput source="address.street" label="Address" />
      <TextInput source="phone" />
      <TextInput source="website" />
      <TextInput source="company.name" label="Company" />
    </SimpleForm>
  </Create>
);

次に、新しいコンポーネントをApp.jsに追加します。

import {
  Admin,
  Resource,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
  UserEdit,
  UserCreate,
} from './Users';

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

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource
        name="users"
        list={UserList}
        edit={UserEdit}
        create={UserCreate}
      />
    </Admin>
  );
}

export default App;

そして、ちょうどそのように、react-adminは、ユーザーのリストにCreateボタンを追加します。

結論

この記事では、react-adminを使用して、JSONPlaceholder）APIを使用する管理インターフェースを構築しました。

react-adminを使用して素敵な小さな管理インターフェースを作成しましたが、それが提供するものの表面をかろうじてかじっただけです。 react-adminは高度にカスタマイズ可能です。これまでに使用したすべてのコンポーネント（およびそれ以上）の機能と外観をカスタマイズできます。 詳細については、react-adminのドキュメントを参照してください。