React Query Error Handling
React Query Error Handling10.09.2021 — ReactJs, React Query, JavaScript, TypeScript — 4 min read Handling errors is an integral part of working with asynchronous data, especially data fetching. We have to face it: Not all requests will be successful, and not all Promises will be fulfilled. Oftentimes, it is something that we don't focus on right from the beginning though. We like to handle "sunshi
position:fixedを使わずに、footerを画面最下部に固定するには？ flexboxを使いこなす ｜SHIFT Group 技術ブログ
position:fixedを使わずに、footerを画面最下部に固定するには？ flexboxを使いこなす はじめにこんにちは、SHIFT の開発部門に所属しているKatayamaです。 footer 要素を画面最下部に固定して表示させたときには、ググってよく出てくる実装方法としては以下のように"position: fixed"と"bottom: 0"を使った実装だと思います（以下の実装は動く最小限のコードで、実際の実装としては不十分なのでご注意ください）。 <!DOCTYPE html> <html lang="ja"> <head> <style> h1 { text-align: center; } </style> </head> <body> <header> <h1>Nav</h1> </header> <main> <h1>Main</h1> </main> <footer
【Material-UI】必ず設定しておきたいTheme項目 - Qiita
Material-UI ではアプリ全体の見た目や動作をThemeで設定することができます。 過去に数回のフロントエンド開発で Material-UI を使ってきたのですが、その中に必ずと言っていいほど設定するTheme項目があります。 そんな必ず設定するようなTheme項目をまとめました。 対象バージョンは4.0.0以降です。 尚、ここで紹介した設定項目を全て適用したThemeとデフォルトのThemeを比較できるサンプルを作成したので参考にしてください。 ボタンのラベルが大文字になるのを防ぐ - typography.button.textTransform="none" TextField のバリエーションを変更する - props.MuiTextField.variant テーマカラーの設定 - palette.primary 入力コントロールの色を統一する - props.{MuiC
フロントエンド開発の定番「React」バージョン18の新機能を解説──並行レンダーで操作感が向上！
本記事では、動的なWebページを構築するフロントエンド開発にとって定番ともいえるライブラリー「React」の最新版であるバージョン18について、新機能を紹介していきます。Webページの「並行レンダー」をベースに、画面更新の優先度指定や不要な画面更新の抑制など、Webページ利用者の操作感を向上する改善が行われています。 はじめに Reactは、動的なWebページのインターフェースを構築するためのJavaScriptライブラリーで、Facebookとオープンソースコミュニティによって開発が続けられています。 図1 Reactの公式ページ Reactは2022年3月にメジャーアップデートであるバージョン18（以下「React 18」がリリースされ、現在の最新バージョンは18.2.0です。React 18の概要は公式ブログ記事で紹介されています。 図2 React 18を紹介する公式ブログ記事 本
MUI v5 DatePickerの使い方 その2 ～日本語化～
Vite+React+TypeScript 環境で MUI v5 DatePicker の使い方について、Tips的にまとめてみました。 今回はDatePickerの日本語化についての記事です。 MUI の導入方法についてはコチラ Vite+React+TypeScript で、UIフレームワークにMUI(v5)を導入する。 MUI v5 DatePicker の記事一覧 MUI v5 DatePickerの使い方 その1 ～日付ライブラリの選定 から基本の使い方 まで～ MUI v5 DatePickerの使い方 その2 ～日本語化～ 基本的な日本語化 date-fns の日本語ロケールを LocalizationProvider の locale に設定します。 選択した日付を「年月日」表示にするには、inputFormat や mask で設定します。 2022/05/25 変更 D
I am mitsuruog | Reactのuncontrolled input warningで困った時に確認するべきたった1つのこと
たまに見るuncontrolled input関連の警告についての小ネタです。 知っていると原因がすぐわかるのですが、知らないと結構デバックに時間が掛かる面倒な警告です。 まず、React の Form 関連コンポーネントの考え方にはcontrolledとuncontrolledの 2 つがあります。 簡単に両者の違いを説明すると、値が React の state で管理されているかどうかです。 controlledの方は、値が React の state で管理されていて、setStateしないと変更できません。 それに対してuncontrolledは、値が React の state で管理されていないので、従来の方法で値を変更できるのですが、lifecycle イベントなどの React の様々な恩恵を受けにくくなります。 で、本題ですが。 React でフォームがある画面を開発して
React Testing Library | Testing Library
The problemYou want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implement
Emotion – Introduction
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React. Fr
React – A JavaScript library for building user interfaces
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is writ
Storybook Tutorials
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React Native、Vue、Angular、Svelte、Ember 向けのバージョンがあります。 React 向けの Storybook を構築する Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、degit を使用してビルド環境をセットアップしましょう。このパッケージを利用することで、テンプレート（アプリケーションの一部をデフォルト設定で構築したもの）をダウンロードし、開発ワークフローの短縮に役立てることができます。 それでは、次のコマンドを実行してください: # Clone the templa
Typing Component Props | React TypeScript Cheatsheets
This is intended as a basic orientation and reference for React developers familiarizing with TypeScript. Basic Prop Types ExamplesA list of TypeScript types you will likely use in a React+TypeScript app: type AppProps = { message: string; count: number; disabled: boolean; /** array of a type! */ names: string[]; /** string literals to specify exact string values, with a union type to join them t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Router useNavigate with a useEffect hook - proper way to use?
GitHub - eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation
GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React
Does React have something like Vue's keep-alive element?
An unusual use-case of React Portals: Caching Components
React
Material React Table V2
Storybook: Frontend workshop for UI development
GitHub - jquense/yup: Dead simple Object schema validation
