Создание и публикация библиотеки компонентов React

Опубликуйте собственную библиотеку компонентов в npm менее чем за 10 минут.

Мы собираемся создать простую библиотеку компонентов React, которую мы можем опубликовать через npm и использовать ее в других проектах React. В качестве учебного пособия я создам компонент, который принимает свойство color и отображает элемент h1 с этим цветом. Давай начнем!

Самый простой способ создать библиотеку компонентов React - использовать инструмент командной строки под названием create-react-library.

npx create-react-library

Это запустит небольшой интерактивный процесс:

Имя пакета будет именем вашей библиотеки в npm.

Как только это будет сделано, вы увидите две команды на своем терминале.

Выполните эти две команды выше на разных вкладках терминала. Они оба должны бежать. Первая команда отслеживает изменения и объединяет вашу библиотеку, а вторая выполняет предварительный просмотр вашей библиотеки в базовом приложении React, которое будет открыто в вашем браузере.

Теперь откройте каталог проекта в текстовом редакторе, и давайте взглянем на пару файлов в нем:

/src/index.js

Как видите, это стартовый файл для вашей библиотеки. Сюда вы будете экспортировать все свои компоненты. На данный момент по умолчанию экспортируется один компонент под названием ExampleComponent.

/example/src/App.js

В папке `example` вы можете увидеть, что тот же ExampleComponent импортирован из« цветного заголовка », названия проекта, которое я использовал выше.

Вернитесь в /src/index.js

Я собираюсь внести некоторые изменения в /src/index.js.

Удален импорт style.css и файл.
Изменено имя компонента на ColoredHeadingOne.
Добавлены свойства цвета и propType.
Заменил компонент <div> на компонент h1 и передал свойство цвета как стиль.

Протестируйте в /example/src/App.js

Теперь вместо импорта ExampleComponent я хочу импортировать свой ColoredHeadingOne. Я также передам color опору.

Тест в браузере

Экспорт более чем одного компонента

В /src/index.js мы можем экспортировать более одного компонента.

Для краткости я продублировал ColoredHeadingOne, изменил имя на ColoredHeadingTwo и удалил ключевое слово по умолчанию для обоих компонентов.

Давайте импортируем наш второй компонент в /example/App.js

Нажать на Github

В качестве дополнительной информации давайте разместим наш код на Github.

Сначала создайте репо в Github. "Руководство"

Теперь скопируйте URL-адрес клона HTTPS вашего репозитория.

Теперь в каталоге вашего проекта (в терминале) сделайте следующее:

git add -A
git commit -m"Initial Commit"
git git remote add origin <YourRepoHTTPSURL>
// e.g git remote add origin https://github.com/.../....git
git push origin master
Username : <-- Enter your Github username
Password : <-- Enter your Github password

Репозиторий Github должен быть обновлен.