Как делиться компонентами между приложениями React и сайтами Gatsby

Как опубликовать компоненты из приложения React и установить их на статический сайт Gatsby.

ОБНОВЛЕНИЕ: Bit выпустила новую версию, радикально меняющую процесс разработки независимых компонентов, подробнее о ней здесь.

Довольно часто можно увидеть одностраничные приложения (SPA), дополненные статической документацией / блогами / маркетинговыми сайтами. Работа по обслуживанию редко меняющегося контента идеально подходит для статических сайтов, поскольку они более удобны для SEO и быстро загружаются.

Когда и приложение, и его статические сайты созданы с помощью React, они могут - и должны - делиться своими компонентами. Это не только способ ускорить разработку за счет максимального повторного использования кода, но и способ поддерживать единообразный пользовательский интерфейс для всех продуктов (поскольку все они относятся к одному бренду).

Публикация компонентов React с помощью Bit

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

В этом руководстве я буду публиковать компоненты из моего сверхпопулярного приложения «Плохие шутки» и устанавливать их в своем «Блоге плохих шуток». Как я упоминал ранее, эти двое, естественно, должны выглядеть одинаково, поскольку они являются частью одного и того же бренда «Плохих шуток».

Совместное использование компонентов между двумя

1. Создайте Приложение для плохих шуток. Публикуйте его повторно используемые компоненты в коллекции компонентов на Bit.dev.
2. Создайте блог с Гэтсби (Блог плохих шуток). Используйте компоненты, опубликованные в приложении Плохие шутки.

1. Создайте «приложение для плохих шуток» с помощью CRA.

$ npx create-react-app bad-jokes
// and then some coding...

Источник:

Я использовал модули CSS, чтобы гарантировать, что в будущих приложениях никогда не произойдет «коллизий имен классов». Я также поместил файлы каждого компонента в один и тот же каталог, чтобы упростить жизнь как издателю компонентов (ваш покорный слуга), так и будущим сопровождающим.

|-- components
  |-- Button
    |-- Button.jsx
    |-- Button.module.css
    |-- index.js
  |-- Card
    |-- Card.jsx
    |-- Card.module.css
    |-- index.js
  |-- Text
    |-- Text.jsx
    |-- Text.module.css
    |-- index.js
  |-- AppBar
    |-- AppBar.jsx
    |-- AppBar.module.css
    |-- index.js
  |-- BadJokesViewer
    |-- BadJokesViewer.jsx
    |-- BadJokesViewer.module.css
    |-- index.js

В моем приложении четыре компонента многократного использования - зацените их в моей коллекции.

2. Публикуйте компоненты из приложения «Плохие шутки».

Для начала установите инструмент Bit's CLI (глобально):

$ npm install bit-bin --global

Перейдите в корневой каталог проекта и инициализируйте рабочее пространство Bit:

$ bit init

Давайте начнем отслеживать все компоненты в каталоге «components»:

$ bit add src/components/*

Установите и настройте компилятор для этих компонентов (таким образом, они не связаны с настройкой сборки этого приложения):

$ bit import bit.envs/compilers/react --compiler

Пришло время «пометить» эти компоненты:

$ bit tag --all

Откройте учетную запись на Bit.dev и создайте новую коллекцию (область для компонентов, которые скоро будут опубликованы).

Затем мы просто войдем в систему с помощью нашего терминала:

$ bit login

Наконец, пришло время опубликовать или «экспортировать» компоненты нашего приложения:

$ bit export eden.badjokes// where 'eden' is the username and 'badjokes' is the collection name

Готово! Обратите внимание на две вещи:

1. Я использовал типы свойств и JSDocs для документирования (и ввода) компонентов Bad Jokes. Bit автоматически сгенерировал документацию для каждого компонента (это также будет работать при использовании React с TypeScript).

Пример

Этот компонент Button имеет тип prop-types. Каждый children и onClickMethod имеют описание, написанное в JSDocs. Параметр disabled по умолчанию установлен на false.

Bit сгенерирует this из приведенного выше кода:

2. Убедитесь, что предоставили вашему компоненту пример (показан на первом из двух скриншотов выше) - в противном случае он не будет отображаться на игровой площадке Bit.

3. Создайте сайт блога Гэтсби для приложения «Плохие шутки».

Чтобы создать блог как можно быстрее, я использовал Gatsby с gatsby-starter-blog стартером:

$ gatsby new bad-jokes-blog https://github.com/gatsbyjs/gatsby-starter-blog

Затем мы перейдем в корневую папку блога и установим два компонента, опубликованных из приложения «Плохие шутки»:

$ npm i @bit/eden.badjokes.button
$ npm i @bit/eden.badjokes.card

Обратите внимание, как каждый компонент устанавливается индивидуально (как и следовало ожидать от независимых компонентов, которые не связаны с библиотекой).

NPM используется здесь для установки наших компонентов, но важно отметить, что он не используется в качестве реестра компонентов (это будет реестр Bit).

Давайте воспользуемся установленными компонентами из файла post-page.js:

И это конечный результат:

И компоненты Bad Jokes делают свое дело на странице index.tsx:

Заключение

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

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

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