Это рекомендуемые рекомендации по организации вашего приложения React, основанные на моем многолетнем опыте работы с React.

Итак, вы хотите создать приложение React. Но существует больше способов организовать кодовую базу приложения React, чем вы можете сосчитать. Но что такое «правильный» способ его организации, чтобы вы, ваши соразработчики и любые будущие руки, работающие над кодом, могли найти структуру приложения интуитивно понятной?

Это то, что мы рассмотрим здесь.

Во-первых, помните, что весь код, который вы будете писать, будет находиться в папке «src» вашего приложения.

Но как организовать содержимое этой папки «src»?

Вот как …

Начните с размышлений о различных частях, которые должны работать в вашем приложении: компоненты, вызовы API, стили и т. д.

Затем создайте папку для каждого из них.

Затем поместите отдельные файлы кода в соответствующие папки.

Таким образом, ваша папка «src» будет содержать подпапки для вашего приложения:

  • Компоненты: эта папка обычно называется components и будет содержать файлы для компонентов вашего приложения. Если ваше приложение более сложное, вы можете организовать свои компоненты в подпапки. Например, если вы создаете приложение для ведения блога и вам потребуется несколько компонентов для пользователей («NewUser», «UserDetail», «UserList» и т. д.), вы можете поместить их в подкомпонент «components/users». -папка.
    Затем у вас будет еще одна подпапка «components/posts» для хранения всех ваших компонентов, связанных с постами в блоге (например, «NewPost», «PostDetail», «PostList» и т. д.) и так далее.
  • Вызовы API. Даже самые простые приложения, которые вы будете создавать, потребуют от вас некоторых вызовов API к некоторым внутренним серверам. Чтобы лучше организовать свое приложение, создайте папку «api» и храните в ней все файлы для ваших объектов API. Вы можете сделать это независимо от того, используете ли вы библиотеку, такую ​​как Axios или Fetch API.
  • Глобальное состояние. Если вы используете менеджер состояния всего приложения/глобального состояния (например, Redux или Context API) для своего приложения React, вам следует создать отдельную папку в каталоге «src» для хранения глобальное состояние приложения. Так, например, вы можете создать папку src/appContext, в которой будут следующие подпапки:
    * appContext/actions/ : в ней хранятся файлы для типов действий глобального состояния и создателей действий.
    * appContext/reducers/: она будет содержать файлы редуктора для частей глобального состояния приложения
  • Пользовательские стили. Если вы собираетесь создать множество пользовательских стилей CSS для своего приложения, вы можете создать папку src/css и поместить в нее все файлы пользовательских таблиц стилей. Затем вы можете импортировать эти таблицы стилей в корневой App.js файл вашего приложения, чтобы он был доступен глобально во всех компонентах вашего приложения. Или вы можете просто импортировать таблицы стилей только в те компоненты, которые в них нуждаются (вместо того, чтобы импортировать их в корневой файл App.js).
  • Тесты. Вы можете создать папку src/__tests__ для хранения файлов тестов вашего приложения. Затем вы можете создать дополнительные файлы components , api и т. д. для хранения отдельных тестовых файлов для каждого компонента или службы API. Или вы можете просто поместить отдельные тестовые файлы прямо в папку src/__tests__/ без необходимости создавать вложенные папки для организации типов тестов. (Это вопрос предпочтений.)

Пример того, как я реализовал это в своих собственных проектах React, см. в приложении frontend моего репозитория MediaLite на Github. (Это два года и может быть немного ржавым, но это помогает сделать выводы, изложенные в этой статье.)

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

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

Спасибо, что потратили свое время и поделились этим обучающим путешествием.