Stil-Komponenten-Organisation

Will ich mit Stil-Komponenten in meine app und ich Frage mich, wie Sie zu organisieren.

Im Grunde Stil-Komponenten zugeordnet sind, um bestimmte Komponente auf Wiederverwendbarkeit.

Aber was ist Stil-Komponenten, die ich verwenden möchten, die viele Male in anderen Komponenten (zum Beispiel Animationen Komponenten)?
Soll ich eine Datei erstellen, wo ich immer diese 'globalen' Stil-Komponenten importieren und es zu viele Komponenten?

Ist es gute Praxis?

  • Ich benutze nur eine Komponente pro-Datei Weg. Es ist bequem zu halten-Komponenten getrennt und ermöglicht den Import von nur Komponenten, die Sie benötigen, anstatt alle Dateien.
InformationsquelleAutor Gemmi | 2017-03-23
  1. 83

    Dies ist, was die meisten meiner großen Produktions-Anwendungen, die mit Stil-Komponenten Aussehen:

    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

    Den App Ordner enthält alle die Komponenten, aus denen Ihre größere Anwendung. (Sie können die Struktur, die durch die route in Ihrem realen app), die Jeweils die wichtigeren Komponenten ist ein Ordner mit einer index.js - Datei und eine Reihe von style-Komponenten in einzelne Dateien.

    Während ich mit dem Aufbau meiner Anwendung, und ich merke, ich brauche eine Stil-Komponente aus einer größeren Komponente in einer anderen größeren Komponente, die ich ziehen Sie die Datei, um die shared/ Ordner, update alle Importe und das ist es! Im Laufe der Zeit shared/ wird ein improptu-Muster-Bibliothek, die mit allen Komponenten die ich will/brauche, um die Wiederverwendung durch mein gesamtes app.

    Einen anderen Weg, dass ist ziemlich normal ist style.js Dateien in den Komponenten-Ordner enthält alle von der Stil-Komponenten, die Komponente. Der Vorteil ist, dass Sie weniger Dateien, die sich in deinen Weg, aber mit dem Nachteil, dass es schwieriger ist zu bemerken, Vervielfältigung und bewegliche Komponenten in den freigegebenen Ordner ist mehr Arbeit.

    Ich persönlich benutze die erste version mehr als oft nicht, aber das ist wahrscheinlich nur eine Frage des Geschmacks—versuchen Sie beide und sehen, welche Sie gerne mehr!

    • Bedeutet, die Struktur zu isolieren gestalteten Komponenten aus nativen Komponenten? In meiner aktuellen Projekte habe ich Stil-Komponenten, gepaart mit nativen Komponenten in der gleichen Datei und aus Erfahrung kann ich sagen, dass diese wirklich chaotisch, Auf der anderen Seite, wenn ich isolieren Stil-Komponenten, die in separaten Dateien, ich werde am Ende mit Lasten von Dateien. Stellen Sie vor, dass eine einzelne Datei für jeden <div> wrapper in Ihren Vorlagen, das wäre ein overkill. Was werden Sie Vorschläge für diesen Punkt?
    • hast du nicht einen separaten Ordner für Container, und wo würden Sie Ihre individuelle Seite-Komponenten wie zB. Home.jsx? Auch nicht, trennen Sie den Stil-Komponenten vom rest der Layout-Komponenten zu?
    InformationsquelleAutor mxstbr
  2. 28

    Können Sie auch versuchen,Atomic Design, um die Struktur der app. Auf diese Weise werden Sie in der Lage, die Wiederverwendung von Ihnen gestalteten Komponenten. Basierend auf Atomic-Design-Methodik, die Ihnen bei der Organisation Ihrer Bestandteile in Atome, Moleküle, Organismen, Seiten und Vorlagen.

    Atom

    Eines atoms native html-tag. Zum Beispiel ein Input-element kann ein Atom

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

    Moleküle

    Gruppe von Atomen ist ein Molekül. Zum Beispiel:

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

    Organismen

    Organismus ist eine Gruppe von Atomen, Molekülen und/oder anderen Organismen. Zum Beispiel:

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

    Seiten

    Einer Seite ist, wo Sie setzen meist Organismen. Zum Beispiel:

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

    Vorlagen

    Ein template ist eine layout verwendet werden, auf den Seiten. Zum Beispiel:

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

    Github Beispiel

    Es ist ein Reagieren starter-Projekt auf Github verwendet, Atomic-Design-Methodik mit Stil-Komponenten-integration. Hier ist die Link.

    • Jetzt! das ist eine sehr interessante Sache, danke fürs teilen 🙂
    InformationsquelleAutor Peeyush Kumar
  3. 8

    Den Weg organisiere ich mein Projekt mit Stil-Komponente ist die folgende:

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

    Argumentation:

    • Jeder Ordner ist ein feature.
    • Jede Datei in einem Ordner haben eine Verantwortung.
      • .jsx stellen eine Layout-Komponente.
      • styled.js sind Stil-Komponenten. Verwalten Sie nur, wie die Komponenten Aussehen. Auch jedes Thema im Zusammenhang-Datei importiert werden soll hier, wie Farben,borderStyles, etc.
      • container.js Wenn wir mit jedem Staat, der management-wir sollten ein Artefakt, das die Anbindung unserer Komponenten mit, dass die Bibliothek. In diesem Fall Redux.
      • index.js Exporte, was relevant ist.

    Den Vorteil, dass ich mit diesem Ansatz ist, dass ist ziemlich klar, wo änderungen vorgenommen werden müssen, wenn Sie sich entscheiden, eine andere zu verwenden CSSinJS Bibliothek.

    Hoffe, dass es Sinn machen für jemand anderen.

    Prost!

    InformationsquelleAutor Maximiliano Cespedes
Schreibe einen Kommentar