ハッシュタグ記事一覧

[React Bootstrap] Progress を表示してみる 心を無にして始める React

今回は、ProgressBar コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 ...

2022/07/27 06:17

[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法

私はいつも、ReactのuseStateでオブジェクト(連想配列)の更新に手を焼いています。どうやるんだっけ？ということで、この記事に更新のやり方を残しておきます。useStateでオブジェクトを更新する方法オブジェクトの一部を更新cons

2022/05/18 23:14

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

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

2022/03/19 23:34

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

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

2022/03/15 00:28

Reactの開発環境をVS Codeで構築(git cloneするだけ!)

Reactの環境を構築する場合、よく使われるのがcreate-react-app(通称CRA)です。こんな感じですね。# TypeScriptで作成する場合npx create-react-app my-react-app --templa

2022/03/08 23:15

Reactで表示とロジックのコンポーネントを分割する

Reactの開発環境をVS Codeで構築で、コンテナ・プレゼンテーションパターンというのを少し紹介しました。これは、表示に関するコードをプレゼンテーション・コンポーネントに、ロジックをコンテナ・コンポーネントに分けて書きましょうというもの

2022/03/08 23:13

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

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

2022/02/28 23:15

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

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

2022/02/27 19:19

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

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

2022/02/20 19:57

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

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

2022/02/12 22:41

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

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

2022/02/12 22:40