記事の対象者

・個人開発でディレクトリ構成に迷った初学者
・フロントエンドのチームに入ったけどフォルダ多すぎて萎えた初学者

この記事で紹介しないこと

・アトミックデザイン、Container/Presentationalパターンのような具体的なディレクトリ構成
・最適なReactのディレクトリ構成

React公式ではディレクトリ構成について考え過ぎるべきではないとしています。

チームによって違うと思うので、そのチームに合わせてやっていけば実務で困るということはないと思います。

ですが、なんとなくこのフォルダはこういうのあるよというのが分かっておくだけでも開発効率は変わると思います。

使い回しのできるコンポーネントを配置しています。
フッターとかヘッダーとか部品のイメージです。(どこまで分けるかは思想が出ます)

各ページが配置されています。
コンポーネントを組み合わせてpagesが構成されるイメージです。

状態管理のファイル達です。

カスタムフックスが定義されています。
use~とネーミングされます。
データ取得するなどの関数のイメージです。