カテゴリー:React
-
ReactやNext.js(バージョン9.4から使えるようです。)には標準で環境変数機能が備わっています。 環境変数設定ファイル 変数の定義方法 環境変数の反映にはアプリの再起動が必要になります。なお、クライアントに送ら…
-
ReactのCSS記述方法は戦国時代らしい。しっかり学習しておく必要がある。 Pure CSS 通常のCSSです。create-react-appした時にデフォルトで適用されているCSSでもあります。 メリット 「通常のCSS」なの…
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
結論 別コンポーネントにpropsで渡す関数はuseCallbackを使い、コンポーネント内で計算結果を値として使う関数に対してはuseMemoを使う。 前提 「useMemoは値を返す。useCallbackは関数を返…
-
MSW(Mock Server Worker) RestとGraphQL両方に対応している。 Service Workerがブラウザリクエストをインターセプトして、任意のレスポンスを返せる。 SSR/CSRの両方に対応…
-
概要 2013に公開されて2017年にライセンスを得てオープンソースライセンスに受け入れられました。Facebook社が開発しました。 特徴 仮想DOMの採用で高速で動作する。 採用事例 下記のようなサービスで採用されています。 …
-
各コンポーネントからuseDispatchなどでRedux Tool Kit内のReducer関数を呼び出したり、useSelectorでstateを参照したりすると思いますが、RTK独自の構文になるのでRenderでそのまま呼び出そうとし…
-
06.13
【React】「ページ遷移」のテスト
コンポーネント内でページ遷移のテストをする方法です。 react-router-domをモック化する方法 react-router-dom自体をjestでモック化します。ただ、この方法だとwithRouterとかがコードに記述…
-
useMutationとは? React Queryでデータを登録・編集・削除したりする場合に使います。AXIOSなどのHTTPライブラリの代替プラスキャッシュ機能を持っている感じです。 動きとしては、APIでバックエンドのデ…
-
インストール react-qureryとdevtoolsをインストールしておくと便利です。 [crayon-662b1417a6a40874807946/] react-query-devtools 導入するとブラ…