React

React

[React]useEffectはいつ実行される?レンダリング後/値の変更時/初回だけの3パターンのタイミングがあります

React HooksのuseEffectが無限ループで実行されて困った経験があります。一体、useEffectはいつ実行されるのでしょうか?この記事では、useEffectの実行タイミング3パターンをまとめます。useEffectの実行タ...
Material-UI

[React]ドラッグ&ドロップできるテーブルをMUIとreact-beautiful-dndで作成してみました

Reactで開発をしていて、テーブルの行を自由に並び替えたいって思うことありますよね。ということで、ドラッグ&ドロップで行を入れ替えられるテーブルを作成してみました。 See the Pen react-dnd-table by amate...
Material-UI

[React]ダークモードにする方法!MUIを使ってOSの設定から自動的にテーマを変更する

Reactで開発したアプリケーションをダークモード対応させたい!そんなとき、Material-UI(MUI)ならテーマを変更させるだけで簡単にダークモードにできます。ユーザーのOSの設定から自動的にテーマを変更可能なので、やり方を紹介します...
Material-UI

[React]Material-UI(MUI)を使うと画面設計がとても簡単になるので初心者にもおすすめです

私ごとですが、最近初めてUIの開発に手を出しています。React + TypeScriptで開発するっぽいのですが、UIなんて作ったことありません。困ったなぁ〜って思っていたのですが、ReactのUIライブラリを使うことになりました。Mat...
React

React + TypeScriptのプロジェクトをパパっと簡単に作成する方法!

どうやってReactでTypeScript使うのかな?って思うことがあったので、ローカルで環境構築してみました。新規プロジェクトで作成する場合はコマンド一発で出来るので簡単です。React + TypeScriptのプロジェクト新規作成次の...
docker

【React】docker-composeでWebアプリをコンテナ化して起動するにはcommandを指定します

Reactで作成したWebアプリを、dockerでコンテナ化して起動します。すでに作成したアプリにdocker-compose.ymlを追加するだけでOKです。今回は、私が作成したTo doアプリを使用します。docker-compose....
React

【React】To doアプリを作ってみた!react-beautiful-dndでドラッグ&ドロップしてタスクの状態を変更

Reactを業務で使うので、とりあえずTo doアプリを作ってみました。タスクを追加して、タスクの状態をドラッグ&ドロップで変更できる感じにしてみました。↓まずは触ってみてください。↓ See the Pen react to do lis...