web-dev-qa-db-ja.com

スタイル付きコンポーネントの編成

アプリでスタイル付きコンポーネントを使用したいのですが、どのように整理するのか迷っています。

基本的にスタイル設定されたコンポーネントは、再利用のために特定のコンポーネントに割り当てられます。

しかし、他のコンポーネント（アニメーションコンポーネントなど）で何度も使用したいスタイルコンポーネントについてはどうでしょうか。これらの「グローバル」スタイルのコンポーネントを保持し、多くのコンポーネントにインポートするファイルを作成する必要がありますか？

それは良い習慣ですか？

cssreactjsstyled-components
33
Gemmi

これは、スタイル付きコンポーネントで構築された私の大規模な実稼働アプリケーションのほとんどが次のように見えることです。

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

Appフォルダーには、より大きなアプリケーションを構成する特定のコンポーネントがすべて含まれています。 （実際のアプリでルートごとに構成することもできます）これらの大きなコンポーネントはそれぞれ、index.jsファイルおよび個々のファイル内のスタイル付きコンポーネントの束。

アプリケーションを構築しているときに、ある大きなコンポーネントから別の大きなコンポーネントのスタイル付きコンポーネントが必要であることに気づいたら、そのファイルをshared/フォルダー、すべてのインポートを更新し、それだけです！時間とともに shared/は、アプリ全体で再利用したい/必要なすべてのコンポーネントを含む不適切なパターンライブラリになります。

かなり一般的な別の方法は、style.jsそのコンポーネントのすべてのスタイル付きコンポーネントを含むコンポーネントフォルダー内のファイル。欠点は、邪魔になるファイルが少なくなることですが、欠点を見つけると、重複に気づきにくくなり、コンポーネントを共有フォルダーに移動するのは手間がかかります。

私は個人的に最初のバージョンを頻繁に使用していますが、それはおそらく単なる好みの問題です。両方を試して、どちらが好きかを確認してください！

81
mxstbr

Atomic Design を試してアプリを構成することもできます。このようにして、スタイル付きコンポーネントを再利用できます。アトミックデザインの方法論に基づいて、コンポーネントを原子、分子、生物、ページ、テンプレートに整理します。

Atom

atomはネイティブhtmlタグです。たとえば、入力要素はAtomにすることができます

const Input = props => <input {...props} />

分子

原子のグループは分子です。例えば：

const Field = ({ label, ...inputProps }) => (
    <Label>
        {label}
        <Input {...inputProps} />
    </Label>
)

生物

生物は、原子、分子、および/または他の生物のグループです。例えば：

const Form = (props) => (
    <form {...props}>
        <Field label="Name" type="text" />
        <Field label="Email" type="email" />
    </form>
)

ページ

ページは、主に生物を配置する場所です。例えば：

const HomePage = () => (
    <PageTemplate header={<Header />}>
        <Form />
    </PageTemplate>
)

テンプレート

テンプレートは、ページで使用されるレイアウトです。例えば：

const PageTemplate = ({ header, children }) => (
    <main>
        {header && <div>{header}</div>}
        {children}
    </main>
)

Githubの例

Githubには、スタイル化されたコンポーネントを統合したAtomic Designの方法論を使用するReactスタータープロジェクトがあります。ここに Link があります。

28
Peeyush Kumar

スタイル付きコンポーネントを使用してプロジェクトを整理する方法は次のとおりです。

src
├── Layout
│   ├── Header
│   │   ├── Logo.jsx    
│   │   ├── styled.js
│   │   ├── container.js
│   │   └── index.js
│   └── LeftPanel
│       ├── LeftPanel.jsx
│       ├── styled.js
│       └── index.js
└── index.js

推論：

  • 各フォルダーは機能です。
  • フォルダー内の各ファイルには責任があります。
    • .jsxは、プレゼンテーションコンポーネントを表します。
    • styled.jsはスタイル付きコンポーネントです。コンポーネントの外観のみを管理します。また、色、borderStylesなど、テーマ関連のファイルもここにインポートする必要があります。
    • container.js状態管理を使用している場合、コンポーネントをそのライブラリに接続するアーティファクトが必要です。この場合、Redux。
    • index.jsは、関連するものをすべてエクスポートします。

このアプローチで得られる利点は、別のCSSinJSライブラリを使用することにした場合、どこで変更を加える必要があるかが明確であることです。

それが他の誰かにとって意味があることを願っています。

乾杯！

7
Maximiliano Cespedes