はじめに zustandはコンパクトなReactで動作する状態管理ライブラリです。 ミドルウェアで必要な分だけ機能拡張も可能です。 Redux、Recoilなど他の状態管理ライブラリと比較すると 最…
ReactのUIフレームワークであるMUI(Material UI)のDataGridにて、特定の行にだけstyleを設定する方法を解説していきます。 指定のセルが入力されている時に行(row)の色…
Reactのコンポーネントをそのままpdf表示したいときあると思います。 動的なuiをそのまま変換できるので便利。 次の手順で進める。 1.componentをcanvasに変換 2.canvasを…
この記事は前回の続きです。Todoアプリを再現する際などはこちらを先に参考にしてください。 https://qiita.com/ysk-s/items/dc8c18de2de8d1154476 前回…
ノードとエッジで表現されるネットワークグラフを描画できるReact + TypeScriptな環境で使えるライブラリをいくつか調べたのでそのまとめです。 まとめ 調査した各ライブラリについては別途、…
概要 前回はMock Service Worker(以下MSW)のデモを使って仕組みを見ていきました 今回も同デモを使用してE2Eテストの流れを見ていきます 準備 前回の記事を参考にMSWのデモ用ブ…
概要 サーバサイドAPIはまだ実装されてないけど、Webフロントエンドの実装を進めたい 顧客に見せるために作成したモックの実装を、できるだけ実際の実装に流用したい E2Eテストの為だけにビジネスロジ…
きっかけ ググった内容って、 「あー！こんなかんじね！」と理解した気になってませんか？？ 結局数日後、あれ・・・この前のなんだっけ・・・となることが多くないですか？😢 そんなある日、ネットサーフィン…
※解説は後程。。。 import type { NextPage } from 'next' import { useEffect } from 'react' import * as THREE …
Windows 11で ネタ元 https://zenn.dev/mikakane/articles/react_auth0_tutorial https://auth0.com/docs/quic…
はじめに 原神、かろうじて続いてます。こんにちは。 要点は、「Chrome VS 強化型トラッキング防止機能、からの、リダイレクトURIとリクエストするredirect_uriが一致しないとエラーが…
はじめに この記事はGithub Pagesで公開したReact × TypeSCriptアプリで、GraphQL(AppSync)を使えるようにする手順をまとめたものです。あくまで手段のまとめなの…
Reactの基礎を学びながらTodoアプリを作成していく。 まず、Reactの雛形を作成していく。 ターミナル（Windowsの場合はcomand prompt)を開いて以下のように打つ。 npx …
TypeScript 4.1以上だと、emotion/reactを動かすために必要な設定はこれだけになります。 { "compilerOptions": { "jsx": "react-jsx", …
