proglib
Сообщение

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

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

0
26515

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

components

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

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

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

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

structure проекта на React

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

Имя файла компонента должно быть в 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. Подробнее здесь.

keep component shallow

Используйте 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) и ускорить процесс разработки.

Оригинал

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

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

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

BUG