react-recipe– category –
-
react-recipe
Reactで作った自作のページャの表示ロジックをライブラリのカスタムフックに差し替えてみた
はじめに 「ライブラリのページャを使ってるんだけど、見た目をカスタマイズしたいな・・・」「でもカスタマイズの仕方わからないな・・・」「ページャを作るロジックだけ使えればいいんだけどな・・・」 そう思ったことはありませんか? それ、MUI の use... -
react-recipe
Reactで作った検索機能つき一覧画面に自作のページャを追加してみた
はじめに 「一覧画面にページャをつけたいんだけど、ライブラリ入れるのはめんどくさい・・・」「ライブラリ入れるのはいいんだけど、見た目とかカスタマイズしたいんだよな・・・」「かといってライブラリのカスタマイズはちょっとハードル高いし・・・」... -
react-recipe
Reactで検索機能つき一覧画面をスクラッチで作る
はじめに 職業プログラマであれば、一覧画面は避けては通れません。 管理画面があるシステムであれば、ほぼ間違いなく一覧画面を持っています。難易度も比較的低いので、新人さんに回ってきやすい機能といえるでしょう。 かくいう私も、初めての実務ではJS... -
react-recipe
Reactで作った自前バリデーションつき入力フォームのJSXをコンポーネント化する
はじめに Reactの醍醐味といえば、コンポーネントですよね。同じコードを何度も書いていたら、コンポーネントにまとめましょう。そうしないと修正が何箇所にも及び、時間がかかる上にミスも増えます。 未来の自分のために、コンポーネント化しましょう。 ... -
react-recipe
Reactで作った自前バリデーションのカスタムフックを汎用的にリファクタリングする
はじめに 前回の記事で「見やすく直しやすいコードを書きなさい」と言った手前、冗長な処理を残したままにするわけにはいきません。 というわけで、今回は自前バリデーションのカスタムフックを見やすく直しやすくしてみました。 実物はこちら https://hak... -
react-recipe
Reactで作った自前バリデーションつき入力フォームのバリデーションをカスタムフックでやる
はじめに せっかくプログラムを作るなら、いいものを作りたいですよね。 いいものを作ろうと思ったら、自ずと機能が増えていくと思います。機能が増えていくと、今度は見やすさや直しやすさが大事になってきます。 見にくかったら直す箇所を探すだけでも大... -
react-recipe
Reactで作った自前バリデーションつき入力フォームのバリデーションをuseEffectでやる
はじめに 入力値のバリデーションが行われるタイミングは様々です。システムによっても違うし、人によっても違うでしょう。 この入力欄シリーズでは、以下のタイミングが登場しました。 SUBMITボタンが押されたタイミング(onSubmitイベント) 入力欄から... -
react-recipe
Reactで作った自前バリデーションつき入力フォームの入力値をstateでインタラクティブに扱う
はじめに 入力欄に入力された値を使ってあれやこれやしたいこと、ありますよね? 今回は、前回作成した入力フォームを改修して、入力値を state でインタラクティブに扱うようにしてみました。 入力値を state で扱うことは React をやっていれば避けては... -
react-recipe
Reactで入力フォームを作り、自前でバリデーションする
はじめに 「ちょっとした入力フォームを作りたいんだけど、バリデーションってどうやってやるんだろう?」「ライブラリ入れるほどでもないんだけどな・・・」 この記事では、Reactで自前のバリデーション機能を組み込んだ入力フォームの作り方をシェアしま... -
react-recipe
Reactで作ったサイドメニューの冗長な箇所をコンポーネント化したので動的出力する
はじめに 以下の記事では、サイドメニューの4つの項目を出力する処理が冗長だったのでコンポーネント化しました。 コンポーネント化したことで身動きがとりやすくなったので、もう1段階レベルアップさせたいと思います。 今回は、サイドメニューの項目を...
12