Анатомия React компонента
Моё видение того, как должен выглядеть React компонент
96
7 мин.
165
2 мин.
Стандарт SSPS определяет требования к структуре и наименованию файлов и папок в проекте.
Использование нижнего регистра и дефиса является обязательным для всех папок и файлов проекта, это обеспечивает согласованность и гарантирует отсутствие проблем, а также предотвращает конфликты в разных операционных системах и системах контроля версий (Git), где чувствительность к регистру может отличаться, вызывая ошибки.
Использование kebab-case исключает хаос вида getPrice.ts, Price.tsx и Name.test.ts в одной директории, сложные названия вроде CuteIDKOKReader преобразуются в читаемый cute-id-kok-reader.ts и зищает от багов Case Sensitive FS.
Почему не snake_case? Он требует избыточного использования клавиши Shift, плохо читается в вебе (например, если файл отображается как ссылка с подчеркиванием, _ сливается с линией) и Google официально не рекомендует использовать нижнее подчеркивание.
Единственное допустимое отступление это системные файлы в корне репозитория, такие как README или CONTRIBUTING, поскольку их верхний регистр продиктован общепринятыми стандартами документации.
Название файла не должно дублировать информацию, которую уже предоставляет структура папок.
Контекст определяется местоположением, то-есть если файл находится в features/auth, то именование auth-login-form.tsx избыточно, правильно: login-form.tsx.
Переход от названий вроде HeaderUserMenuAvatar к структуре widgets/header/ui/user-menu/avatar позволит сохранить имена файлов краткими и точными.
Проект выстраивается по слоям с четкой зоной ответственности по FSD.
Глобальные группы (entities, features, widgets) всегда именуются во множественном числе, конкретные модули (слайсы) внутри них, в единственном, внутренние сегменты (ui, model, api) остаются стандартными.
Это создает предсказуемую архитектуру, задача по изменению корзины всегда приведет в features/add-to-cart, где интерфейс и логика четко разделены.
Использование единого регистра (kebab-case) делает проекты однообразными, что поможет быстрее ориентироваться и решать задачи.
Похожие категории:
Моё видение того, как должен выглядеть React компонент
96
7 мин.
Стандарт SSF-U определяет требования к семантике, доступности и логике работы фуллскрина
31
2 мин.
Стандарт SSA определяет требования к семантике, доступности и логике работы аккордеона
43
2 мин.
Разбор критических ошибок веб-дизайна. Почему слайдеры, автоплей и тяжёлые страницы снижают конверсию и позиции в Google и Yandex
43
1 мин.
Стандарт SSP определяет требования к семантике, доступности и логике работы пагинации
50
1 мин.
Стандарт SSG определяет требования к семантике, доступности и логике работы Git
47
2 мин.