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

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

Компоненты React спроектированы как многоразовые кирпичики Lego для вашего пользовательского интерфейса.

Учить больше :

Как мы создаем микро-интерфейсы и Как мы создаем дизайн-систему.

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

Bit помогает вам превращать компоненты в строительные блоки, которыми вы можете делиться, обнаруживать и синхронизировать в ваших проектах и ​​приложениях. Платформа Bit:

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

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

Каждый компонент можно установить с помощью NPM / Yarn или импортировать и разрабатывать из нескольких проектов для внесения и синхронизации изменений.

Вот как это работает в 3 простых шага.

Шаг 1 - Совместное использование ваших компонентов

Вот пример приложения React на GitHub. В этом 5-минутном руководстве мы превратим его в коллекцию компонентов как этот, будем использовать эти компоненты в других проектах и ​​синхронизировать изменения в наших компонентах из любого проекта, в котором они используются.

Как видите, это приложение содержит 8 повторно используемых компонентов React в каталоге src/components и 1 компонент глобальных стилей по другому пути.

Для этой быстрой демонстрации вы можете клонировать это репо или использовать свой собственный проект. Если вы клонируете приложение, обязательно удалите файлы bit.json и .bitmap.

Сначала давайте установим Bit и войдем в систему для подключения к вашей учетной записи bit.dev, а затем Инициализируем его для вашего проекта.

# Install Bit
$ npm install bit-bin -g
# Authenticate to bit.dev
$ bit login
# Initialize it for your project
$ cd movie-app
$ bit init

Добавление сред сборки и тестирования

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

При работе с компонентами React добавление компилятора также позволит Bit отображать ваши компоненты в веб-интерфейсе Bit (живой пример).

Давайте импортируем эти готовые среды сборки и тестирования для компонентов React (вы всегда можете использовать существующие или создать свои собственные среды).

# Import an environment to build and render the components
$ bit import bit.envs/compilers/react --compiler

# Import an environment to test the components in isolation
$ bit import bit.envs/testers/karma-mocha --tester

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

В этом случае мы будем использовать шаблон глобуса для отслеживания всех реагирующих компонентов в каталоге src/components и конкретный путь для отслеживания компонента css.

# Start tracking your React components + test files
$ bit add src/components/* -t 'src/components/{PARENT}/*.spec.js'
# Start tracking the global styles component
$ bit add src/global.css --id style/global

Обратите внимание, что синтаксис «-t‘ src / components / {PARENT} / *. spec.js ’» не является обязательным, но он сообщает Bit, какие тестовые файлы нужно добавить для ваших компонентов.

Теперь давайте скажем Bit изолировать компоненты от вашего проекта, заблокировав версию и автоматически определив их зависимости файла / пакета.

# Tag the 9 components Bit is tracking
$ bit tag --all 1.0.0

Затем давайте поделимся нашими компонентами с удаленной коллекцией, которая называется коллекцией.

Коллекция работает как «список воспроизведения», в котором упорядочены ваши компоненты, и функционирует как удаленный источник достоверной информации для отслеживания изменений в ваших проектах.

Давайте быстро создадим бесплатную коллекцию на хабе компонентов Bit (вы также можете настроить локальный сервер) и поделимся нашими компонентами с этой новой коллекцией.

# Export the components to your collection
$ bit export <owner_name>.<collection_name>

Вот и все!

Теперь у вас есть коллекция всех ваших любимых компонентов React, которыми вы можете поделиться.

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

Вот и геройская составляющая.

Шаг 2- Использование компонентов в других проектах

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

Чтобы установить компонент в другие проекты, все, что вам нужно сделать, это настроить bit.dev в качестве ограниченного реестра для вашего клиента NPM с помощью одной команды.

Затем вы можете просто установить любой компонент в виде пакета с помощью команды установки компонента (также находящейся на странице компонента).

Вот и все. Нам не нужно было разделять наши репозитории, стандартные пакеты или много работать - и все наши компоненты теперь доступны с NPM и Yarn.

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

Шаг 3- Внесение изменений с любого конца

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

Включение двустороннего изменения кода создает распределенный рабочий процесс разработки между вашими проектами и членами команды, что ускоряет разработку.

Чтобы внести изменения в компонент, просто импортируйте его в другой проект. Давайте импортируем компоненты HERO в новый проект (вы можете использовать create-react-app, чтобы быстро создать новый проект).

# Import a component into a project
bit import <owner_name>.<collection_name>/components/hero

После импорта вы можете вносить изменения в код по мере необходимости. Bit продолжит отслеживать компонент и определять, что он был изменен.

Давайте запустим bit status, чтобы увидеть, что наш компонент был изменен.

# Check the status of your components
$ bit status
modified components
  > components/hero

Теперь давайте быстро tag снова компонент и export вернем его обратно в вашу коллекцию (или в новую коллекцию - это ваш выбор).

bit tag name_space/component_name
bit export <owner_name>.<collection_name>

Обратите внимание, что при экспорте вы даже можете выбросить компонент из проекта обратно, чтобы он стал зависимостью пакета в package.json файле проекта.

bit export name_space/component_name <owner_name>.<colllection_name> --eject

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

Используя Bit, вы также можете объединить изменения в компоненты в разных проектах. Подробнее об этом вы можете узнать здесь.

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

Сотрудничество в команде

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

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

Каждый член команды может легко найти необходимые компоненты, использовать их в своих проектах и ​​легко внести необходимые изменения в свои приложения.

Вы можете попробовать и превратить свои собственные компоненты (React, Vue или любые другие функции JS) в общие строительные блоки вашей команды.

Bit имеет открытый исходный код, поэтому не стесняйтесь предлагать отзывы или внести свой вклад в проект!

Учить больше:

Как мы создаем микро-интерфейсы и Как мы создаем дизайн-систему.