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

Введение

Это руководство по организации кода при использовании React и styled-components, которая представляет собой библиотеку CSS-IN-JS, то есть вы пишете стилизацию в файле javascript. Существуют и другие варианты CSS-решений и их компромиссы, но это тема для другого раза.

В процессе работы над своими проектами я чувствовал потребность в некоторой структуре для масштабирования разработки. Благодаря удаче и исследованию, я наткнулся на концепции Directory-per-Component и Directory-per-view. На Survive.js есть отличный ресурс, рассказывающий об этой структуре.

Структура папок — как все организовать

Основная структура папок должна выглядеть примерно так:

• src/
  • компоненты/
  • страницы/
  • активы/
  • изображения/
  • шрифты/

Папка components предназначена для любых элементов, которые могут быть использованы повторно во всем проекте. Заголовки, колонтитулы, стилизованные кнопки и т.д. Папка pages предназначена для… ну, страниц, например, тех, на которые указывают ссылки. Папка assets находится в исходной папке, потому что добавление их через javascript имеет некоторые преимущества, например, объединение ресурсов для меньшего количества сетевых запросов (что ускоряет работу сайта). Полное объяснение смотрите в документации create-react-app.

Структура файлов — как организовать каждый фрагмент

Базовая файловая структура имеет две версии — state-full или state-less. Это чрезмерное упрощение (и, вероятно, плохое), поэтому я принимаю предложения по замене.

Элементы без состояния

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

Эти элементы часто используются повторно, поэтому их следует поместить в папку components. Для них потребуется два файла: component.styled.js и index.js. Они будут находиться в папке components. Это будет выглядеть примерно так:

• src/
  • components/
  • CoolButton/
    • CoolButton.styled.js
    • index.js

ЗАЧЕМ?

Использование индексной структуры позволяет опустить импортируемый элемент. Это устраняет путь импорта ./components/CoolButton/CoolButton.component. Вместо этого вы получаете ./components/CoolButton с подразумеваемым индексом. (Подробнее об этом позже.) Кроме того, использование CoolButton.styled.js указывает (вам и другим), что файл относится к стилизации.

• Как насчет использования отдельного css-файла? Он делает то же самое!

Стилизованные компоненты устраняют необходимость беспокоиться об именах классов. Меньше решений — больше мозговой энергии! Проверьте усталость от принятия решений.

• А как насчет потери селекторов классов? Как тогда ссылаться на элементы?

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

Небольшое замечание об экспорте индексов

Как уже объяснялось, index.js является точкой входа по умолчанию в node.js — то, что используется webpack для пакетирования вашего проекта.

Интересным инструментом для автоматизации создания индекса является create-index. Я еще не тестировал, но обязательно попробую.

Государственные элементы

Stateful-элементы, скорее всего, будут страницами (или представлениями, или маршрутами), где компоненты объединяются и реализуется логика.

Структура будет примерно такой:

• src/
  • страница/
  • DataModal/
    • DataModal.styled.js
    • DataModal.js
    • index.js

В то время как statefull-элементы по своей файловой структуре очень похожи на stateless-элементы, существует дополнение — логический файл DataModal.js. Именно здесь вы используете стилизованные компоненты, созданные в DataModal.styled.js, и задаете им поведение. Если стилизованный файл создает куклу, логический файл дает кукле ниточки и превращает ее в марионетку.

Как будут выглядеть эти файлы?

При такой структуре существует базовая схема Component.styled.js - index.js - Component.js. Конечно, этим дело не ограничится (куда впишутся тесты?!), но это хорошее начало.

#Component.styled.js
import styled from 'styled-components';

const ModalFrame = styled.div`
  background-color: lightblue;
  font-family: Lato, sans-serif;
  /* --- more styling -- */
`;
// As you can see, it looks just like css, but in js! :D
export { ModalFrame };

#Component.js
import { ModalFrame } from './Component.styled.js';

const DataModal = () => {
  return <ModalFrame> {/*Some logic inside*/}</ModalFrame>;
};
export { DataModal };

#index.js
export { DataModal as default } from './Component'; // './Component.styled' would also work

• Осталось только импортировать компонент! Поскольку index.js является точкой входа по умолчанию (как мы видели ранее), вы можете просто импортировать каталог напрямую (извините, мне пришлось):

#SomeView.js
import DataModal from './components/Datamodal'; // Look at that nice import!
// Rest of code

Резюме

Итак, вот и все: структурированный способ организации вашего проекта, а также небольшое введение в стилизованные компоненты. Это то, что я буду использовать в течение некоторого времени — хотя я уже давно присматриваюсь к tailwind. Посмотрим!

Это мой первый раз, когда я пишу о разработке программного обеспечения, так что я приму любые отзывы, которые могут быть у вас, ребята!