Reactプロジェクトのファイル構造

整体構造は、外部の記事から取得しました：Delightful React File/Directory Structure、少し変更して使用しています。

全体のプレビュー#

index.js#

お気づきかもしれませんが、各コンポーネントのフォルダには index.js があります。その内容は次のようになります：

export * from './App'
export { default } from './App'

これにより、コンポーネントのモジュールが再エクスポートされます。なぜコンポーネントのコードをすべて index に入れないのですか？それは、すべてのコンポーネントを index ファイルからインポートする必要がある場合、さまざまな index がエディタでいっぱいになり、それらを表示するのが非常に困難になるからです。

また、再エクスポートを行わない場合、App コンポーネントをインポートするには次のように書く必要があります：

import App from '../App/App'

index ファイルを使用して "リダイレクト" することで、次のように短縮できます：

import App from '../App'

components#

サンプルのコンポーネント構造は次のようになります：

src/
└── components/
    └── FileViewer/
        ├── Directory.js
        ├── File.js
        ├── FileContent.js
        ├── FileViewer.helpers.js
        ├── FileViewer.js
        ├── index.js
        └── Sidebar.js

hooks#

hooks フォルダは、プロジェクトで共通のフックを保存するためのものです。

フックが特定のコンポーネントで使用される場合は、そのコンポーネントのフォルダに配置します。

私は通常、このような命名方法を使用します use-worker.hook.js：

ケバブケース（ハイフン区切り）を使用します
ファイル名には .hook を追加します

もちろん、通常の useWorker.js のような命名方法を使用することもできます。

helpers#

helpers フォルダは、プロジェクトで共通のヘルパー関数を保存するためのものです。つまり、プロジェクト固有の補助関数です。

関数が特定のコンポーネントで使用される場合は、そのコンポーネントのフォルダに配置します。例えば、FileViewer.helpers.js のようにします。

utils#

utils フォルダは、プロジェクトに関係のないユーティリティを保存するためのものです。これは、個人的に使用するための lodash ライブラリのようなものと考えることができます。

constants#

constants フォルダは、プロジェクトの共通定数を保存するためのものです。ほとんどはスタイルに関連しています。

もちろん、定数が特定のコンポーネントに関連している場合は、そのコンポーネントのフォルダに配置することもできます。例えば、App.constants.js のようにします。

pages#

Next.js などのルーティングを含むフレームワークを使用している場合、pages フォルダが存在します。