Quantcast
Channel: kakakakakku blog
Viewing all articles
Browse latest Browse all 936

React-Admin を1時間で速習できる!React-Admin Tutorial

$
0
0

React-Adminを使うことになるかもしれず,今まで使ったことがなかったので,まずは「React-Admin Tutorial」を試してみた❗️React-Admin を使ったフロントエンドの実装と基本的な仕組みを速習できて良かった💡おすすめ \( 'ω')/

ちなみに 30 minutes tutorialって書いてあるのは速すぎると思う😅コードを読みながら進めたり,気になった部分をドキュメントで調べながらだと普通に1時間以上かかった〜

marmelab.com

React-Admin Tutorial 実施ログ

React-Admin Tutorial の実施ログを抜粋してまとめておく📝

まず,npm init react-admin test-adminコマンドを実行してプロジェクトをセットアップする.そして npm run devコマンドを実行すると,すぐに React-Admin の初期画面が表示できる👌

React-Admin 初期画面

React-Admin Tutorial ではバックエンド API として JSONPlaceholder/users API と /posts API を使う.

jsonplaceholder.typicode.com

セットアップ時にデータプロバイダーも作られていて,すぐに API を呼び出せる.そして動作確認用の ListGuesserコンポーネントを追加したら,すぐに Users 一覧画面を実装できた.その後は Datagridコンポーネントなどを使って一覧画面をカスタマイズしていく❗️

marmelab.com

marmelab.com

Users 一覧画面

次に Posts 一覧画面を実装するときに ReferenceFieldコンポーネントが出てくる📝簡単に言うとリソース間の参照をしてくれて,今回だと Posts.user_idUsers.idに紐付けてくれる🔗 便利だ〜

marmelab.com

そして Createコンポーネントと SimpleFormコンポーネントを使って Posts 登録画面も簡単に実装できた.ちなみに React-Admin では「楽観的アップデート (optimistic updates)」という仕組みがあって,Save ボタンを押してから数秒後に API が呼び出されると書いてあった💡そして数秒以内であれば取り消すこともできる.Gmail の 元に戻すに似てる〜

marmelab.com

marmelab.com

Posts 登録画面

後半では Posts 一覧画面に検索とフィルタを実装したりもする🔎

Posts 一覧画面(検索とフィルタ)

終盤ではログイン画面も作る🔑今回は localStorage に設定する超簡易的な仕組みだけど,React-Admin には Auth0 / Amazon Cognito などの Auth Provider もあるから柔軟に実装できそう.

marmelab.com

ログイン画面

まとめ

「React-Admin Tutorial」は1時間ぐらいで React-Admin を速習できる素晴らしいコンテンツだった❗️基本は理解できたので,あとは他のドキュメントも読みつつ実装していこうと思う.ちなみにドキュメントに Beginner Modeというトグルがあるのもよく考えられていて良いな〜と思った👏


Viewing all articles
Browse latest Browse all 936

Latest Images

Trending Articles