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-server
v3.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^> [email protected]<^>
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
コンポーネントを追加します。
src / App.js
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
が正しく構成されていることを確認するメッセージが表示されます。
OutputWelcome 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
を使用して、すべてのユーザーのリストを自動的にレンダリングします。
src / App.js
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
からのすべてのインポートを追加してください。
src / Users.js
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
を新しく作成したコンポーネントに置き換える必要があります。
src / App.js
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
列にラベルを追加して、もう少し読みやすくします。
src / Users.js
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
です。
src / App.js
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
フィールドを編集可能にしたくないでしょう。
src / users.js
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
をカスタムコンポーネントに置き換えます。
src / App.js
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
フィールドは必ず削除してください。
src / Users.js
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
に追加します。
src / 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
は作成ボタンをユーザーのリストに追加します!
結論
この記事では、react-admin
を使用して、JSONPlaceholder)APIを使用する管理インターフェースを構築しました。
react-admin
を使用して素敵な小さな管理インターフェースを作成しましたが、それが提供するものの表面をかろうじてかじっただけです。 react-admin
は高度にカスタマイズ可能です。これまでに使用したすべてのコンポーネント(およびそれ以上)の機能と外観をカスタマイズできます。 詳細については、react-adminのドキュメントを参照してください。