Источник: Nuances of Programming
Bit упрощает использование компонентов из библиотек и приложений. Bit’s hub (bit.dev) облегчает поиск и взаимодействие с этими компонентами.
В этой статье мы узнаем, как найти и установить UI-компонент из bit.dev для использования в приложении. Мы будем использовать Material-UI, самую популярную UI-библиотеку.
Для начала…
Используем компоненты в коллекции Material-UI на Bit. Material-UI — это группа компонентов React, реализующих Google’s Material Design в React. Она состоит из готовых компонентов, таких как Tabs, Table, Modals, Spinners, Buttons и т. д. Все компоненты также доступны в этой коллекции Bit: material-ui by mui-org · Bit
- Чтобы превратить библиотеку или приложение в коллекцию повторно используемых компонентов используйте Bit-CLI. Процесс займет считанные минуты и не потребует рефакторинга.
Поиск компонента Tab
Переходим на bit.dev и ищем компонент material-design tab в React. В поиске вводим “material tab react”:
Круто! Мы нашли несколько полезных компонентов из популярных библиотек! Выбираем первый вариант, нажав на компонент в результатах.
Использование компонента Tab
Создаем новое приложение React и размещаем в нем компонент Tab. Компонент tab, который мы будем использовать:
Компоненты Tab упрощают изучение представлений и переход между ними. С помощью Tab можно выполнить переходы между группами связанного содержимого, находящихся на одном уровне иерархии, а также организовать их.
На странице компонента можно:
- Установить его с NPM или Yarn.
- Поэкспериментировать с ним на игровой площадке.
- Ознакомиться с документацией API из кода.
Теперь переходим к использованию этого компонента в новом приложении React. Поскольку эти компоненты находятся в Bit, можно выбрать и использовать индивидуальные компоненты вместо установки целой библиотеки.
Для начала выполним глобальную установку инструмента Bit CLI.
npm i bit-bin -g
Перед созданием проекта React убедитесь, что create-react-app установлен:
npm i create-react-app -g
Выполняем скаффолдинг проекта React:
create-react-app react-bitcd react-bit
Затем инициализируем bit в каталоге приложения root:
cd "root-directory"bit init
react-bit — это новый проект React, в котором мы будем использовать компонент Material-UI Tab. Для внесения изменений в компонент (например, стилизации) исходный код можно получить с помощью команды bit import:
bit import mui-org.material-ui/tab
Поскольку нам понадобится готовый компонент, используем клиент NPM для установки из реестра bit.dev.
В первую очередь настраиваем bit.dev в качестве реестра scoped в клиенте NPN:
npm config set '@bit:registry' https://node.bit.dev
Для чего запущена команда выше? Реестр NPM настроен для извлечения модулей с префиксом @bit/ из реестра https://node.bit.dev. Это связано с тем, что устанавливаемые модули хранятся не в реестре NPM npmjs.com, а в node.bit.dev. При поиске mui-org.material-ui.tab в npmjs.com не будет найдено ни одного пакета, поскольку они находятся в другом месте.
Если модули находятся в somewhere.dev, то для npm нужно указать somewhere.dev: npm config set '@sm:registry' https://somewhere.dev перед извлечением модулей npm i @sm/some_module. С заданными настройками npm попытается извлечь модуль из своего реестра. Помимо этого, префикс перед :registry говорит npm, что при его встрече с npm i нужно выполнить извлечение из набора реестра. Таким образом, при наличии префикса @bit/ он извлекает из https://node.bit.dev, а при наличии префикса @sm/ — из https://somwhere.dev.
При переходе на https://node.bit.dev/mui-org.material-ui.tab в браузере можно найти информацию о возвращенном компоненте Material UI Tab:
Используем команду yarn add или NPM install для установки компонента:
// yarn
yarn add @bit/mui-org.material-ui.tab
// NPM
npm i @bit/mui-org.material-ui.tab
Admin@PHILIPSZDAVIDO MINGW64 /c/wamp/www/developerse/projects/post_prjs/react-bit (master)
$ npm i @bit/mui-org.material-ui.tab
[..................] \ loadDep:supports-color: sill resolveWithNewModule react-is@16.8.6 checking installable status
Эта команда установит компонент Tab и его зависимости.
Для создания Tab в Material UI понадобится компонент Tabs. Установим его:
npm i @bit/mui-org.material-ui.tabs
Также устанавливаем компонент Paper:
npm i @bit/mui-org.material-ui.paper
Теперь создаем компонент TabExample, в котором отобразится компонент material-ui Tab.
Визуализируем TabExample в App.js
Затем запускаем npm run serve для работы приложения. Перейдите на localhost:3000 в браузере, чтобы увидеть его визуализацию.
Примечание: npm i * или yarn add * используются только при извлечении готового компонента. Если нужно внести изменения в компонент, используется bit import *.
Круто! Теперь в нашем приложении есть компонент Tab из MUI. Продолжим разработку приложения React и добавим еще несколько компонентов.
Компонент Table
Рассмотрим установку и использование компонента MUI Table в проекте React.
Начнем с установки компонента Table.
npm i @bit/mui-org.material-ui.table
yarn add @bit/mui-org.material-ui.table
Также понадобятся компоненты TableBody, TableCell, TableHead, TableRow:
В файле App.js импортируем компонент SimpleTable и визуализируем его:
Запускаем команду npm run start и переходим на localhost:3000, чтобы увидеть изображение компонента Table.
Здорово! Мы использовали несколько компонентов “из коробки”, доступных на bit.dev, и создали базовое приложение React за считанные минуты.
Заключение
Мы рассмотрели использование компонентов Tabs и Table из коллекции MUI на Bit в проектах React. Сначала выполнили скаффолдинг проекта React, глобально установили инструмент Bit CLI, а затем настроили реестр npm и добавили компоненты, найденные на bit.dev.
Спасибо за внимание!!!
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: How to Find and Use Components from bit.dev to Build Your App
