Ваша структура проекта под верстку?

Question

[Alibek Kulseitov]

Добрый вечер! Вопросы на которые я хочу услышать ответ помечу "В".
В: Что есть для вас компонент а что нет?
Допустим вот моя структура копонентов:


Хлебные крошки, пагинация, кнопки - это все компоненты понятно само собой.
В: Но являются ли такие блоки как логотип, шапка, футер компонентами?

Например шапка содержит стандартные элементы как логотип, меню, переключатель языков, соц сети, гамбургер и тд
В: Для шапки будет отдельная папка header/header.scss, вещи которые перечислил выше это его элементы или каждый является самостоятельным блоком? почему я создал header.scss потому что в каждом сайте шапка имеет свой цвет, свои тени и тд.

В: являются ли шапка, футер, сайд бар компонентами?

Comments

[sim3x]

Используйте баш и программу tree для формирования нормального дерева директорий вместо скриншотов

[Сергей delphinpro]

sim3x, как?

[sim3x]

Сергей delphinpro, man tree
tree -L 2

[Сергей delphinpro]

sim3x, Подсистему Linux установить не удалось. хз почему... не судьба..

[sim3x]

Сергей delphinpro,

подозреваю, что такое есть в цмд
https://stackoverflow.com/questions/11004731/outpu...

[Сергей delphinpro]

sim3x, отлично. спс, буду пользоваться.

Answer 1

[Виталий Архипов]

Посмотрите, как разработчики React трактуют принцип единой ответственности (single responsibility principle). Для начала идет совет разбить макет на прямоугольники и вообще спросить у дизайнера их названия, вполне вероятно они уже есть. Либо отталкивайтесь от модели данных, и для каждой маленькой логической части во view должен быть свой компонент.
https://reactjs.org/docs/thinking-in-react.html
Мой ответ - если вы можете придумать логичное название компоненту, то нужно его вынести. Вот вы придумали: шапка, подвал, логичные названия, выносите смело! Это означает семантически уже сработал принцип единой ответственности.

Answer 2

[Виолетта Морозова]

шапка, футер, сайдбар - безусловно являются компонентами.
логотип, меню, переключатель языков, соц сети, гамбургер:
лого - да, меню - да,
переключатель языка - не обязательно, но если код этого блока занимает много места, можно вынести в отдельный компонент,
соц.сети - обычно да. Потому что обычно соц.сети много где на сайте используются,
гамбургер - наверное не стоит, потому что: 1) является неотъемлемой частью шапки, 2) не занимает много места.
При желании мелкие штуки типа гамбургера можно вынести в подкомпонент, если система сборки позволяет.

Итак, что такое компонент:
1) независимый блок - часть кода, используемая независимо от родителя, может применяться в разных местах
2) большой блок - большой кусок кода, который имеет конкретный замысел, типа баннера, слайдера и тп. Пускай он нигде и никогда не будет больше использоваться, кроме как на главной, но он большой и самостоятельный мальчик. Так что селим его отдельно.

Вот как минимум две отличительные черты компонентов от некомпонентов.

Ой, это я что-то про разметку все говорила =))

Про стили - как говорили выше, все нужно отделять. Отлично, если каждый css-файл будет содержать верстку только одного логического блока.

ПыСы: глядя на твой скриншот, складывается впечатление, что папки для этих файлов не нужны. Смысл в таких длинных и повторяющихся путях?! components/header/header.scss Да никакого

Comments

[Иван]

Как ваши дела?Освоили реакт?

[Виолетта Морозова]

Иван, Иван, вы за мной следите?)) Нет, работы много, реакт отложился. Так-то разве что разговор о нем смогу поддержать, и-то скорее о react-native. Сейчас разгребусь на работе с задачами, хотя бы со сложными, тогда сразу к реакту приступлю. Уже жду недождусь

[Иван]

Виолетта Морозова, Ну немного :D Понял,желаю успехов с ним :)

[Виолетта Морозова]

Иван, спасибо)

[Alibek Kulseitov]

В других компонентах есть их html вьюшки) у этих просто нету нужды

[Виолетта Морозова]

Иван, привет, я начала изучать реакт) Прохожу курсы по реакту от Thinknetica

[Иван]

Виолетта Морозова, Привет, я тоже, только по официальной документации) и начинаю искать работу)

Answer 3

[Vitaliy]

Что есть для вас компонент а что нет?

Компонент: логически отделяемый блок, который служит для одной цели
Все можно разбить на компоненты, вопрос только стоит в целесообразности. Например, если у вас есть список с пунктами, и эти пункты представлены только одним тегом с парой классов стилей, тогда можно не заморачиваться выносить их в отдельный ItemComponent.

Но являются ли такие блоки как логотип, шапка, футер компонентами?

Ответ выше. Хотя это может быть слишком субъективно, но на практике нет смысла выносить каждые пару тегов отдельным компонентом. Потребуется лишь тогда, когда родительский компонент разрастется.
Например, пишу на Vue.js + Pug + Sass и стараюсь выносить компоненты только тогда, когда шаблон или стили будут занимать больше 60-100 строк

В:

Да, только еще вопрос стоит в том, будут ли вложенные компоненты уникальными для текущего? Если да, то имеет смысл поместить их в директорию с текущим. Иначе они могут использоваться другими компонентами

В:

Да

Answer 4

[Ivan Bogachev]

Что есть для вас компонент а что нет?

Любая логически независимая сущность - компонент.

Ваша структура проекта под верстку?

Обычно получается структура в таком духе:

спойлер

src/less
├── animations.less (универсальные анимации вроде fade-in)
├── colors.less (цветовая схема: константы + вспомогательные классы)
├── components (тут все компоненты, их много-много)
│   ├── accordion.less
│   ├── badge.less
│   ├── blockquote.less
│   ├── breadcrumb.less
│   ├── button-dropdown.less
│   ├── button-group.less
│   ├── button.less
│   ├── card.less
│   ├── carousel.less (у сложных компонентов могут быть внутренние
                       компоненты, которые нигде больше не используются,
                       соответственно они лежат в одном файле с родительским)
│   ├── checkbox.less
│   ├── grid.less (да, сетка - это тоже компонент)
│   ├── . . . . и.т.д.
├── constants.less (константы, это что-то вроде глобального конфига)
├── fonts.less (все, что связано с типографикой)
├── helpers.less (классы-хелперы с перебиваниями стилей)
├── main.less (сюда все импортируется в нужном порядке)
├── normalize-ext.less (расширение стандартного normalize.css)
└── utils.less (миксины, их обычно довольно мало.
                все хаки и фиксы добавляет PostCSS, так что тут их нет)

Рядом с этим лежат скрипты (структура для обычного не-spa варианта). Эти файлы создаются по мере надобности - может так статься, что все в одном-двух файлах будет, если делается лендинг какой-нибудь:

src/js
├── component.js (если компонентов много - они все наследуются
                от базового компонента. единообразие важно.)
├── components
│   ├── . . . . тут сами компоненты, называются аналогично своим *.less файлам
├── components.js (индекс для компонентов)
├── controls
│   ├── . . . . тут могут быть (а могут не быть) утилиты-обертки
                для клавиатуры/тачпада; это иногда позволяет сильно
                разгрузить остальной код.
├── dependencies.js (обертки-адаптеры для зависимостей)
├── events.js (следилка за событиями)
├── factory.js (маленькая фабрика компонентов)
├── main.js
├── polyfills.js (обертки-адаптеры для полифилов)
├── store.js (минимальное хранилище, иногда является оберткой
                для какого-то стороннего решения)
├── utils
│   ├── . . . . (тут могут быть файлы с разными утититами, иногда их вообще нет)
└── utils.js (если файлов с утилитами много, этот файл является индексом для них)