Узнайте, насколько простым может быть совместное использование кода и совместная работа, благодаря интуитивно понятному подходу Bit к многократно используемым компонентам React.
Добро пожаловать в будущее, где компоненты React являются строительными блоками сети!
В 2023 году повторное использование и совместное использование этих компонентов важнее, чем когда-либо. С появлением новых технологий и фреймворков каждый день (спасибо JavaScript!), очень важно иметь систему для эффективного управления и распространения ваших компонентов.
В этой статье я покажу вам отличный инструмент, который позволит вам создавать, повторно использовать и делиться компонентами React в одиночку или в составе команды.
Итак, давайте погрузимся и научимся строить лучше вместе!
Представляем бит
Bit станет инструментом, который ответит на все ваши вопросы в этой статье.
- Как вы можете поделиться компонентами React с другими? Кусочек
- Как вы можете легко повторно использовать компоненты React от других в своем приложении? Кусочек
А также ответит на некоторые вопросы, о которых вы еще не задумывались, например:
- Как я могу управлять версиями своих компонентов? С Bit вы можете!
- Как я могу предоставить доступ другим, чтобы они могли внести свой собственный код в мои компоненты? С Bit вы можете!
Я имею в виду, конечно, что другие инструменты позволят вам делать некоторые из этих вещей по отдельности, но не так много таких инструментов, которые на самом деле делают все сразу.
Bit — это платформа, которая позволяет создавать, повторно использовать и совместно использовать составные компоненты в виде модульных фрагментов кода, которые можно легко повторно использовать в проектах и командах. Bit помогает оптимизировать процесс разработки, предоставляя такие функции, как контроль версий, инструменты для совместной работы и управление пакетами, что упрощает совместную работу разработчиков и позволяет быстрее создавать более качественное программное обеспечение.
Узнайте больше здесь:
В целом, Bit предоставляет эффективный и масштабируемый способ управления и совместного использования компонентов, позволяя командам сосредоточиться на создании инновационного и высококачественного программного обеспечения.
В этой статье я собираюсь использовать Bit, чтобы показать вам, как вы можете повторно использовать свои компоненты и делиться ими с другими.
Настройка
Прежде чем двигаться дальше, давайте быстро установим Bit:
npx @teambit/bvm install
Вот и все, вы установили Bit. Поздравляю!
Если у вас возникли проблемы с этим методом, ознакомьтесь с их документацией для получения более подробной информации.
Повторное использование компонентов React с Bit
Допустим, у вас есть работающее приложение, и вы хотите добавить некоторые готовые компоненты, которые вы нашли при просмотре сайта Bit.cloud.
Я выберу этот, это хороший заголовок, который добавляет значок рядом с содержимым заголовка.
Вот как выглядит компонент при рендеринге:
Кстати, вы можете легко изменить код слева, и он обновит результат справа.
Давайте добавим его в проект Next.js, который у меня уже есть. Проект представляет собой очень простой статический веб-сайт с единственной домашней страницей. Ничего особенного, но я хочу, чтобы в заголовке была красивая иконка, так что давайте установим наш компонент.
Для этого вы можете использовать Yarn или NPM, но поскольку мы говорим о Bit, давайте воспользуемся им.
Во-первых, мы должны инициировать рабочую область, иначе Bit CLI не позволит вам ничего установить:
bit init
Вот и все. Теперь вы готовы начать установку компонентов.
Что вы можете сделать с:
bit install @semantic-org/semantic-ui-react.header
В результате вы должны увидеть что-то вроде этого:
Resolving component dependencies for workspace: 'my-workspace-name' ✔ importing components installing dependencies in workspace using teambit.dependencies/pnpm ✔ deduping dependencies for installation ✔ linking components ✔ running pre install subscribers WARN Moving react-dom that was installed by a different package manager to "node_modules/.ignored WARN Moving react that was installed by a different package manager to "node_modules/.ignored WARN Moving next that was installed by a different package manager to "node_modules/.ignored WARN Moving eslint-config-next that was installed by a different package manager to "node_modules/.ignored WARN Moving eslint that was installed by a different package manager to "node_modules/.ignored WARN 1 other warnings Downloading registry.npmjs.org/next/13.1.6: 9.59 MB/9.59 MB, done Downloading registry.npmjs.org/@next/swc-darwin-arm64/13.1.6: 26.4 MB/26.4 MB, done Already up to date Packages are hard linked from the content-addressable store to the virtual store. Content-addressable store is at: /Users/fernandodoglio/.pnpm-store/v3 Virtual store is at: node_modules/.pnpm Progress: resolved 307, reused 55, downloaded 240, added 295, done dependencies: + @bit/semantic-org.semantic-ui-react.header 0.88.2 + @next/font 13.1.6 (13.2.3 is available) + eslint 8.34.0 (8.35.0 is available) + eslint-config-next 13.1.6 (13.2.3 is available) + next 13.1.6 (13.2.3 is available) + react 18.2.0 + react-dom 18.2.0 ------------------------- ✔ installing dependencies using pnpm ✔ running post install subscribers ✔ linking components ✔ deduping dependencies for installation Successfully resolved dependencies for 0 component(s) in 23.294 seconds
Теперь, когда компонент установлен, как вы можете его использовать? Легкий! Как и с любым внешним пакетом. Так:
import Header from '@bit/semantic-org.semantic-ui-react.header' const style = <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css'/> const HeaderExampleIconProp = () => <Header as='h2' icon='plug' content='Welcome to the main site' />
У вас есть оператор import, и это все, что вам нужно. Остальное просто показывает вам, как можно использовать компонент. Вы можете видеть на скриншоте ниже, где я добавил новые стили и новый компонент, остальное — существующий код:
Как видите, процесс использования компонентов из центрального репозитория Bit тривиально прост.
Давайте теперь посмотрим, как мы можем поделиться нашими собственными компонентами, добавив новый пользовательский компонент в код, а затем извлекая его и делясь им со всем миром.
Понравилось ли вам то, что вы прочитали? Подпишитесь на мой БЕСПЛАТНЫЙ информационный бюллетень, где я делюсь со всеми своим 20-летним опытом работы в ИТ-индустрии. Присоединяйтесь к Бродяге старого разработчика!
Создание собственного компонента с помощью Bit
Итак, теперь мы собираемся сделать обратное, вместо того, чтобы извлекать что-то из репозитория центрального компонента, мы создадим новый и отправим его в Bit.cloud.
Это будут шаги:
- Мы создадим область на Bit.cloud, где будет сгруппирован наш компонент.
- Мы будем использовать команду
bit createдля создания шаблона для нового компонента. - Затем мы приступим к обновлению шаблона с фактическим кодом компонента.
- Затем мы пометим код как первую версию.
- Мы опубликуем код.
- И, наконец, в качестве дополнительного бонуса мы установим и повторно используем наш собственный компонент в другом проекте.
Итак, приступим.
1. Создание области
Области — это группы, в которые вы можете поместить свои компоненты. В нашем случае мы заходим в Bit.cloud (я предполагаю, что у вас уже есть здесь учетная запись, иначе идем дальше и зарегистрируемся).
Нажмите кнопку «Создать» в правом верхнем углу, а затем опцию «Область действия».
Это приведет вас на страницу «новая область действия»:
Здесь я установил свою личную общедоступную область с названием «карта». Вы можете выбрать все, что хотите, просто запишите имя пользователя (или название организации, если вы выберете «Команда») и название области действия, они понадобятся вам через минуту. Наконец, нажмите «Создать».
Подготовив область видимости, перейдите к файлу workspace.jsonc (должен находиться в корне вашего проекта). Обновите ключ defaultScope на имя вашей области.
2. Создание компонента
Теперь мы готовы создать наш компонент, мы сделаем это с помощью команды bit create. Эта команда очень интересна тем, что работает с шаблонами. Мы будем использовать шаблон React, но у вас есть несколько других на выбор (или вы можете создать свой собственный). Нажмите здесь, если хотите узнать больше об этой команде.
Компонент, который мы создадим, представляет собой простой карточный компонент, который может содержать внутри больше компонентов и создаст вокруг них красивую визуальную оболочку.
Это команда, которая вам понадобится:
bit create react ui/cards --scope=deleteman.card
Вот что все это значит:
- «Реагирующая» часть — это шаблон. Вы можете указать другие, такие как HTML, MDX или даже React Native.
- Часть «ui/cards» — это папка, в которой будет создан наш компонент. Вы можете посмотреть в корень вашего проекта. Вы должны увидеть папку с именем «‹scope›» (в нашем случае «карта»), внутри нее папка с именем «ui», а внутри нее еще одна с именем «cards». Вот где мы будем работать через минуту.
- Наконец, часть «-scope=deleteman.card» является указанной областью действия. Таким образом, как только мы опубликуем компонент, Bit будет знать, куда его поместить.
3. Обновление кода шаблона
Структура папок для вновь созданного компонента выглядит следующим образом:
По умолчанию Bit создал несколько файлов, в том числе card.docs.mdx , card.composition.tsx (здесь вы можете добавить примеры, показывающие, как использовать ваш компонент) и card.spec.tsx . Все они имеют общий контент внутри них. Написание документов и тестов будет вашей задачей.
Для целей этой статьи давайте сосредоточимся на файле card.tsx:
import styles from './card.module.css'
export function Card({children}) {
return (
<div className={styles.my_card}>
{children}
</div>
)
}
Как видите, ничего особенного в этом нет, это очень простой и универсальный компонент. Он также импортирует стили из локального файла card.module.css.
4. Пометка кода
Когда код готов, теперь нам нужно подумать о том, чтобы выпустить его в мир.
Прежде чем сделать это, убедитесь, что нет недостающих зависимостей с помощью команды bit status. Если с вашим компонентом что-то не так, обязательно исправьте его, прежде чем продолжить.
Если вы получите вывод, подобный этому, то вы готовы двигаться дальше:
Теперь нам нужно «пометить» наш компонент, что эквивалентно совместному запуску git add и git commit.
Итак, с помощью следующей строки мы можем создать версию 1.0.0 для нашего компонента:
bit tag deleteman.cards/ui/[email protected]
Вывод будет очень подробным, но если в конце вы увидите эти строки, это означает, что он работает:
new components
(first version for components)
> ui/[email protected]
💡 Примечание. С Bit вы также можете сравнить версии двух компонентов, что дает вам единое представление обо всех изменениях в разных версиях. Подробнее здесь.
5. Публикация компонента
Следующим шагом в этом процессе, который поможет вам поделиться своими повторно используемыми компонентами, является их загрузка в Bit.cloud.
Если вы до сих пор следили за этим, это должно быть так же просто, как написать:
bit export
Вот и все! Я точно знаю?!
Если все пойдет по плану, вы должны увидеть примерно такой результат:
И если вы зайдете в Bit.cloud, вы должны увидеть компонент вживую, вот так:
Это наш компонент, и он готов к использованию кем угодно!
💡 Подробнее об извлечении и повторном использовании уже существующих компонентов можно узнать здесь.
6. Повторное использование собственного компонента
Теперь для практического примера того, как найти нужный компонент и как его использовать, давайте попробуем найти наш собственный компонент в Bit.cloud, а затем придумаем, как мы можем добавить его в новый проект.
Перейдем к Bit.cloud и в верхней строке поиска введем слово «карта». Вы должны увидеть что-то похожее на это:
Сначала появятся ваши собственные совпадающие компоненты, но вы также сможете увидеть мои, если будете просматривать результаты сообщества.
Я собираюсь выбрать мой компонент, что означает, что я должен увидеть что-то вроде этого:
Документация покажет вам, как его использовать, а также есть живая площадка (под заголовком Render hello world!), с которой вы можете повозиться, чтобы увидеть результат в реальном времени справа.
Теперь, чтобы использовать его, у нас есть несколько вариантов. Если вы нажмете на верхнюю правую кнопку «Использовать», вы увидите их:
Вы можете использовать сам Bit, чтобы установить или импортировать его (подробнее об этом чуть позже), вы также можете использовать NPM, Yarn или даже PNPM. Вы получите всю необходимую информацию, если нажмете на вкладку каждого параметра.
В этом примере я собираюсь придерживаться Bit. Но я уже показал вам, как «установить» компонент, поэтому вместо этого я собираюсь «импортировать» его в новый проект. Разница в том, что когда вы устанавливаете его, вы загружаете зависимость, и она доступна для использования, как и любой другой пакет NPM, но не более того.
Однако, когда вы «импортируете» его, он копируется в корень вашего проекта. Внутри node_modules создается символическая ссылка, поэтому вы можете продолжать использовать ее как обычный пакет NPM, но теперь у вас есть доступ к коду.
Посмотрите на состояние моего проекта после того, как я импортировал компонент Card:
Вы можете увидеть фактический исходный код компонента. Это нечто совершенно новое по сравнению с DX при использовании NPM или любого другого менеджера пакетов. Теперь можно смело обновлять код, если нужно (сколько раз мы хотели изменить код зависимости!), а затем через Bit опубликовать новую версию.
Эта функция удобна, когда вам нужно сотрудничать с другими командами над несколькими межпроектными компонентами. Таким образом, вы можете внести все необходимые изменения, протестировать их в используемом вами проекте и опубликовать новую версию без каких-либо странных обходных путей.
И чтобы доказать мою точку зрения, вот как выглядит использование этого импортированного пакета из кода:
Другими словами, ничего не меняется, я по-прежнему ссылаюсь на него так, как если бы я установил его через NPM или любым другим способом!
Вот как вы это делаете.
Успех!
Нравится вам это или нет, но React почти повсюду в сети. Вы столкнетесь с этим рано или поздно. Создаете ли вы что-то с помощью Next или Remix или просто создаете статический сайт с помощью Astro. Скорее всего, вы ударитесь об него головой.
Тем не менее, создание, совместное использование и повторное использование компонентов не должно быть проблемой, на самом деле это может быть приятно!
Благодаря Bit вы можете быстро поделиться своей работой с другими или использовать чужую работу с помощью одной команды.
Создавайте приложения React с повторно используемыми компонентами, как Lego
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
