プロジェクト内のコンポーネントの構成

多くはPresentationalおよびContainer Componentsの推奨事項に基づいていますが、尊敬されている著者は脚注で分離の概念は議論の余地があり、コンポーネントを混在させることができることを認めています。 もしそうなら、なぜハンドルなしでスーツケースをドラッグしますか？ すべてのプロジェクトコンポーネントを1つの共有フォルダーに保存する方が便利です。 長所は何ですか：

• 簡単なファイルシステムナビゲーション。
• プロジェクトコンポーネントの一意の名前。
• 苦労せずにインポート（ '../../../../../ ..'）。

プロジェクトが大きくなったら、実装をカプセル化してプライベートnpmパッケージに分割する必要があります。 ただし、コンポーネントフォルダー内のサブフォルダーのツリーを成長させないでください。これを開発および維持することは非常に困難です。 確認済み。

すべてのコンポーネントは、1つのsrc / componensフォルダーにドメイン原則ごとに整理されています。 たとえば、次のドメインを定義できます。Post-パブリケーションの表示、PostForm-パブリケーションの編集形式。

ドメインコンポーネントの作成方法-src / components / Post /Post.js。

Post.jsの代わりにindex.jsを使用できない理由-プロジェクト内のコンポーネントファイル名の一意性が尊重され、エディターのタブのナビゲーションが簡素化されます（選択したファイルコンテキストメニューの貴重な使用状況の検索機能がWebStormで機能します-注を参照）。

ドメインコンポーネントフォルダ内のすべてのコンポーネントは、ドメインコンポーネントプレフィックス（Post * .js）を受け取ります。

ドメインコンポーネントフォルダー内のサブフォルダーは許可されません。内部には、 子孫コンポーネント （PostTitle.js、PostBody.js）および祖先コンポーネント （PostViewPage.js、PostListPage.js）からのファイルのフラット構造があります。 子孫コンポーネントはドメインコンポーネント内で使用され、祖先コンポーネントは外部（たとえばルーター内）で使用されます。

ドメインコンポーネントをインポートするには、ドメインコンポーネントの各フォルダー内にpackage.jsonを設定する必要があります。このフォルダーにエントリポイント「main」を入力します。

{ "name": "Post", "version": "0.0.0", "private": true, "main": "./Post.js", } 

さらに、先祖コンポーネントの再エクスポートがドメインコンポーネントファイル（Post.js）内で宣言されています。

 import PostViewPage from './PostViewPage' import PostListPage from './PostListPage' //... export { PostViewPage, PostListPage } export default Post 

残念ながら、次のように「エクスポート元」コンストラクト（WebStormの制限）を使用することはできません。

 export { default as PostViewPage } from './PostViewPage' 

その結果、次のように、コンポーネントフォルダー内のファイルへの明示的なアクセスは必要ありません。

 import Post from 'components/Post/Post' 

合意により、ドメインコンポーネントの名前でのみインポートを使用できます。

 import Post, { PostViewPage, PostListPage } from 'components/Post' 

ソースコード

WebStormの「使用状況の検索」機能に関する注意 。 少なくとも3つの使用コンテキストがあります。1）選択したファイルによる、2）選択した変数またはシンボルによる、3）コンポーネントのエクスポートで選択したデフォルトによる。

1）検索結果であるファイルコンポーネント/ Post / PostViewPage.jsを選択します。

 // Post.js import PostViewPage from './PostViewPage' 

2）PostViewPage.jsファイル内のPostViewPageシンボル、検索結果を選択します。

 // PostViewPage.js PostViewPage.propTypes = {} 

3）PostViewPageコンポーネント、検索結果のエクスポートでデフォルトを選択します：

 // routes.js import { PostViewPage } from 'components/Post' <Route exact path="/post/:id(\d+)/" component={PostViewPage} /> 

ご覧のとおり、3番目の使用方法は、祖先コンポーネントに最も役立つ情報を提供します。

PS

 import MyComponent from 'components/MyComponent' 

 ['module-resolver', { 'root': ['src'] }] 

 { "compilerOptions": { "target": "ES6" }, "exclude": [ "node_modules" ] }