Или почему я думаю, что вы, вероятно, создаете плохие приложения на React
Если вы совершенно не знакомы с принципами атомарного дизайна, то вам стоит на 100% пойти и попробовать Атомный дизайн Брэда Фроста. Если вы слишком ленивы, то вот самое быстрое и грязное.
Основы
Атомарный дизайн делится на 5 основных категорий. Атомы, молекулы, организмы, шаблоны и страницы. Лично я дохожу до создания организмов и обычно пропускаю шаблоны и сразу перехожу к страницам.
Это не будет концом всех руководств по Atomic Design, уж точно. Это просто моя собственная интерпретация и реализация теории. Я использую (и преподаю) эти принципы в течение последних 3–4 лет.
Я буду использовать несколько реальных примеров, которые мне недавно пришлось создать, чтобы забрать домой. Они используют styled-components, с которым лично у меня не так уж много опыта. Я предпочитаю использовать css-modules с помощью less, sass или стилуса.
Вот настоящие дизайны, над которыми мне пришлось работать:
Атомы
Это самые фундаментальные строительные блоки вашего пользовательского интерфейса. Эти компоненты никогда не импортируют ничего, кроме собственных таблиц стилей и React. Они чистые. Без гражданства.
Впрочем, за одним исключением. Они могут импортировать и использовать внешнюю библиотеку. Что-то вроде FontAwesome или react-insta-stories или что-то в этом роде. Пока они упрощают логику, необходимую для использования этой библиотеки.
Прекрасный пример - Button. Или компонент Icon. Или поле Input. Это самые основные части вашего пользовательского интерфейса. Вот небольшой пример:
Атомы также могут включать в себя какое-то общее / многократно используемое действие / эффект. Один из примеров, который я придумал, - это Drawer. Все, что он делает, это принимает isOpen опору. Это определяет, виден ли компонент (и его дочерние элементы). Конкретная версия этого компонента, которую я создал, прикреплена к нижней части области просмотра. Вот код для этого:
Все, что он делает, это перемещает дочерние элементы вниз под сгибом, если это closed. Родительский контейнер, вероятно, выиграет от overflow: hidden.
Они могут быть даже такими простыми, как очень простой элемент пользовательского интерфейса. Как ручка:
Молекулы
Молекулы представляют собой композицию из 2 или более атомов. Как правило, они также не имеют гражданства. Хорошим примером может служить ButtonWithIcon компонент. Или InputWithLabel.
Для проекта, над которым я работал, мне потребовалось два разных ящика. Один был FooterDrawer, а другой RounderDrawer. Эти два компонента стали причиной того, что я преобразовал функциональность Drawer в Atom.
Вот FooterDrawer:
А вот и RounderDrawer:
Как вы, наверное, догадались, эти два устройства идентичны по своим функциям, но отличаются по дисплею.
Организмы
Они должны быть сложными и содержать некоторые атомы и молекулы. Это такие компоненты, как верхние и нижние колонтитулы, формы. Все они охватывают гораздо большую часть пользовательского интерфейса и могут даже содержать некоторую внутреннюю логику / состояние. Отличный пример - CreditCardForm. Или ButtonWithTracking.
Эти компоненты больше приспособлены к определенным частям пользовательского интерфейса.
Я придумал пример SlideFooter. Хотя нет внутренней логики или состояния, однако, в нем используются два разных атома и одна молекула. Вот источник:
