Организация файловой структуры

Есть много проблем в аспекте обслуживания и отладки в веб-разработке. Частично это связано с файловой структурой проекта React. Поскольку маршрутизация является основной функцией разработки с помощью React, я бы организовал свои папки таким образом, чтобы мои функции и компоненты были легко доступны (в любом случае эта проверка кода будет иметь место). Обычной практикой является организация файлов по типу, что становится трудно поддерживать при масштабировании. В статье Юво В. «Как структурировать проект React» он предлагает организовать файловую структуру проекта полностью в одной папке, создавая каталоги корневого уровня. Проблема с подходом с одним файлом заключается в том, что по мере развития проекта некоторые каталоги становятся избыточными, поскольку вступает в силу маршрутизация, а функции добавляются между сценами без учета их спецификаций.

«Лучший» способ организации приложений React

С другой стороны, А. Марджин описывает лучший способ организации приложения React в своей статье «Как лучше организовать приложение React». Margin решает проблемы при поддержке определенных функций и компонентов с функциональной точки зрения, помня о правилах React-Routing. Этот подход кажется мне более практичным, потому что он объединяет связанные функции, и каждый компонент организован так, чтобы включать все файлы, необходимые для работы. Я нахожу этот подход лучше, потому что, если я хочу удалить сцену или кнопку, я могу легко получить доступ к компоненту и управлять им без серьезных последствий для потока кода моих каталогов. Учитывая, что я следую четырем правилам, описанным в Margin, я считаю, что могу эффективно разработать приложение, которое легко и доступно распределяет все функции и сцены. Эти четыре правила Margin дает: 1) Компонент может определять вложенные компоненты, но не может определять сцены. 2) Сцена может определять вложенные компоненты. 3) Служба может определять вложенные службы, но не может определять компонент или сцену. 4) Вложенные функции могут использоваться только родителем.

Примечание о конфигурации Webpack

В статье Джозефа Циммермана, опубликованной в журнале Smashing Magazine, содержится подробное введение в Webpack. Основные данные, представленные в этой статье, объясняют функциональность Webpack по сравнению с его конкурентами или сборщиками модулей. Веб-пакеты необходимы, потому что они получают критические зависимости, необходимые для запуска приложений. Это делается двумя способами: либо путем асинхронной загрузки и запуска модулей, либо путем объединения всех необходимых файлов в один файл Javascript, который будет загружаться в HTML-теге ‹script›. Этот плагин облегчает настройку файлов.