Organisation des composants stylés

Question

Je veux utiliser des composants stylés dans mon application et je me demande comment l'organiser.

Fondamentalement, les composants stylés sont affectés à un composant spécifique pour pouvoir être réutilisés.

Mais qu'en est-il des composants stylés que je voudrais utiliser plusieurs fois dans d'autres composants (par exemple des composants d'animations)? Devrais-je créer un fichier dans lequel je conserverai ces composants stylés «globaux» et l'importerai dans de nombreux composants?

Est-ce une bonne pratique?

Answer 1

C'est ce que la plupart de mes grandes applications de production construit avec style-composants ressembler à:

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

L' App le dossier contient tous les éléments qui composent votre plus grand d'application. (vous pourriez structure que par route dans votre application réelle), Chacune de ces grandes composantes est un dossier avec un index.js le fichier et tout un tas de style de composants dans des fichiers individuels.

Alors que je suis en train de construire ma demande et je remarque que j'ai besoin d'un style de composants à partir d'un plus grand composant dans un autre plus grand composant, je fais glisser son fichier à l' shared/ le dossier, mise à jour de toutes les importations et c'est tout! Au fil du temps shared/ devient un improptu modèle de bibliothèque avec tous les composants j'ai envie/besoin de réutiliser tout au long de mon application.

Une autre façon qui est assez commun est d'avoir style.js fichiers dans le volet dossiers, qui contient tous les composants de style de la composante. L'avantage étant que vous avez moins de fichiers qui obtiennent de votre manière, mais avec l'inconvénient qu'il est difficile de l'avis de la duplication et déplacement de composants dans le dossier partagé est plus de travail.

Personnellement, j'utilise la première version, plus souvent que non, mais c'est probablement juste une question de goût-essayer les deux et voir celui qui vous plaît le plus!

Answer 2

Vous pouvez également essayer Atomique de la Conception de la structure de votre application. De cette façon vous serez en mesure de réutiliser votre style de composants. Basé sur Atomiques méthodologie de Conception, vous organisez vos composants dans les atomes, les molécules, organismes, des pages et des modèles.

Atom

Un atome est originaire de la balise html. Par exemple, un élément d'Entrée peut être un Atome

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

Les molécules

Groupe d'atomes d'une molécule. Par exemple:

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

Les organismes

L'organisme est un groupe d'atomes, de molécules et/ou d'autres organismes. Par exemple:

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

Pages

Une page est l'endroit où vous allez mettre la plupart des organismes. Par exemple:

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

Modèles

Un modèle est une mise en page pour être utilisé sur les pages. Par exemple:

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

Github exemple

Il y a une Réagir starter projet sur Github qui utilise Atomique méthodologie de Conception avec style-intégration des composants. Voici le Lien.

Answer 3

La façon dont je suis l'organisation de mon Projet avec style-composant est le suivant:

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

Raisonnement:

• Chaque dossier est une caractéristique.
• Chaque fichier dans un dossier ont une responsabilité.
  • .jsx représentent une présentation de la composante.
  • styled.js sont des composants de style. Gérer uniquement la façon dont les composants look. Aussi tout en rapport avec le thème de fichier doit être importé ici, comme les couleurs,les borderStyles, etc.
  • container.js Si nous sommes à l'aide de toute la gestion de l'état, nous devrions avoir un artefact de la connexion de nos composants avec cette bibliothèque. Dans ce cas, Redux.
  • index.js des exportations de ce qui est pertinent.

L'avantage que je vois avec cette approche est que c'est assez clair, où les changements doivent être faits si vous décidez d'utiliser un autre CSSinJS de la bibliothèque.

Espérons-il un sens pour quelqu'un d'autre.

Cheers!