・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。
・Atomic Designをベースにコンポーネントを管理する
自分はとりあえずこの構成でやる。
- src
- pages (only container: データ取得、APIアクセス、ロジック)
- components
- templates (only presentational)
- organisms (container or presentational)
- list
- container.tsx (ロジックのみ。データ取得やAPIアクセスはここではしない)
- presentational.tsx
- molecules (only presentational)
- item.tsx
- atoms (only presentational) または material-uiなどのUIツール
- button.tsx
- input.tsx・Pages ComponentからしかAPIを叩かない。
・Container ComponentとPresentational Componentに分けて実装する
・スタイル管理はstyled-componentsを使用する。
・HTTPクライアント(Ajax対応)はIE11対応を考えてaxiosを使用する。
axiosとfetchの違いはこのサイトさんの説明が良かった。
【JavaScript】FetchAPIとaxiosの違いって？機能やメリットを比較
・Ajaxのキャッシュ、リトライ、ポーリングといった機能を実装するには
React Queryを使用する。SWRもあるが、React Queryのほうが良さげか？
データ取得ライブラリ「React Query」のススメ│uniface.hub
REST API なら React Query がファーストチョイス
[参考]
⭐React Componentの実装ルールを決めてみた | Money Forward Engineers' Blog
⭐ぼくがかんがえたさいきょうのAtomic Design - Qiita
React Hooks ✕ AtomicDesignで画像投稿webアプリのフロントエンドを実装する - Qiita
私のReactのコンポーネント実装アンチパターン - Qiita
Reactで読みやすいコードを書くための心得 - ログミーTech
コンポーネントを実装するときに意識すること - bagelee（ベーグリー）
Reactを使ったフロントエンドのアーキテクチャ事例 | Fintan
デザイナーがデザインツールを使わずに、Reactを使ってデザインした話 - Medley Developer Blog
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側：大規模ブログサイト表示速度改善 大解剖（2）（2/2 ページ） - ＠IT
