Структурирование проекта на React – полное руководство

Экосистема проекта на React дает пользователям полный контроль над происходящим. Наличие гибкой структуры предоставляет много плюшек. Разбираемся.

Преимущества структурированного проекта на React

  • Членам команды не нужно думать о структуре проекта. Вместо этого они могут сосредоточиться на создании продукта.
  • Поскольку React имеет огромную экосистему, постоянно нужно думать: redux или mobx? HOC или render prop? react-motion или react-spring? Исключение одной из проблем – согласованная структура.
  • Общая структура проектов помогает новым специалистам быстро входить в курс дела. Короткий бриф, и уже можно догадаться, что в каждой папке, и для чего нужны файлы в ней.
  • Люди с меньшим опытом также могут создавать масштабируемые проекты.
  • Совместное и повторное использование кода.

5 целей введения структуры

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

Компоненты структуры

Имя файла компонента должно быть в CamelCase

Имена компонентов должны именоваться в виде TabSwitcher, а не tabSwitcher, tab-switcher и т. д. Называть другие типы файлов в такой нотации не нужно, поскольку CamelCase сигнализирует нам, что файл является компонентом React.

Избегайте экспорта по умолчанию

Экспорт по умолчанию – это особый случай именованного экспорта, поэтому его необходимо обрабатывать особым образом. Это распространенная причина путаницы. Компонент можно импортировать так:

import { TinyButton } from './shared/Button'

Все компоненты должны находиться в каталоге components

Держите компоненты внутри выделенного каталога компонентов. Храните каждый компонент в отдельном файле. Если вам нужен файл стилей – создайте папку, и храните его там.

Главное преимущество в том, что компоненты не спрятаны где-то глубоко внутри. Поскольку они предназначены для повторного использования, их нужно хранить "на виду".

Использование такого инструмента, как Bit, позволяет организовать быстрый рабочий процесс и удобное совместное использование компонентов в разных проектах.

Имена папок и компонентов должны совпадать

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

Чтобы избежать необходимости импортировать такие компоненты:

import { TinyButton } from './TinyButton/TinyButton'

создайте файл index.js в той папке компонентов, которая экспортирует именованный компонент.

// components/TinyButton/index.js
export * from './TinyButton'

Храните компоненты, используемые в других проектах, в общем подкаталоге (необязательно)

Некоторые компоненты являются общими для нескольких проектов. Настоятельно рекомендуется создавать такие компоненты. Нет необходимости плодить копии файлов с небольшими различиями.

С помощью Bit можно легко поделиться компонентами с командой, чтобы другим не пришлось изобретать велосипед. Основная "плюшка" Bit в том, что ему не важно, где находится компонент в вашей файловой системе.

Перенесите маршрутизацию в каталог pages

Следуйте соглашению NextJs о структуре проекта, в котором логика маршрутизации хранится в каталоге pages. Каждая страница является компонентом класса React и имеет некоторое состояние. Компонент страницы использует другие компоненты для сборки страницы.

Причина того, что логика маршрута не используется повторно, в том, что компоненты страницы не могут быть reusable, но это довольно часто необходимо. Поэтому лучше, чтобы компоненты страницы находились внутри каталога pages.

Преимущества:

  • Возможность быстро посмотреть доступные маршруты.
  • Центральное расположение всей логики маршрутизации.
  • Хранение компонентов страницы отдельно от других.

Имя компонента маршрутизации должно быть в нижнем регистре

Имя компонента маршрутизации соответствует имени маршрута. Имена маршрутов в url являются строчными, поэтому имеет смысл хранить компоненты в нижнем регистре.

Общие рекомендации

Следующие рекомендации не связаны со структурой проекта на React и могут быть использованы в любом React-проекте.

Используйте функциональные компоненты по умолчанию

Начните с функционального компонента. Держите состояние в родителе. После масштабирования переходите к компоненту класса. Больше информации тут.

Используйте Container и Presentational компоненты

Presentational components – это компоненты, не имеющие внутреннего состояния. Их роль – показать определенные части пользовательского интерфейса. Это реквизиты или данные, предоставляемые через контекстные API.

Container components имеют дело с бизнес-логикой. Они обычно обладают некоторым состоянием и отображают только презентационные компоненты на основе логики.

Таким образом, Container и Presentational компоненты дополняют друг друга. Разделив обязанности, поддержка и отладка проекта на React становится проще.

Держите компоненты на поверхности

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

Используйте Bit для совместного использования компонентов

Bit – отличный инструмент для обмена компонентами между проектами. Давайте посмотрим, как использовать Bit, чтобы поделиться нашими компонентами из общего каталога.

1) Установите бит, а затем залогиньтесь, выполнив эту команду:

$ bit login

2) Проинициализируйте свой проект:

$ bit init

3) Добавьте общие компоненты:

$ bit add src/shared/Button.js --id mycomps/button

4) При необходимости импортируйте среды сборки и тестирования.
5) Пометьте тегом общий компонент:

$ bit tag mycomps/button

6) По этой ссылке создайте scope с именем mycomps.
7) Экспортируйте общий компонент в scope следующим образом:

$ bit export your-bit-username/mycomps

Теперь ваш компонент экспортирован в Bit, и его можно использовать в любом проекте. Сочетание этого рабочего процесса с масштабируемой и модульной структурой проекта на React, может упростить обслуживание (change once, update anywhere) и ускорить процесс разработки.

Оригинал

Другие материалы по теме:

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

eFusion
01 марта 2020

ТОП-15 книг по JavaScript: от новичка до профессионала

В этом посте мы собрали переведённые на русский язык книги по JavaScript – ...
admin
10 июня 2018

Лайфхак: в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расск...