React初学者のための勉強会用おすすめドキュメント集

研究室内のサークル活動として、初学者も経験者も混ぜてのプログラミング勉強会をすることになりました。そこで、設計担当の私が良いと思った記事をピックアップし、資料として勉強に活用させて頂きました。また、進行中のプロジェクトが **React**(**Next.js**) + **Typescript** 構成であるため、これらに関連する記事を本記事では取り上げさせて頂きます。そして、勝手ながら以下のように分類の基準を設けました。

- ●：初学者向け
- ☆：特にオススメ｜設計思想に関わる重要なもの
- 未分類：一度は読んでおきたいもの

## ●Hooks

- useEffect

https://zenn.dev/taroro28/articles/49e95f01bab7ae

- useContext①

https://zenn.dev/web_tips/articles/851557606491f3

- useContext②

https://qiita.com/onikan/items/947013c7a64099a1edfd

- useRef①

https://zenn.dev/web_tips/articles/0785cebf193fbc

- useRef②

https://reffect.co.jp/react/react-hook-useref

- useRefの仕組み

https://qiita.com/FumioNonaka/items/cbcd3e57d6ae5af43fa7


## アーキテクチャ

- ☆UIとロジック分離＆最適化

https://qiita.com/ryosuketter/items/4fb9b560b0d076491d91

- ☆依存性注入

https://qiita.com/Yametaro/items/ca1b034a27dc2eb0fad7

- アーキテクチャ比較（データフロー）

https://qiita.com/stranger1989/items/4819b5e4539caea828bf

- ☆カスタムフック

https://qiita.com/cheez921/items/af5878b0c6db376dbaf0

- ☆ディレクトリ構成

https://maku.blog/p/4is2ahp/

- ディレクトリ構成（Redux）

https://superhahnah.com/redux-directory-petterns/


## パフォーマンス

- ●チューニングの基本

https://zenn.dev/yuki0410/scraps/b8d8868762533c

- ●チューニングの流れ

https://qiita.com/Yametaro/items/621bfd8c894f8fd36539

- チューニングの歴史

https://blog.ojisan.io/react-re-render-history/

- ☆仮想DOMの仕組み

https://qiita.com/seira/items/6767e222890c9890ecb9

- ☆ライフサイクル

https://zenn.dev/yodaka/articles/7c3dca006eba7d

- useMemo/useCallback

https://qiita.com/seya/items/8291f53576097fc1c52a


## Typescript

- 総称型（ジェネリクス）①

https://qiita.com/Yametaro/items/bcd3166e5d2ad696a89e

- 総称型（ジェネリクス）②

https://qiita.com/Yametaro/items/2e28a7b813dc99c664e9

- 合併型（Union Types）と交差型（Intersection Types）

https://tyotto-good.com/blog/union-intersection-type

- ☆型ガード

https://qiita.com/Yametaro/items/4bb5287f88e163fca6e0

- ☆interface or type

https://zenn.dev/luvmini511/articles/6c6f69481c2d17

- ☆型定義=ドキュメント作成

https://qiita.com/Yametaro/items/1065eb96a7388f528319


## React v18

- React18がなぜ凄いのか

https://zenn.dev/noyan/articles/5c2d2d6089a9ff

- Suspense

https://zenn.dev/uhyo/books/react-concurrent-handson

- トランジション

https://zenn.dev/uhyo/books/react-concurrent-handson-2/viewer/introduction

- 5分で理解するReact18

https://qiita.com/uhyo/items/bbc22022fe846fd2b763

- React18の資料まとめ

https://zenn.dev/hiroko_ino/articles/article-and-video-about-react-18


## Next.js

- より速いWebを目指す

https://speakerdeck.com/takefumiyoshii/nextjs-make-the-web-faster

- Next.jsの機能まとめ

https://openstandia.jp/oss_info/nextjs/

- Next.jsを使う理由

https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f


## ベストプラクティス

- props

https://qiita.com/Yametaro/items/814f40d08e9d30584e20

- イミュータブル

https://qiita.com/ttiger55/items/dc18b5ea2180b5059f26

- クリーンなコードを書くために

https://qiita.com/baby-degu/items/ea4eede60bbe9c63a348

- useRefのアンチパターン

https://qiita.com/uhyo/items/6a3b14950c1ef6974024


## 技術選定

- 宣言的UI

https://qiita.com/erukiti/items/fb7bcbd9d79696579d06

- Reactが好きな理由

https://qiita.com/mqtsuo02/items/5701238e666e20416664

- JSX

https://qiita.com/oukayuka/items/195315df70b1f8de3a18

- React vs Vue vs Angular（コード比較）

https://qiita.com/risuke/items/d46ea7f9d020c5dd967d

- React vs Vue vs Angular (データ比較）①

https://iwasiman.hatenablog.com/entry/2018/04/23/200000

- React vs Vue vs Angular (データ比較）

https://www.wenyanet.com/opensource/ja/5ff8c7cc4ebfb86ed15180a4.html