refine | Build your React-based CRUD applications, without constraints! | refine

自前のAPIでもいい感じに接続できるの？ちょっと気になる。

Data Provider | refineを書けばどんな形式でもイケる感じかな。OpenAPIのyamlから作ってくれたりしないかな。

React Admin使ってみて、そのまま使うには便利なんだけど、ちょっと逸れたことしようとすると詰む印象。

APIをReact Adminに寄せていかないといけないというか。

それはそれでAPIを正しい形に矯正することができそうだけれど、楽をしようとしてるところにこれは悩ましい。

React Admin - Open-Source Framework for B2B applications

react-adminを使って5分で作るハイカラDashboardを参考に、やってみた。

本当はNext.jsでやりたかったので、How to Run React-Admin On Next.Jsも試してみたのだけど、うまくいかなかった。

→公式のReact-admin - My First Project Tutorialを見ながらやったらできた。

OpenAPIで生成したサーバーだと、X-Total-Countヘッダーがないとエラーになったので、routers.goに追加した。

Tanstack Table続き。

とりあえず、公式のサンプルのように実装したら、動いた。

APIから取得したデータを使おうとすると、エラーになる。 useEffectを外してみたら、APIがすごい勢いでたたかれ続けた。 useEffectを戻したら、エラー出ずに表示された。

？？？

APIサーバーを停止してみると、またエラーになった。

昨日、react-tableがGitHubで別の名前になってて気になっていた件。

最近react-tableから名前が変わったらしい。 TanStack/tableを使ってみた感想

ということでreact-table改めTanStack/Tableを導入してみた。

エラーが出て思ったように動かない。

TypeError: Cannot read properties of null (reading 'useState')とか Error: Rendered more hooks than during the previous render.とか。

フォームの次は、テーブルを使って一覧表示したい。

react-table - npmが良いのかな？

GitHubだと名前が違ってたりするけど。。

TanStack/table: 🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

要調査。

Next.jsで管理画面的なものを作るのに、フォームをどうするか調べた。

先日読んだ本では、react-hook-formを使っていたので、そのようにしてみる。

思った以上に簡単に実装できた。

積極的に使ていきたい。

途中から写経するのあきらめて流し読みした。

長くて（フォント的に）読みにくいコードを見るのがつらすぎたので。。

CSSの書き方は、こっちのスタイルではなくてファイル分けるほうが自分には合っていそう。

テストの書き方など、あとで見返すと参考になりそうなことはたくさんあった。

Kindle版のフォントは何とかならなかったのかなぁ。

読むの再開した。

作って学ぶ～の方とはCSSの定義の仕方が違ってstyled-componentsを使っているし、モジュールのディレクトリ構成も違う。

Storybookも導入しているし、Linterも設定している。

読んだところまでで1か所だけソースが画像になっているところがあって、全部これでいいのに・・と思った。

後半のCMS連携以降は読むだけで手は動かさずに読み終えた。

データ用意するのも面倒だしね・・

とりあえず、Next.jsの基本は完全に理解した。

しかしCSSがまったく理解できていない。

また別の本読むか・・