React

React

Tailwind CSS の shadow と drop-shadow は違うんだよ。って話

shadowとdrop-shadowの基本 shadow shadowは、要素の全体的なボックスに影を加えます。これにより、要素に深みを与え、立体感を出すことができます。特にボタンやカードのようなインタラクティブな要素に適して...
React

TailwindCSSで group を使う理由

はじめに 親要素の状態に応じて複数の子要素のスタイルを変更する場合、従来のCSSではコードが少し複雑になることがあります。 TailwindCSSのgroupクラスを使うとそれが簡単に記述できるので紹介します。 Tail...
React

map関数で()か{}で迷うことはないですか?

map関数を使用するときに、map(() => ())の丸括弧で使う場合と、場合とmap(() => {})の波括弧で使う場合がないですか? map関数についてちゃんと理解していれば、この違いが生じるのは当然であ...
React

【React】カウントアップ機能を作成して”Jotai”に入門する

Reactでアプリケーションの状態管理を行うのにはReduxを利用するのがポピュラーですが、Reduxは学習コストが少し高い上に、コードが複雑になりがちというデメリットがあります。 そこで、比較的小規模なアプリケーションであればその...
React

【React】カウントアップ機能を作って”Redux”に入門する

Reactでアプリケーションの状態管理を行うにはReduxを使うとよいという噂を聞き、Reduxに入門してみることにしました。 本記事では、Reduxを使用するメリットから、使用方法までわかりやすく解説しています。 R...
React

【React × Tailwind CSS】transitionを使ってhoverでアニメーションさせる方法

環境 react @18.2.0 tailwindcss @3.2.4 heroicon/react @2.0.15 CSSでアニメーションを付ける際に使用するtransitionについてご紹介します。...
React

【React × Vite】Uncaught ReferenceError: global is not defined

ReactとViteとFirebaseで構築したアプリで以下のエラーが発生したのでその解消方法をまとめました。 Uncaught ReferenceError: global is not defined エラー原...
React

【React】Headless UIのDialogの使い方を丁寧に解説

ReactでDialog(Modal)を実装するUIライブラリといえば、王道はMaterial UIかと思います。 ですが、今注目を集めているUIライブラリといえばtailwindCSSではないでしょうか。 Material ...
React

【React】MUI DataGrid リストから詳細に遷移する3つの方法

Reactでリストを作るといえばコレですよねMUIのDataGrid! そのDataGridを使い、リストから詳細ページへの遷移をさせたいと思うことが多いのではないでしょうか。 詳細ページへの遷移方法はいろいろあります...
React

【React Hook Form】MUIライブラリと素のHTMLの違いをラジオボタンで比較

Reactでフォームを作成するときに便利で優秀なライブラリ、React Hook Form! 素のHTMLで使用するなら導入は簡単ですが、MUI等のUIライブラリと組み合わせると、記述が少し複雑になりますよね。その違いを比較して整理...