web-dev-qa-db-fra.com

Organisation des composants stylisés

Je veux utiliser des composants de style dans mon application et je me demande comment l'organiser.

Les composants de style basique sont affectés à un composant spécifique pour être réutilisables.

Mais qu'en est-il des composants de style que j'aimerais utiliser plusieurs fois dans d'autres composants (par exemple des composants d'animations)? Dois-je créer un fichier dans lequel je conserverai ces composants de style "globaux" et les importerai dans de nombreux composants?

Est-ce une bonne pratique?

cssreactjsstyled-components
33
Gemmi

Voici à quoi ressemblent la plupart de mes grandes applications de production construites avec des composants de style:

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

Le dossier App contient tous les composants spécifiques qui composent votre plus grande application. (vous pouvez structurer cela par route dans votre application réelle) Chacun de ces composants plus gros est un dossier avec un index.js fichier et un tas de composants stylisés dans des fichiers individuels.

Pendant que je crée mon application et que je remarque que j'ai besoin d'un composant stylisé d'un composant plus gros dans un autre composant plus gros, je fais glisser son fichier vers le shared/ dossier, mettez à jour toutes les importations et c'est tout! Heures supplémentaires shared/ devient une bibliothèque de modèles improptus avec tous les composants que je veux/dois réutiliser dans toute mon application.

Une autre façon assez courante consiste à avoir style.js fichiers dans les dossiers de composants qui contiennent tous les composants stylisés de ce composant. L'avantage étant que vous avez moins de fichiers qui vous gênent, mais avec l'inconvénient qu'il est plus difficile de remarquer la duplication et le déplacement des composants dans le dossier partagé est plus de travail.

Personnellement, j'utilise la première version le plus souvent, mais c'est probablement juste une question de goût - essayez-les toutes les deux et voyez celle que vous préférez!

81
mxstbr

Vous pouvez également essayer Atomic Design pour structurer votre application. De cette façon, vous pourrez réutiliser vos composants stylisés. Basé sur la méthodologie de conception atomique, vous organisez vos composants en atomes, molécules, organismes, pages et modèles.

Atom

Un atom est une balise html native. Par exemple, un élément Input peut être un Atom

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

Molécules

Un groupe d'atomes est une molécule. Par exemple:

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

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 mettrez principalement des organismes. Par exemple:

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

Modèles

Un modèle est une mise en page à utiliser sur les pages. Par exemple:

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

Exemple Github

Il y a un React projet de démarrage sur Github qui utilise la méthodologie de conception atomique avec l'intégration de composants de style. Voici le Lien .

28
Peeyush Kumar

La façon dont j'organise mon projet avec un composant de style est la suivante:

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 fonctionnalité.
  • Chaque fichier d'un dossier a une responsabilité.
    • .jsx représente un élément de présentation.
    • styled.js sont des composants stylisés. Gérez uniquement l'apparence des composants. De plus, tout fichier lié au thème doit être importé ici, comme les couleurs, borderStyles, etc.
    • container.js Si nous utilisons une gestion d'état, nous devrions avoir un artefact reliant nos composants à cette bibliothèque. Dans ce cas, Redux.
    • index.js exporte tout ce qui est pertinent.

L'avantage que je vois avec cette approche est qu'il est assez clair où des modifications doivent être apportées si vous décidez d'utiliser une autre bibliothèque CSSinJS.

J'espère que cela aura du sens pour quelqu'un d'autre.

À votre santé!

7
Maximiliano Cespedes