React
MobXとReactの統合について mobx.js.org mobx-react-liteライブラリから提供されるobserverを使うことで、必要な変更があった場合にのみ再レンダリングされる 基本的な使い方は以下 import React from "react" import ReactDOM from "react-dom" import { ma…
react-dropzoneでpreviewすることができるのはわかったので、今度はそのpreview中の画像の横幅と縦幅を取得したい uga-box.hatenablog.com プレビュー画像の横幅と縦幅を取得するには、<img> 要素の naturalWidth と naturalHeight プロパティを使用する これらの…
react-dropzone でファイルのアップロード中にクライアントサイドだけで previewを表示する方法を調べた drop-zoneの機能として、previewがあるのでそれを利用すれば良さそう react-dropzone.js.org 上のドキュメントを読んでいて気になったのが、URL.create…
React Dnd-Kit というライブラリを知ったので調べた dndkit.com Dnd-Kit はReactでドラッグ＆ドロップ機能を実装するためライブラリ 特徴は以下 最小限の依存関係で動作するように設計されていて、軽量、高パフォーマンス フックベースのAPI カスタマイズす…
react-dropzoneというファイルアップロードに便利なライブラリを知ったので調べた react-dropzone.js.org react-dropzone は、ファイルのドラッグ＆ドロップインターフェースをReactアプリケーションに簡単に追加するためのライブラリ React Dropzoneの主な…
react-beautiful-dndのドキュメントをみていて、Droppableコンポーネントの最後の子要素にある{provided.placeholder}がよくわからなかったので調べた 目的 provided.placeholderの主な目的は、ドラッグ操作中にドラッグされているアイテムの元の位置を維持…
react-beautiful-dndのカスタマイズオプションについて調べた react-beautiful-dnd は様々なカスタマイズオプションを提供している 以下のコードを例に、カスタマイズオプションを説明する import React from 'react'; import { DragDropContext, Droppable,…
react-beautiful-dnd というドラッグ&ドロップのためのライブラリを知ったので調べた github.com react-beautiful-dndは、Atlassian社によって開発されているドラッグ&ドロップのためのライブラリで、使いやすいAPIを提供している 特徴 使いやすい 直感的なA…
React18で導入されたフック useDeferredValue で入力後の再レンダリングを遅延させる方法を知ったのでメモ useDeferredValueは UI の一部の更新を延期できるReact Hook react.dev useStateで管理する状態の変化を後回しにして、レンダリングを遅延させるもの…
React18からの2年ぶりの大型アップデートとなるReact19の新機能を確認した Actions（server actions） Next.jsですでに使っている機能のため割愛 【技術本まとめ】実践Next.jsを読んでのメモ - Server Action とパフォーマンス - UGA Boxxx useActionState u…
onClickCaptureを使えば、イベント伝搬のうちのキャプチャリングフェーズで実行される関数を指定できることを知った ja.react.dev キャプチャリングフェーズとは、ルート要素からクリックされた要素に向かってイベントが伝播し、それぞれの要素にイベントリ…
useTransitionを調べる ja.react.dev 上のドキュメントにあるように用途としては以下が挙げられる state 更新をノンブロッキングのトランジションとしてマークする トランジションなしの場合、ボタンを押したときそれが遅い処理だとUI が反応しなくなるが、…
Reactアプリケーションでパフォーマンスを上げるためにとりあえずメモ化をしていたが、メモ化の前に見直すべきポイントがないか調べた この時、dan氏のブログにまとまっていたので要点だけ自分でもまとめておく overreacted.io 見直し項目 productionビルド…
ユーザーが入力したテキストで検索してサジェストするようなコンポーネントをつくりたい 以前、１文字ずつ入力するたびにリクエストを送ってしまうことの対処法はAbortControllerを使えばよいことがわかったので、あとは実際にどういう風にコンポーネントを…
Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren') 以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題み…
CSSのtransitionとsetTimeoutを使って下図のような要素群を自動的に左に移動させるというアニメーションをつくりたい また、最終要素が出現したら、その次は１要素目がまた表示されるということをしたい いろいろ試したが、アニメーションが終わったタイミン…
ReactのuseRFCが話題になっていたので、 github.com uhyoさんの記事を読んで理解を深めた zenn.dev useとは useはSuspense機構を使う上で必要だった「Promiseをthrowする」という処理を、サードパーティからReact内部に隠蔽する仕組みで、Reactユーザーにと…
And Designの通知コンポーネントのような、クリックするたびに生み出される通知コンポーネントをつくりたい ant.design 大まかな方針としては、クリックするたびにbody要素に通知要素がappendされていき、時間が経つとその要素が消えるというような実装をし…
jQueryでやっていたようなbodyの最後に要素を追加するようなことをReactでやりたい 以下の記事を読むにPortalを使うのがよさそう chaika.hatenablog.com Portal Portalはまさにやりたかった、親コンポーネントの DOM 階層外にある DOM ノードに対して子コン…
forwardRefを使ったら以下のeslintの警告がでた Component definition is missing display name stackoverflow.com これを読むに、displayNameプロパティに値をセットしないとならないみたいだが、ちょっと毎回これを書かなければならないのは微妙 import Re…
JavaScriptとReactでつくるWebアプリのデザインパターンがまとめられたサイトを知ったのでみてみた javascriptpatterns.vercel.app まずは、よくきく以下のようなデザパタをJSでやる方法がめちゃめちゃわかりやすく載っている モジュールパターン シングルト…
onChangeハンドラーのないチェックボックスにcheckedpropsを設定すると、以下の警告が発生した Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field s…
StyledComponentでわざわざスタイルを定義するのが面倒だったので、ところどころインラインスタイルを使っていたが、Reactでインラインスタイルは使っていいのか？と疑問に思ったので調べた 公式にズバリな回答があった ja.reactjs.org インラインスタイルは…
2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このとき@koba04さんの発表で、提案段階のuseEventとという新しいHooksを知ったのでメモ github.com useCallbackでこのように書いていた処理では、中でnameを使っている…
@takepepeさんのスライドにあったReact Locationの話が気になったので、React Queryと合わせてどういうものか調べた より速い WEB を目指す Next.js / nextjs-make-the-web-faster - Speaker Deck React Query react-query.tanstack.com React Queryは、Reac…
前回のNext.js12のReact18対応のNew Streaming SSRの続き uga-box.hatenablog.com 次は、React Server Componentsに関して、もう少し詳しいお話を聞く機会があったのでメモ React Server Components React Flightとも呼ばれ、RSCと略されるみたい サーバーサ…
先週、ふんわり理解したNext.js12のReact18対応の続き uga-box.hatenablog.com New Streaming SSRに関して、もう少し詳しいお話を聞く機会があったのでメモ New Streaming SSR React FizzともNew Suspense SSRとも呼ばれるみたい React DOM Serverの新しいレ…
以前、google-map-reactを使ってReactプロジェクトにGoogle Map を表示することを行った uga-box.hatenablog.com ただ、初回レンダリング後にSPAでページをかえた場合にマップが更新されない問題が発生したので更新する方法を調べた 下のstackoverflowが参考…
前回Next12のブログを簡単にみたが、React 18のサポートまわりがまとめられなかった uga-box.hatenablog.com そんな中最近、共有会でNext.jsのReact18対応についてお話しを聞いたのと、以下のポッドキャストを聞いたので、メモしておく uit-inside.linecorp.…
FE共有会でReactのFormライブラリの話を聞いた 制御コンポーネントvs非制御コンポーネントやreact-hook-formなどは以前調べていたので事前知識があった uga-box.hatenablog.com uga-box.hatenablog.com Formライブラリの進化の方向性としては パフォーマンス…
