とーますメモ

Ruby on Rails / Goなどの学習メモ

【React】実装方針メモ

・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。
・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