React

Reduxを使って数年になりますが、最近ある利点に気が付きました。

アプリケーションの状態をReduxに持つことで、storeの構造をみればなんとなくそのアプリケーションの全体像が分かります。

どういった機能が ...

React

React MUI の Dialog や Modal は内部的に Portal が使われています。

Portal は指定したDOMの位置にコンポーネントをマウントする仕組みです。

そのため、Dialog や M ...

JavaScript, React

React MUI の TextField を使っていて、value の値が更新されているのに画面に反映されない場合は、defaultValue を使ってしまっていないか確認します。

defaultValue を使っている ...

React

Next.jsで.envに定義した定数をクライアントサイドのコードで参照する場合は、NEXT_PUBLIC_ というプレフィックスを付ける必要があります。

NEXT_PUBLIC_HOGE=HOGE

またもう一つの落とし穴と ...

React

next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。

例えば、親要素が300*300で、画像が300*350だったとします。

縦横の比率は同じままで、親要素を ...

React

引っ越しが落ち着いてきました。

Reactの状態管理ライブラリとしてはReduxがありますが、実は他にもいくつかあります。

おなじみの npm trend でダウンロード数を比較してみました。

意外 ...

React

Next.jsにはサーバーサイドでレンダーする機能があります。

ここでいうレンダーは以下です。

HTMLを読み込む
JavaScriptを実行する
JavaScriptが実行されることでDOMが形成される ...

React, TypeScript

React V18 から、FC に暗黙的に含まれていた children がなくなり、VFC と同等になりました。

つまり、コンポーネントで children を使う場合は props の型定義に明示的に children ...

React

React hooks はコンポーネントからロジックを切り出すとても便利な機能ですが、一体どのような仕組みなのか。

やはり、実際のReactの開発者の記事が一番正確でわかりやすいと思います。

答えはタイトルに書 ...

React

今更ですが、React で hook という仕組みが登場した背景についてです。

実はドキュメントに記載されています。Reactはこういうところが良いと思います。

一番はじめの理由はかなりしっくりきます。 ...