は、彼らが私に反応し、WebPACKのプロジェクトでは

Question

の中にいるディレクトリと同じ名前のJavaScriptファイルを読み込み、私が反応コンポーネントの次のプロジェクト構造を持っている：

Component/ 
├── Component.jsx 
├── index.jsx 
└── styles.css 

index.jsxファイル単に輸出入Component.jsxを。それはすべての新しいを必要とし、不必要な余分な工程であってもよいように

import Component from '../Component' 

import Component from '../Component/Component' 

とは対照的に、しかし、これはと思われる：理由は、それが必要なファイルで、それは次の使用を可能にするということでコンポーネントはスーツに従う。

これを念頭に置いて、私の質問は次のとおりです。私は両方の世界のベストを持つことができますか？ Component.jsxとstyles.cssしか私のディレクトリに置くことができますが、私のimport宣言でその名前を2回使用する必要はありません。

Answer 1

私はあなたに私が個人的に好きな次の構造を提案してみましょう：

あなたのコンポーネントのツリー構造（例として、すべてのコンポーネントが別のフォルダ構造を持っているそれは清潔で整然と、それを維持するためにあなた次第ですIndex.jsx。コンポーネントフォルダにだけ）、それらを必要とする人は誰でもそれらのコンポーネントへのアクセスを正規化：

src/components/ 
    Butter/ 
     Butter.jsx 
     index.jsx 
    Beets/ 
     Beets.jsx 
    Cabbage/ 
     index.jsx 
    Meat.jsx 
index.jsx 

components/index.jsx

export Butter from './Butter/index.jsx'; 
export Beets from './Beets/Beets.jsx'; 
export Cabbage from './Cabbage/index.jsx'; 
export Meat from './Meat.jsx'; 

Sの

内容あなたのフォルダがすでにコンポーネント名であるかを示します場合は、それらのコンポーネント

import { 
    Beets, 
    Cabbage, 
} from 'src/components'; 

Answer 2

を使用してどこか他のプロジェクトで青梅コンテナBorscht.jsxは、あなたはその中のファイル名で再びそれを置く必要はありません。私はこのアプローチを使用します。

すべての現代編集者は、既にタブにフォルダ名を追加することで、2つの同名の名前（ComponentA/index.jsxおよびComponentB/index.jsx）の問題を解決しています。これはVueのコンポーネントですが、それが反応のために同じものだと

注意。