React Admin

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab.

管理画面を作るのに最適化されたReactアプリケーションフレームワーク

REST/GraphQL APIをサポート

Marmelab社によってメンテナンスされているOSS

所感

SimpleよりもEasy

Redux Storeの再利用が活きるシーンが多い

部分的なリフレッシュ

Reactのプラクティスが詰め込まれている

React hooks

Context

型

でもまだ完璧ではなさそう

権限

ログイン、auth周りのサポートがある

Loginコンポーネント, authProviderなど

ログインしたユーザのロールに応じてroutesを動的に分けるテクニックが使える

テスト

Unit testingがあまり推奨されてない

By default, react-admin acts as a declarative admin configuration: list some resources, define their controllers and, plug some built-in components or your own to define their fields or inputs.

Thus, unit testing isn’t really needed nor recommended at first, because the internal API of the framework is already tested by its maintainers and each custom component can be tested by its own by mocking react-admin.

気持ちはわかる

code:test-utils.tsx

const AllTheProviders: FC = ({ children }) => {

return (

<TranslationProvider i18nProvider={i18nProvider}>

<MuiThemeProvider theme={theme}>

<TestContext>{children}</TestContext>

</MuiThemeProvider>

</TranslationProvider>

);

};

const customRender = (

ui: ReactElement,

options?: any

): ReturnType<typeof render> =>

render(ui, { wrapper: AllTheProviders, ...options });

export { customeRender as render };

react-adminが内部で使っているライブラリの知識がどれだけ必要になるか

かなり意識するが仕方ない

CSS頑張りたくないので、頑張らなくてもある程度スタイリングされるというのはありがたい

ただ、カスタムコンポーネント書くときは、自動生成されたものを真似するなど、material-uiに関する知識が必要

コンポーネントの配置やデザインをカスタマイズするときは必須

特定コンポーネントのちょっとしたスタイリングの拡張はCSS in JSで書く

ちょっと必要

ほとんど意識しない

独自Formを作るときは必要

ほとんど意識しない

デバグのときにdev toolでstoreを覗いたりする程度

必要になるユースケース（管理画面全体で共有しないといけないstateや副作用）があまり思いつかなかった

全く意識しない

つらそうなケース

規約から外れるようなAPIについては自前でdataProviderをガリガリ書いていく感じ

管理画面ってだいたい複数リソースをまとめて表示したりするものなので、API側でまとめたものをインタフェース上は1リソースとして表現する、みたいな感じになるかも

複雑な更新処理、画像アップロードとかは工夫が必要だけどそれはreact-adminに限らないのであった

既存のReact, Reduxアプリケーションにあとから足すとき

react-adminが提供する自動生成系のもろもろが使えず旨味がかなりうすそう

さらに、redux-sagaなどのライブラリの利用を強制されて自由度も下がるうえに知識が要求される