Организация стильных компонентов

Я хочу использовать стильные компоненты в своем приложении, и мне интересно, как его организовать.

В основном стилизованные компоненты назначаются конкретному компоненту для повторного использования.

Но как насчет стилизованных компонентов, которые я хотел бы использовать много раз в других компонентах (например, в компонентах анимации)? Должен ли я создать файл, в котором я буду хранить эти "глобальные" стилизованные компоненты и импортировать его во многие компоненты?

Это хорошая практика?

Ответы

Ответ 1

Это то, что большинство моих больших производственных приложений, созданных с помощью стилизованных компонентов, выглядят следующим образом:

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/ становится библиотекой шаблонов improptu со всеми компонентами, которые я хочу/нужно повторно использовать в течение всего моего приложения.

Другим способом, который достаточно распространен, является наличие файлов style.js в папках компонентов, содержащих все стилизованные компоненты этого компонента. Поверхность заключается в том, что у вас меньше файлов, которые мешают вам, но с недостатком, что сложнее заметить дублирование и перемещение компонентов в общую папку - это больше работать.

Я лично использую первую версию чаще, чем нет, но это, вероятно, просто вопрос вкуса - попробуйте их обоих и посмотрите, какой из них вам больше нравится.

Ответ 2

Вы также можете попробовать Atomic Design для структурирования своего приложения. Таким образом, вы сможете повторно использовать свои стилизованные компоненты. Основываясь на методологии Atomic Design, вы организовываете свои компоненты в атомы, молекулы, организмы, страницы и шаблоны.

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 существует проект запуска React, который использует методологию Atomic Design с интеграцией стилизованных компонентов. Вот ссылка .

Ответ 3

Способ организации моего проекта с помощью стилизованного компонента заключается в следующем:

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.

Надеюсь, что это имеет смысл для кого-то другого.

Ура!