Как повторно использовать компоненты в проектах Gatsby.
Повторное использование компонентов между сайтами Gatsby - отличный способ ускорить доставку и предоставить пользователям единообразный внешний вид в каждой точке взаимодействия.
В этой демонстрации я буду использовать Bit для публикации компонентов React с маркетингового сайта, созданного с помощью Gatsby. Затем я использую опубликованные мной компоненты, чтобы быстро создать новую маркетинговую страницу.
Вот шаги, которые мы пройдем:
- Создайте маркетинговый сайт Гэтсби - «Купите золотую рыбку» 🐠
- Используйте Bit для публикации компонентов сайта
- Создайте новый сайт Gatsby, используя компоненты, опубликованные на странице «Buy a Goldfish» ✌️
Итак, что такое Бит?
Когда мы совместно используем наши компоненты и повторно используем их в проектах, мы можем создавать сайты быстрее и безопаснее. Нам не нужно тратить время на изобретение велосипеда, и мы можем обеспечить единообразие взаимодействия с нашими пользователями.
Bit - это платформа, которая позволяет легко публиковать и документировать компоненты любого проекта. Он предоставляет как инструмент командной строки для изоляции и публикации компонентов, так и облачный концентратор для их размещения и отображения. Довольно полезно при создании разных веб-сайтов Gatsby с одинаковыми компонентами.
1. Создайте мой веб-сайт Гэтсби «Купите золотую рыбку»
Я создам целевую страницу для моего многообещающего бизнеса по продаже золотых рыбок. Я уверен, что это заинтересует многих любителей золотых рыбок по всему миру.
Структура моего сайта
Стиль в этом проекте выполнен с использованием компонентов стиля. Каждый компонент тематически оформлен с помощью объекта theme (в файле theme.js), который также будет опубликован.
Я также разделил свои компоненты на четыре группы: общие, элементы, блоки и разделы.
- общие: эти компоненты используются на каждой странице и имеют «общий эффект» на странице.
- элементы: это очень простые компоненты, а это означает, что они могут использоваться повторно и не зависят от окружающей среды.
- блоки: это сложные, похожие на шаблоны, повторно используемые компоненты.
- разделы: Это очень конкретные составные части, из которых состоят разделы страницы.
|-- src
|-- components
|-- common
|-- Seo.js
|-- Layout.js
|-- theme.js
|-- sections
|-- HeaderSection.js
|-- GetStartedSection.js
|-- etc.
|-- elements
|-- Button.js
|-- TextInput.js
|-- etc.
|-- blocks
|-- Features.js
|-- HeaderForm.js
|-- etc.
Многоразовые компоненты
В этой демонстрации я решил опубликовать свои блоки, элементы и общие компоненты - и исключить более конкретные «разделы».
В общем, нет абсолютно правильного или неправильного в отношении того, какие компоненты следует публиковать. Все зависит от того, как вы собираетесь использовать свою коллекцию. Например, не имеет смысла публиковать очень большие композиции в коллекции, которая служит системой дизайна, но для нас это имеет смысл, поскольку мы используем нашу коллекцию для создания других, похожих, сайты.
Совместное использование бетонных или «умных» компонентов
Как упоминалось ранее, нет причин, по которым вы не должны делиться чем-либо, что может оказаться полезным. Это не обязательно должны быть исключительно чистые и «глупые» компоненты пользовательского интерфейса. Это должно быть что-нибудь полезное для вас и вашей команды.
Например, в этой демонстрации я опубликовал компонент SEO, который запрашивает данные из метаданных сайта и соответствующим образом маркирует сайт. Может показаться, что это не очень многоразовый компонент, но в контексте Gatsby это действительно так.
Запрос должен быть структурирован одинаково для разных проектов Gatsby. То же самое и в том случае, если бы мы использовали одну и ту же автономную CMS для нескольких проектов. Если мы часто используем конкретную логику, то это должен быть компонент многократного использования.
Публикация компонентов с помощью Bit
Для начала я установлю Bit на свой компьютер:
$ npm install bit-bin --global
Затем я перейду в корневой каталог своего проекта и инициализирую рабочее пространство Bit:
$ bit init
Пора начать отслеживать мои компоненты. Я добавлю все три группы и помечу каждую из них соответствующим пространством имен, чтобы упростить их поиск и управление как в моем локальном проекте, так и в их общей коллекции. Я использовал знак *, чтобы выбрать все компоненты в каждом каталоге.
$ bit add src/components/elements/* --namespace elements $ bit add src/components/blocks/* --namespace blocks $ bit add src/components/common/* --namespace common
Затем я настрою компилятор для отслеживаемых компонентов. Это по сути отделит их от моей настройки сборки и обеспечит их запуск в других проектах.
bit import bit.envs/compilers/react --compilerЗатем я «помечу» их (флаг -a или --all используется для выбора всех отслеживаемых компонентов, которые были изменены с момента последнего тега).
$ bit tag -a
Пришло время перейти на Bit.dev и создать новую коллекцию для моих компонентов, которые скоро будут опубликованы. Это бесплатно и занимает около 1 минуты.
Теперь я могу публиковать («экспортировать») свои отмеченные компоненты:
$ bit export eden.buy-a-goldfish // Publish to <user-name>.<collection-name>
И вот конечный результат (обратите внимание, я также добавил пример кода, чтобы теперь я мог визуально увидеть и опробовать компоненты):
Повторное использование компонента для создания нового веб-сайта
Отклик на мою маркетинговую страницу был хорош - я получил много писем, которые, без сомнения, показывают, что люди ищут удобного золотого питомца 🙂
Итак, я решил запустить новую маркетинговую страницу с простой кнопкой «Купить сейчас» и другим сообщением.
Чтобы упростить задачу, я начну новый проект Gatsby, используя gatsby-starter-default стартер.
gatsby new new-marketing-site https://github.com/gatsbyjs/gatsby-starter-default
Я воспользуюсь несколькими из недавно опубликованных компонентов, чтобы создать более простую версию предыдущего заголовка:
$ npm i @bit/eden.buy-a-goldfish.common.layout $ npm i @bit/eden.buy-a-goldfish.blocks.header $ npm i @bit/eden.buy-a-goldfish.blocks.header-text-group $ npm i @bit/eden.buy-a-goldfish.elements.button
Мы можем установить Bit компоненты с помощью NPM или Yarn (мы также можем клонировать их в наш репозиторий с помощью bit import, чтобы мы могли их модифицировать и возвращать в их коллекцию с измененной версией - но это выходит за рамки данного руководства).
Как видите, для демонстрации я использовал NPM.
Затем я воспользуюсь этими компонентами на index.js странице.
Я хотел бы показать некоторые функции на моей новой маркетинговой странице. Для этого я установлю свой Feature компонент. Как видите, он был построен как составной компонент , чтобы было легко добавлять и настраивать новые функции, перечисленные в нем (с использованием JSX).
Это здорово, но это также создает много шаблонов. Чтобы упростить мне задачу и сэкономить время, я скопировал пример кода, представленный на его странице в Bit.dev .
$ npm i @bit/eden.buy-a-goldfish.blocks.features
Теперь у меня есть новая маркетинговая страница, составленная в кратчайшие сроки 🎉
Заключение
Раньше Гэтсби рассматривался только как генератор статических сайтов, но в последнее время стало очевидно, что это гораздо больше. Gatsby делает нашу жизнь разработчиков проще и проще благодаря своей великолепной экосистеме плагинов, стартеров и т. Д. Благодаря этому мы создаем с оптимизированным кодом, который не только делает хорошие приложения и веб-сайты, но и позволяет нам доставлять их быстрее, чем мы могли бы в противном случае.
В том же духе мы ищем решения, которые сделают наш код более пригодным для повторного использования в разных проектах. Нам бы очень хотелось иметь возможность писать хороший код и никогда больше не делать этого.
Вот тут-то и пригодится Bit. Он выполняет за нас большую часть грязной работы по публикации и совместному использованию компонентов. Он помогает изолировать компоненты, автоматически генерирует документацию, отображает наши компоненты на своей игровой площадке и уведомляет нас о любых изменениях, как в самом компоненте, так и в его использовании (например, если новый проект недавно установил один из наших компонентов).
Вместе Gatsby и Bit создают отличную среду разработки, в которой я могу создавать компоненты и использовать их для более быстрого создания новых веб-сайтов.
Спасибо за чтение, надеюсь, вам понравилось!
