Структура проекта

Пример необходимой структуры проекта:

Пояснения к корневой папке:

• Папки:

  • .vscode - папка для конфигурационных файлов VS CODE.
  • node_modules - здесь будут находится пакеты, установленные NPM или Yarn.
  • public - место, где находятся ваши статические файлы (например index.html, manifest.json).
  • src - место, где находятся ваши динамические файлы (исходный код вашего приложения). Также в корневой папке находятся все конфигурационные файлы вашего приложения.

• Конфигурационные файлы:

  • .babelrc - конфигурация Babel.
  • .editorconfig - конфигурационный файл и набор расширений для создания единого формата настроек. Позволяет всем разработчикам проекта использовать одну и ту же конфигурацию. (Например, ширина табов).
  • .eslintignore - файл с указанием игнорируемых файлов/папок ESLint.
  • .eslintrc - конфигурация ESLint.
  • .gitignore - файл с указанием игнорируемых файлов/папок Git.
  • .huskyrc.json - конфигурация Husky.
  • .lintstagedrc.json - конфигурация Lint-Staged.
  • .prettierignore - файл с указанием игнорируемых файлов/папок Prettier.
  • .prettierrc - конфигурация Prettier.
  • jest.config.js - конфигурация JEST.
  • jsconfig.json - конфигурация JavaScript.
  • webpack.config.js - конфигурация Webpack.

• Другие файлы:

  • README.md - файл с описанием проекта с разметкой Markdown.
  • package.json - краткая информация о приложении: название, версия, автор, лицензия, зависимости и пр.
  • yarn.lock - lockfile, являющийся основным источником информации о зависимостях проекта.

Пояснения к папке src:

• assets - папка используется для нужных файлов/объектов, которые необходимы для работы приложения (Например, картинки, шрифты).
• components - для компонентов, которые в контексте приложения можно считать «важными», «базовыми», «основными», размещаются в отдельных папках. (Например, подобным компонентом можно признать компонент <Header>).
• constants - константы, необходимые для работы приложения.
• pages - в этой папке находятся страницы вашего приложения, состоящие из компонентов.
• store - папка для Redux хранилища вашего приложения.
• utils - необходимые логические модули.

Пример структуры store:

Пояснение для структуры файлов компонента:

• actions - папка с actions, необходимые для работы с reducers.
• reducers - папка с reducers для взаимодействия с хранилищем.
• index.js - корень хранилица.

Пример структуры react компонента:

Пояснение для структуры файлов компонента:

• index.jsx - корневой файл для экспорта компонентов.
• styled.js - стилизованные компоненты с использованием styled-components.