Если вы читаете эту статью, я предполагаю, что вы знакомы с библиотеками компонентов пользовательского интерфейса, такими как Material UI, Ant Design, Semantic UI, Chakra UI и другими. Эти библиотеки предоставляют такие компоненты, как кнопки, всплывающие окна, ярлыки. Спиннеры, загрузчики и т.д.
К счастью, настройка аналогичной библиотеки компонентов React UI довольно проста, что позволяет создавать многократно используемые компоненты, которые можно импортировать и использовать в любом проекте React. В этой статье мы шаг за шагом рассмотрим процесс создания вашей собственной библиотеки компонентов React.
Начало работы
Создание структуры папок может оказаться сложным, поэтому мы пойдем простым путем, используя CLI-инструмент create-react-library.
Этот инструмент настраивает наш проект с Rollup, Babel и Jest для комплектации, транспонирования и тестирования. Он также позволяет нашему проекту поддерживать TypeScript, сложные одноранговые зависимости и модули CSS.
Установка create-react-library
Этот пакет требует Node версии 10 или выше. Последнюю версию Node можно загрузить с официальной страницы загрузок NodeJs.
Установите create-react-library, выполнив следующую команду из терминала:
npm install -g create-react-library
Создание нашего проекта
Теперь, когда мы установили create-react-library, мы можем выполнить приведенную ниже команду для создания нашего проекта. В этом руководстве мы назовем наш проект test-library. Вы можете изменить название на любое другое.
create-react-library test-library
Или с помощью npx:
npx create-react-library test-library
Вам потребуется ввести:
- Название пакета
- Описание пакета
- GitHub Handle автора
- Путь к репозиторию GitHub
- Лицензия
- Менеджер пакетов
- Шаблон
После завершения установки откройте только что созданный проект в текстовом редакторе, у вас должна получиться структура папок и файлов, как показано на скриншоте ниже. Если что-то кажется неправильным, повторите предыдущую команду.
Пакет создает локальный репозиторий и связывает пакеты вместе, позволяя нам просматривать и тестировать наши компоненты локально. Это довольно круто.
Разработка
Наша локальная разработка разделена на две отдельные части:
- Использование rollup для просмотра и компиляции нашего кода из
src/в папкуdist/. - Запуск и прослушивание изменений в проекте
example/react
Запуск примера приложения react
Базовое приложение react, которое уже связано с библиотекой, которую мы создаем, можно найти в папке example/. Запустите сервер разработки react app:
cd example # change directory into the example/ folder
npm start # runs a dev server for the react app
Вы можете получить ошибку, подобную этой:
{
...
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
В этом случае откройте файл package.json в папке example/ и измените объект сценария по умолчанию на:
"scripts": {
"start": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider start",
"build": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider build",
"test": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider test",
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider eject"
}
Когда вы перейдете по адресу localhost:3000/ в предпочитаемом браузере, вы должны увидеть следующее.
Запуск кода компонента
В базовом каталоге выполните следующее, чтобы следить за изменениями и компилировать код из нашей папки src/ в режиме реального времени
npm start # runs rollup with the watch flag
Код компонента
Пример компонента ExampleComponent был создан для нас в папке src/ базового каталога. Этот компонент принимает свойство text и отображает простой пользовательский интерфейс, как видно в браузере.
import React from 'react'
import styles from './styles.module.css'
export const ExampleComponent = ({ text }) => {
return <div className={styles.test}>Example Component: {text}</div>
}
Стили для компонента можно найти в файле styles.module.css. Отсюда вы можете придать компоненту любой стиль.
/* add css module styles here (optional) */
.test {
margin: 2em;
padding: 0.5em;
border: 2px solid #000;
font-size: 2em;
text-align: center;
}
Скомпилированный код нашего компонента(ов) находится в папке dist. Это папка, которую мы будем развертывать на npm.
Импорт нашей библиотеки
В файле example/src/App.js наша библиотека импортируется вместе с файлом CSS, содержащим все наши стили.
import React from 'react'
import { ExampleComponent } from 'test-library'
import 'test-library/dist/index.css'
const App = () => {
return <ExampleComponent text="Create React Library Example 😄" />
}
export default App
Публикация нашего проекта в npm
Мы выполняем следующую команду, чтобы сгенерировать commonjs и es версию нашего кода, поместить ее в папку dist/ и опубликовать в npm:
npm publish
Вот и все!
Развертывание на GitHub Pages
npm run deploy
Это создает версию сборки нашего example/ React приложения, в котором мы импортировали и отобразили наши компоненты. Она будет выложена в наш репозиторий GitHub, и будет создана страница GitHub.
Заключительные слова
Вот и все! Мы создали нашу собственную библиотеку компонентов react, которую можно импортировать и использовать в любом проекте react.
Milky UI — это проект компонента пользовательского интерфейса react с открытым исходным кодом, над которым я работаю. Я создал проект, используя тот же метод. Код доступен на GitHub. Он также доступен на npm
Надеюсь, вы нашли этот пост полезным. Увидимся в следующей статье