私の考えるReact Queryベストプラクティス
はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 また、本記事で使用するコードは下記のレポジトリで公開しています。 React Queryとは React Query is often
React-Queryとは？使い方と重要性を分かりやすく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React-Queryとは？ ReduxやuseEffectとの違いは？ React-Queryを使用する理由 React-Queryを使用したデータ取得 QueryClientProvider クエリ クエリキー クエリを実行する関数 バックグラウドでのデータ取得をユーザーに通知 Mutations クエリの無効化と停止 最後に React-Queryを開始する前の前提条件ございます。 ・ React フックと関数コンポーネントに関する中級レベルのスキルが不可欠です。 ・ JavaScriptでのREST APIとデータ取得の基本的な理解。 ・マシンにNode.jsがインストールされていることを確認してください。 React-Queryとは？ React-Queryは、ReactおよびNext.jsコードベース用に構築されたライブラリであり、ネットワークリクエストを作成する際に従うべきす
[React] useContextの使い方を改めて確認してみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 ReactでGlobalなデータ共有を実現できるライブラリはいくつかあるのですが、React hooksで既定で使えるuseContextでも同様のことは行なえます。 今回は、useContextの使い方を改めて確認してみました。 環境 react@18.0.0 typescript@4.6.3 useContextを使ってみる useContextを使うことにより、Component treeのどの階層であっても、propsによる値の引き渡しを行うこと無く、Globalにデータの共有を行うことができます。 Context – React Function ComponentにおけるuseContextの使い方は次のようになります。 createContextでContextを作成する。defaultValueの指定は必須。 <Conte
![[React] useContextの使い方を改めて確認してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
How to fix missing dependency warning when using useEffect React Hook
With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request: ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps I've been unable to find a solution that stops the infinite loop. I want
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
React プロジェクトのディレクトリ構成 - fsubal
export async function getUserById(id: User'id'): Promise<User> { ... }
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ますます流行り、開発体験の良いものになると思います。 最初にReactから述べます。 数年前は、React vs Vueの論争がありましたが、Reactが勝者に落ち着いたかと思います。 これは、Google T
GitHub - streamich/react-use: React Hooks — future of React 👍 react-use
Sensors useBattery — tracks device battery state. useGeolocation — tracks geo location state of user's device. useHover and useHoverDirty — tracks mouse hover state of some element. useHash — tracks location hash value. useIdle — tracks whether user is being inactive. useIntersection — tracks an HTML element's intersection. useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. use
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
How to Add Multiple Entry Points to Your React App
Photo by Antonio Batinić from PexelsOften in our application, we require multiple entry points or html pages at our client side user interface. For instance, let’s take a basic scenario where you are making an application that requires a login page, a registration page and your application’s main index page. Though we can handle this requirement with React routing by creating different routes for
React.js ライブラリ集
React.js ライブラリ集 React.jsで使用できるライブラリを掲載してます。環境構築等に関するリンクも掲載してます。 環境構築・使い方など React.jsをインストールしてHello Worldまでしてみるnpm startを常駐化するコンポーネントの簡単な使い方react-routerの使い方npm start時にポートを変更するフォームに入力されたテキストをリアルタイムに表示するtextareaの値をリアルタイムで表示するfavicon(ファビコン)を変更する方法Axios利用時にCORSによるブロックを回避する方法簡単なカウンターを作成する乱数を生成して表示するプロパティ値を渡す再レンダリング時のuseStateの値を確認するusestateに配列を利用する配列をkey属性を使用して全て表示するstyleを適用するバージョン確認方法 開発系 axiosを使用してapiを取
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
SPA化するMPAとMPA化するSPA ～TechFeed Experts Night#4 講演より | gihyo.jp
本記事は、2022年9月に開催された「TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る」のセッション書き起こし記事「SPA化するMPAとMPA化するSPA（@yosuke_furukawa） ― TechFeed Experts Night#4 フロントエンドアーキテクチャを語る」を転載したものです。オリジナルはTechFeedをご覧ください。 古川と申します。@yosuke_furukawaでTwitterなどをやっております。 SPAは”見えるようになるまでが遅い” 私が今回お話するのは「MPA化するSPA」です。もともとSPAは、画面遷移（トランジション）をアプリケーションに合わせて最適化することを目的として発展した技術だと思っています。変更が発生したところだけレンダリングすることで高速化するテクニックだったのが、それをすべてのページで行う
Multi Page Application with React
In the world of web development, we can list two main design patterns for the web apps: multi-page application (MPA) and single-page application (SPA). In this blog post, I will focus on the integration of react library into a multi page app. The classical architecture that requires reloading of a web-page in order to load or send data from/to server in the user’s browser. What I’m planning to do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Hook Form - performant, flexible and extensible form library
react-useで使える便利なReact Hooksを紹介します - Qiita
React Spinners
GitHub - stefarr/create-react-app-multipage
How to Extend Create-React-App for Multi-Page Applications