Reactのメモ

公式

チュートリアル：React の導入 – React

Redux Toolkit | Redux Toolkit

useEffect完全ガイド — Overreacted

状態管理

比較考察

React ステート管理 比較考察 - uhyo/blog

Recoil

React 新しい状態管理ライブラリ Recoil の紹介

Context API

ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA

Redux

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ

Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版] | webOpixel

HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy

React-Query

Overview | React Query | TanStack

React Query 101 - DEV Community

ReactQueryでキャッシュを最大限利用する | microCMSブログ

REST API なら React Query がファーストチョイス

React Queryのkey管理について

URL操作

クエリパラメタをReactコンポーネントに渡すときはreact-routerが便利 - Qiita

[React Router] URLクエリストリングを取得する

etc

https://www.learnstorybook.com/intro-to-storybook/react/ja/get-started/

Material-UI を普通に使うと Storyshots がうまく使えない ++ Gaji-Laboブログ

第9回 2020年版 ReactにStoryshotsを導入する - Qiita

reactjs — onKeyDownイベントがReactのdivで機能しない

React今昔物語 - ICS MEDIA

React 触り始め、よく遭遇する問題まとめ（個人的に） - 奇をてらったテクノロジー

React / Redux を実務で使うということは
（画面描画のタイミング制御など効率的なReactでの制御を細かく書いているブログ）

Reactのデザインパターン Compound Components - Qiita

Compound React Components with Hooks + TypeScript | Martin's Blog

[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかた - Qiita
（Reduxの話ではあるけれど「Provider直下のコンポーネントはPresentational componentであるのがよいらしい」らしい）

TECHSCORE｜React: そのrender()はいつ呼ばれるのか | TECHSCORE BLOG

How to get previous props/state with React Hooks - LogRocket Blog

React.memoをサンプルを使って解説 - エンジニアの本棚

フックに関するよくある質問 – React

React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita

React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

React hooksこんな風に使ってみたよ - Qiita

DecoratorsでReactコンポーネントを拡張する - Qiita

React Hooks の useEffect の正しい使い方 - Qiita

React ContextでuseReducerを使ってみる - Qiita

React.ts の状態管理に useContext を使う - Qiita

VSCodeのTypeScriptのバージョンを変更する - 新しいことにはウェルカム

ReactContext用のLoggerを作った - Qiita

知っていると捗るcreate-react-appの設定 - Qiita

Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita

CssInJsPerf/App.tsx at 76b8b0172a4f9b938e099a7c2906d6e63ae8d831 · GiridharKarnik/CssInJsPerf · GitHub

2020 年、 React 軸で学ぶべき技術 - mizchi's blog

reactjs - React.js/Redux: setInterval and clearInterval in Reducers - Stack Overflow

Reactで実装したコンポーネントのマウント時に工夫したこと - EatSmartシステム部ブログ

ヌルヌル動くReactコンポーネントの作り方【入門】 - カミナシ開発者ブログ

React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られた ー Warning: Cannot update a component while rendering a different component - Qiita

React Hooksでデータを取得する方法 - Qiita

Build

Create React Appで作成したアプリを任意のサブディレクトリに配置する | NO MORE! 車輪の再発明

Deployment | Create React App

React開発時には、APIサーバーとReactアプリサーバーを別にして、プロキシを使うというベスト・プラクティス

Reactで実装したコンポーネントのマウント時に工夫したこと - EatSmartシステム部ブログ

リポジトリ

yarn workspaceでmonorepo+TypeScript+Lint環境をつくる - Qiita

Multi-root Workspacesで、React monorepoプロジェクトのautoimportをいい感じに動作するようにする - BASEプロダクトチームブログ

yarn workspaceでtsconfig.jsonを共通化したモノレポを作りたい - Qiita

TypsScript

さようなら、TypeScript enum | Kabuku Developers Blog

【TypeScript】 Object[key]() （ブラケット記法）で関数呼び出ししたら Element implicitly has an 'any' type でハマった話 - Qiita

Typescript ブラケット記法(Object[key])でno index signatureエラーをtype safeに解決したい。 - aknow2

https://cloud6.net/so/typescript/1499504

デザイン/Storybook

画面を作る | Storybook Tutorials

rebassのComponentをStorybookのStoryに追加する際のひと手間 - Qiita

Rebass

Solarized

The `sx` Prop – Theme UI

https://microcms.io/blog/storybook-react-use/

React×TypeScriptでStorybookを5.1.9から6.0.26にメジャーアップデートしたハマりどころ

Vue と CSF によるモダンな Storybook 6 のはじめかた

Next.js + TypeScriptにStorybookを導入して遭遇したエラーを全て共有します - パンダのプログラミングブログ

デザイナーがデザインツールを使わずに、Reactを使ってデザインした話 - Medley Developer Blog

Next.js + TypeScriptにStorybookを導入して遭遇したエラーを全て共有します - パンダのプログラミングブログ

@storybook/addon-storyshots - npm

Next.js+TypeScript 環境で Storyshots を使う（Storybook 6 対応） ++ Gaji-Laboブログ

react-icons - npm

javascript - Rerender view on browser resize with React - Stack Overflow

vue.js - How to mock modules in storybook's stories? - Stack Overflow

How to mock api calls in Storybook - DEV Community

Using Storybook and Mock Service Worker for mocked API responses - LogRocket Blog

クリーンなReactプロジェクトの21のベストプラクティス - Qiita

Suspense

React Suspense in Practice | CSS-Tricks

ReactのSuspenseで非同期処理を乗りこなす

React Suspense と Hooks を同時に使う方法について - Qiita

Use React.Suspense to wait for an image to load - Sergio Xalambrí

その他

超楽しくてカッコいい、Reactで始めるThree.js入門 - Qiita

[React Hooks] useAudioなるカスタムフックをつくってみた - Qiita

【React】HTML5のaudio要素で音楽を順番に再生する - Qiita

Custom audio player with React hooks - CodeSandbox

Scrolling with Page Up/Down Keys in React-Window

React DnDでかんばんボードを作ってみる

WEB色見本 原色大辞典 - HTMLカラーコード

Single Element CSS Spinners

ReactでOverlay Spinner Componentを作る - Qiita

JSON Server*1

github.com

フロント開発で使うAPIモック - JSON Server - やのうの記録

【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解） - クモのようにコツコツと

json-serverを使って簡単にAPIをmockする - Qiita

*1:Reactとは違うけど、実装時に関係あったという事で