Skip to content

Latest commit

 

History

History
73 lines (58 loc) · 5.43 KB

File metadata and controls

73 lines (58 loc) · 5.43 KB
id faq-structure
title Структура файлов
permalink docs/faq-structure.html
layout docs
category FAQ

Есть ли рекомендации по структуре React-проектов? {#is-there-a-recommended-way-to-structure-react-projects}

Единого мнения не существует. Однако, есть несколько популярных подходов, которые вы можете рассмотреть.

Группировка по функциональности или маршруту {#grouping-by-features-or-routes}

Один из популярных подходов -- это размещение файлов CSS, JS и тестов в папках, сгруппированных по функциональности или маршруту.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

Понятие «функциональность» не является универсальным, поэтому выбор уровня детализации остаётся за вами. Если у вас не получается составить список папок верхнего уровня, вы можете спросить у пользователей вашего продукта, из каких основных частей он состоит, и взять модель мышления пользователей за образец.

Группировка по типу файла {#grouping-by-file-type}

Другим популярным способом структурирования проектов является группировка похожих файлов, например:

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Некоторые предпочитают идти ещё дальше и размещать компоненты в различные папки в зависимости от их роли в приложении. К примеру, методология разработки Atomic Design построена на этом принципе. Помните, что данные методологии следует рассматривать как полезные примеры, а не как строгие правила.

Избегайте чрезмерной вложенности {#avoid-too-much-nesting}

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

Не переусердствуйте {#dont-overthink-it}

Если вы только начинаете проект, не тратьте более 5 минут на выбор структуры проекта. Выберите любой из перечисленных выше подходов (или придумайте свой собственный) и начните писать код! Есть большая вероятность, что вы вернётесь к переосмыслению структуры проекта после написания некоторого количества кода.

Если вы чувствуете что окончательно застряли, начинайте с одной папки. Со временем, когда она станет настолько большой, что вам захочется отделить некоторые файлы от остальных, у вас будет достаточно знаний, чтобы определить, какие файлы вы редактируете чаще всего. Как правило, файлы, которые часто меняются вместе, следует держать ближе друг к другу. Этот принцип называется «совместное размещение».

На практике проекты часто используют сочетание нескольких вышеупомянутых подходов. Поэтому выбор «правильного» подхода в самом начале проекта не слишком важен.