Clever Geek Handbook

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

多くは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



コンポーネント内部のCSS

Create React App用にStyled-JSX を 固定 する正しい方法を見つけました 。 現在、CSSブロックは、CSS形式で（JSオブジェクトのインラインスタイルに対して）コンポーネントファイル内で自然に生きています。 また、グローバルスコープについて心配する必要はありません。







インポートの絶対パス

srcフォルダーで作業します。例： 







 import MyComponent from 'components/MyComponent'


Babel-plugin-module-resolverの構成 


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


WebStormを構成する


コンテキストメニューのsrcフォルダーに対して、「ディレクトリにマークを付ける」>「リソースルート」を実行します。







Atomセットアップ


  • js-hyperclickプラグインをインストールします 。
  • ドメインコンポーネントの場合、package.jsonにsrcへのパスを記述します。 

     "moduleRoots": ["../.."]


VSCodeを構成する


プロジェクトのルートにjsconfig.jsonを追加する必要があります。 







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


More articles:


All Articles