どのように整理プロジェクト

私は、反応プロジェクト(またはどんな言語のどんなフレームワークを使っているプロジェクト)も整理する「正しい」方法について話すことは少しあなたの髪を整える「正しい」方法について話すようです.(私が思うに、私たちは、あなたの髪のスタイルを客観的に“正しい”方法は、明らかに、モホークでは同意することができます).
プロジェクトのレイアウトとして“基本”として、私はまだ自分自身を見つける-このゲームの4分の1世紀後-常に調整し、私の“デフォルト”プロジェクトの構造を進化させる.それで、私が私のspotify toolzプロジェクトのより戦術的な詳細に飛び込む前にhttps://www.spotifytoolz.com ), 私はどのように現在私の反応プロジェクトを整理する方法についてのクイック記事をクランクアウトしたい.
私も、この記事に関する「視聴者参加」を歓迎します.今でも、すべてのこの時間のスライディングコードの後、それは6ヶ月ごとかそこら、私はいくつかの見事な実現には、“このデータは本当にそこに格納する必要があります!”それで、私はプロジェクトを組織する方法のためにあなたのベストプラクティスを見たいです.
「プロジェクト組織」としてのすべての問題と同様に、私は私の現在のアプローチが経験的に最も良いアプローチであると100 %保証することができます.また、他のいかなるアプローチも「間違っている」と保証することができます.そして、今から6ヶ月後、プロジェクト組織に全く別のアプローチを採用している.その時、私はこの記事の組織に従う誰にでもスクーリングをします、そして、私は断固として、私がはるかに優れた組織計画に移ったと彼らに言います.
あなたがこの組織計画を使用するならば、あなたは最終的にそれに不満を持って成長します.

基礎組織

(上記のイメージが何を表しているかを調べることができないならば、私はあなたを許そうとします.
私の(最近の)反応プロジェクトの大部分は、これにかなり近い構造を持っています.

/src
  app.js
  /shared
    /classes
    /components
    /css
    /functions
    /hooks
    /objects
      /models
  /routes

私のアプリにすべてのUIアスペクトがあるならば、私は通常、私が反応ルータを使用していると仮定します.そして、私が反応ルータを使用しているならば/routes ディレクトリは、ユーザーがアプリケーションをナビゲートするときにユーザーが見ている(偽)ディレクトリの1対1の表現になります.
だから、アプリがある場合users モジュール/user ), 次に、作成する別の"ページ"を持っています./user-create ), エディット/user-edit ), ビュー/user-view ) ユーザは、次のようになります.

/src
  app.js
  /shared
    /classes
    /components
    /css
    /functions
    /hooks
    /objects
      /models
  /routes
    /user
      /create
      /edit
      /view

さらに、これらのルートにマップするコンポーネントを作成するとき、それらは適切なフォルダの下にJSファイルで表されます.そのため、各ルートのベースコンポーネントを埋めると、次のようになります.

/src
  app.js
  /shared
    /classes
    /components
    /css
    /functions
    /hooks
    /objects
      /models
  /routes
    /user
      /create
        /components
          create.user.js
      /edit
        /components
          edit.user.js
      /view
        /components
          view.user.js

下に直接ファイルがないことに注意してください/routes/{routeName} フォルダ.これは、ルートを定義するすべては論理的にどちらかの下に落ちる必要があるためですclasses , components , css , functions , hooks , or objects フォルダ.
実用的なレベルでは、これは私のルートのロジックのほとんどは/src/routes/{routeName}/components/{route.name.js} . なぜなら、私のルートのほとんどは、ルート固有のロジックのすべてが/src/routes/{routeName}/components/{route.name.js} .
さあ、想像しましょうview.user.js (これは<ViewUser> という名前の関数が必要ですgetLastUserLoginTimestamp() . 私がその機能を作成するとき、私は作るために組織的な選択をします.選択はこの質問によって決まります.

Will this function be used in this component, and only ever in this component??

この答えが「はい」の場合(すなわち、この関数が完全に一意で、このコンポーネントを対象としている場合)、次のような構造体を作成します.

/src
  app.js
  /shared
    /classes
    /components
    /css
    /functions
    /hooks
    /objects
      /models
  /routes
    /user
      /create
        /components
          create.user.js
      /edit
        /components
          edit.user.js
      /view
        /components
          view.user.js
        /functions
          get.last.user.login.timestamp.js

このシナリオでは、私はgetLastUserLoginTimestamp() 関数は、ViewUser コンポーネント.そういうわけで、私は別の/functions ディレクトリ下の/src/routes/user/view ディレクトリ.その意味はgetLastLoginTimestamp() これは、ViewUser コンポーネント.したがって、/functions 機能を収容するディレクトリは/src/routes/user/view .
しかし、率直に言って、上記の例はまれです.一般的に、私はヘルパー機能を作成しているとき、私はすでに彼らはアプリを通して他の場所で使用されることを知っている.実際に、私は彼らがアプリ全体を使用する方法を確認していない場合でも、私は通常、私は、最終的には、他の場所で使用される意志を作成している機能を仮定します.
このため、私は特定の機能の下ではめったに機能しません/src/routes/{routeName} ディレクトリ.多くの場合、私はそれらの関数の下に/shared ディレクトリ.以下のようになります.

/src
  app.js
  /shared
    /classes
    /components
    /css
    /functions
      get.last.user.login.timestamp.js
    /hooks
    /objects
      /models
  /routes
    /user
      /create
        /components
          create.user.js
      /edit
        /components
          edit.user.js
      /view
        /components
          view.user.js

共有は面倒

それが既に明確でないならば、私のアプリの' src/shared 'ディレクトリはすべての私のアプリケーションロジックのライオンの共有を収容します.これは2つの理由で起こります.

多くのクラス/コンポーネント/スタイル/機能/フック/オブジェクトは、非常に始めから「普遍的である」ように設計されています.たとえ特定のファイルがどのように将来再利用されるかわからないとしても、私は通常、私が彼らが再利用されると仮定するような方法で私のファイルを書いています.したがって、それらのファイルの大部分は/src/shared .

与えられたクラス/コンポーネント/スタイル/関数/フック/オブジェクトが単一のルートでのみ使用されるように見えるとしても、私は以下のファイルを保存する傾向があります/src/shared 私が絶対に100 %確かでない限り、ファイルは決してどこにも使われないでしょう.

これは私の/src/shared ディレクトリは潜在的に再利用可能な資産の増え続けるライブラリです.それは私のことも意味します/src/routes ディレクトリは疎らです-しかし、それらはアプリケーションを通してユーザの潜在的経路のかなり単純な1対1マッピングです.

重要な注意

この時点で、私は通常、機能ベースのコンポーネントとしてすべての反応コンポーネントを書き込みます.これは私が使用しないことを意味しますexport class SomeComponent extends React.Component {...} . 代わりに、私は書くexport const SomeComponent = () => {...} .
それで、あなたが上のディレクトリ構造を見るとき、あなたは見ます/src/shared/classes , このディレクトリがクラスベースのコンポーネントを収容していると考えることができます.しかし、それはそうではありません.
私の選んだプロジェクト構造では/src/shared/classes ユーティリティヘルパークラスのみです.例えば、私はよくヘルパークラスを使いますlocalStorage (ここで読むことができます:)と検証ライブラリ(ここで読むことができます:)これは私の最も最近の反応開発のクラスの私の唯一の本当の使用です.
あなたは、下に注意してくださいよ/src/shared , がある/components ディレクトリ.これはルートを定義する“main”コンポーネントではありません.これは私のアプリ全体を繰り返し使用して終了するこれらの“ヘルパー”コンポーネント(例えば、高次のコンポーネント)のすべてのです.
私の特別なアプローチで/src/shared/css フォルダは一般的に実際のCSSクラスを収容します.私が私のJSXの中でインラインCSSを使用しているならば/src/shared/objects (インラインCSSでは、スタイルはJavaScriptオブジェクトです).
私はめったに下に住んでいないフックを作成する/src/shared/hooks . あなたのフックが複数の構成要素の間で決して共有されないならば、なぜ、あなたはちょうどそれが使用される一つの機能的な構成要素の本体でそれを定義しないでしょうか?
最後に、私の使用/src/objects いくつかに混乱する可能性があります.私は、「平野OL JSオブジェクト」のために多くのユースケースを見つけました.
私の使用は/src/objects/models , ここでは私の検証ライブラリについて説明します/src/objects/models 私の関数に渡されているオブジェクトの形状を検証するのに役立ちます.

見せてください

これは私が現在反応プロジェクトを組織する方法です.(承知しているのは正しい方法ですね.どのように、あなたはあなたのプロジェクトを組織しますか?何か見落とした?レムノウズ.