Създайте своя собствена React библиотека през 2020 г.: стъпка по стъпка

Публикуване на вашите React компоненти в NPM

2020 През по-голямата част от кариерата ми в React основната ми цел беше да създавам приложения. Въпреки че изграждането на моя собствена NPM библиотека ме интересуваше, се чувствах някак недостижимо. Не е. Публикуването на React компонент в NPM, който други разработчици могат да използват, е лесен процес и може да бъде невероятно възнаграждаващо. Предстоящата година е подходящо време да разширим хоризонтите си и да видим как можем да използваме уменията си за React, за да се отблагодарим на общността.

Какво ще изградим:

Днес ще изградим примерен компонент за публикуване в NPM, обикновена средна джаджа. Компонентът ще приеме потребителско име като проп, след което ще извлече най-новата активност на потребителя. Историите и коментарите на потребителя ще бъдат показани в модален вид.

Можете да вмъкнете тази джаджа в уебсайта си, за да покажете своите Medium истории. Играйте с демото и потърсете вашето потребителско име, за да усетите как работи.

Как ще го изградим:

Благодарение на простата create-react-library този процес е предимно автоматизиран. Нека да вървим стъпка по стъпка и да създадем a<MediumProfile /> компонент.

Инсталирайте create-react-library глобално:

npm install -g create-react-library

Инициирайте библиотека:

create-react-library

Ще бъдете подканени да въведете следните подробности:

Сега всичко ще бъде опаковано и готово за вас.

Стъпка 1: cd в проекта и стартирайте npm start. Това ще наблюдава модула src/ и ще го прекомпилира в dist/ всеки път, когато правите промени.

Стъпка 2: Отворете втория команден ред, CD в папката /example и стартирайте npm start.

Вече имаме сървър на живо, който следи за промени в src или example и презарежда в реално време, за да можете лесно да разработите своя компонент.

Ето как трябва да изглеждат тези стъпки:

Има два основни файла, с които ще работим.
1: src/index.js
2: example/src/App.js

Първият файл (src/index.js) е нашият експортиран компонент, който ще се използва от други разработчици.

Този файл ще съдържа компонент, който ще получава реквизити от потребителя и ще произвежда някакъв резултат.

Забележете, че проверяваме типовете на получените реквизити. Например, ние ще позволим на потребителя да предаде проп за „размер“ (число), който ще промени размера на бутона Medium. Това означава, че трябва да добавим size: Proptypes.number към нашите проптипове.

Вторият файл (example/src/App.js) е примерно приложение, което импортира нашия компонент.

Това ще даде на компонента подпори и ще доведе до резултата. Това е, което ще работи в нашия браузър.

Сега, когато имаме двата файла, от които се нуждаем, можем да започнем да изграждаме нашия компонент в src/index.js.

Нашият компонент просто ще покаже бутон, който потребителят може да щракне, за да извлече активността на средния потребител.

След щракване се отваря модал и показва извлечените потребителски данни. Добавете някои състояния за проверка на грешки и зареждане и ще имаме напълно функционален компонент.

За да използваме външни пакети (като react-simple-modal) трябва да ги добавим към нашия package.json, както като peerDependencies, така и като devDependencies. Добавете следните зависимости към главния package.json:

"react-fade-in": "^0.1.6",
"simple-react-modal": "^0.5.1"

Сега просто yarn install от главната директория и npm start от главната директория и отново примерната директория.

Вече можем да използваме пакетите react-fade-in и simple-react-modal в нашия компонент и когато други разработчици инсталират нашия пакет, те също ще инсталират peerDependencies, свързан с него.

Страхотно, сега всъщност можем да изградим нашия компонент.

Създадох API, който извлича RSS емисията на среден потребител, и го хоствах на Heroku. За обхвата на тази статия просто ще ви накарам да копирате целия компонент в src/index.js, защото бихме искали да се съсредоточим върху публикуването на компонента в NPM.

Копирайте следния код в src/index.js, като замените цялото предишно съдържание:

Бутонът ще бъде изображение (medium.png), така че продължете и изтеглете изображението оттук и го поставете в папката /src.

Това е! Сега преминете към example/src/App.js и заменете съдържанието със следния код:

Ние просто импортирахме компонента MediumProfile от „react-medium-profile“, предоставихме му username проп и той вече може да извлече нашия профил.

Публикуване в NPM

Сега тази част не може да бъде по-лесна. create-react-library автоматично създава демонстрация на GitHub страници от вашата папка examples и публикува в NPM, използвайки вашия README като описание.

Уверете се, че първо сте влезли в NPM с помощта на npm login и след това изпълнете:

npm publish: Това автоматично публикува вашия пакет в NPM

npm run deploy: Това автоматично внедрява вашия пример в страниците на Github

„Вижте пълния ни проект в Github“

Направи го!

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

Писането на компоненти за разработчиците вместо писането на приложения за потребителите ви излага на различен начин на мислене. Това е страхотна практика и ви прави по-силен програмист и е чудесен начин да се отдадете на общността с отворен код.

Уверете се, че сте написали хубав README с няколко GIF файлове, за да направите пакета си по-привлекателен и интуитивен, и добавете някои инструкции за това какви подпори са налични за предаване.

Това е! Ако търсите още съвети за React за 2020 г., вижте как да надстроите своя React UX за следващата година: