Введение

Мы все знаем, что эта фраза «Стоять на плечах гигантов» (лат. nanos gigantum humeris insidentes) выражает значение «открывать истину, опираясь на предыдущие открытия»), и мы постоянно полагаемся на чужую работу. когда мы создаем наши собственные проекты. Часто мы на самом деле не задумываемся об этом, но каждый раз, когда мы что-то строим, даже если это что-то маленькое вроде проекта «hello world», мы используем чужую работу. Наверное, только когда вы переключаете и включаете лампу, вы полагаетесь на себя… но даже тогда вы полагаетесь на открытие электричества.

Часто мы не задумываемся об этом, но каждый раз, когда мы что-то строим… мы используем чужую работу.

- почти каждый разработчик

Итак, в понимании всего мира с открытым исходным кодом, мы потребляем пакеты, библиотеки, модули, написанные кем-то другим и предоставленные всем нам без каких-либо затрат для создания потрясающих вещей.

У меня застряло в голове, что в конце концов я должен начать отдавать и помогать кому-то еще, как я получаю помощь от кого-то другого. «Дайте, и дано будет вам». Я твердо верю, что обмен знаниями или помощь другим доставляет человеку огромное чувство удовлетворения.

«Давайте, и вам будет дано»

- каждый позитивно мыслящий

Итак, давайте остановимся на философском тезисе и начнем говорить о том, что я сделал.

Хорошо забытый репозиторий, в котором хранятся вещи, которые могут использовать другие

Я разработал простую симпатичную систему администрирования для своих сторонних проектов, используя AngularJS, Node и MongoDB, и в течение довольно долгого времени она лежала в одном частном репозитории и ждала, когда в следующем проекте ее можно будет использовать.

На затылке у меня была идея опубликовать что-то для всего мира, и, естественно, я пришел к идее разбить эту систему администрирования на библиотеку компонентов пользовательского интерфейса (UI) React и саму систему администрирования, использующую эти компоненты. И, конечно же, оба они должны быть опубликованы в мире. Это была работа, которую я проделал, сидя и ожидая в хранилище где-то почти спрятанном как золотое сокровище, которое заслуживает того, чтобы быть отданным в виде пакета NPM для использования другими.

Что я сделал и как я это сделал?

Краткая информация о сборке пакета NPM

Я использовал инструмент CLI библиотеки компонентов React npx create-react-library, чтобы создать пустую библиотеку и начал создавать компонент за компонентом. Большинство компонентов довольно презентационны, что означает, что они представляют собой просто HTML-элементы, красиво оформленные и возвращающие контроль разработчикам, использующим их. Я смог отделить кнопку, всплывающее окно, список, карточку и так далее... а затем я создал компонент-оболочку, который будет просто стилизовать все закрываемые элементы с правильным стилем, чтобы придать им нужный вид. .

Но это была самая быстрая часть, как многие из вас знают. Затем наступает скучная часть написания документации. Редактор, который я использую (Visual Studio Code), имеет встроенную функцию предварительного просмотра текущего файла, который вы редактируете, поэтому было легко увидеть файл уценки для пакета (README.md) в том виде, в котором люди будут читать его. Это. Вы знаете, как это бывает, реквизит за реквизитом, тип за типом, вы пытаетесь описать все наилучшим набором слов, чтобы не было так утомительно читать и в то же время перечислять все возможные варианты использования.

Поэтому после написания документации мне пришлось сделать простую демонстрационную страницу, чтобы люди могли увидеть, как работают все компоненты. Проект был очень хорошо настроен, имея папку example, в которую вы можете поместить простое приложение React. Вы можете импортировать свои компоненты, настроить что-то хорошее и представить свои компоненты пользователям.

Конечно, у вас все хорошо подключено…
в вашей голове…
… пока

- почти каждый разработчик

Конечно у вас в голове все хорошо связано..пока что. Вы знаете каждый цикл, каждую переменную или метод. Но через несколько недель такого не будет. Ваш разум будет занят какими-то другими проектами, и если вы вернетесь к коду, вам придется потратить довольно много времени, чтобы вспомнить, что вы делали здесь, там, а также… почему вы сделали это именно так?

Так что комментарии в коде так же важны, как и сам код. И мне все еще нужно их написать, но я больше хочу сначала написать об этом новом пакете NPM. Однако я напишу комментарии в эти выходные, так как они все еще у меня в голове.

Я назвал библиотеку Простой интерфейс администратора, так как это действительно простая библиотека пользовательского интерфейса, сравнивая ее с Bootstrap, Ant.Design или Material UI. Это просто набор простых компонентов для использования в стандартной системе администрирования.

Итак, после заполнения правильной информации в файле package.json и простого npm publish я все это загрузил и опубликовал для всеобщего обозрения, а также демонстрационную страницу, опубликованную на страницах репозитория GiHub.

Итак, без лишних слов хочу представить вам простейшую библиотеку компонентов админки «Simple Admin UI».

Хорошо, хорошо, но где это?

Где вы можете найти пакет NPM

Вы можете найти пакет NPM здесь:
https://www.npmjs.com/package/smpladminui

А демо-страница здесь:
https://mardonchev.github.io/smpladminui/

Вывод

Какие-нибудь заключительные мысли по этой статье?

Я планирую начать работу над React-версией моей простой системы администрирования в понедельник (надеюсь). Сделаю это, используя этот пакет NPM и Firebase для бэкенда.. опубликую здесь, когда он будет готов.

Конечно, все комментарии, конструктивная критика и вопросы приветствуются, как всегда.

Если вы хотите опубликовать свои собственные компоненты реакции NPM, вы можете следить за этой прекрасно написанной статьей по теме:
https://itnext.io/create-and-publish-a-react-component-library-the -легкий способ-6d1798974bc6

Примечание для себя

Пишите комментарии и продолжайте работу над этим делом.

Включите JavaScript для просмотра комментариев, созданных Disqus.

Первоначально опубликовано на https://mdonchev.com 6 декабря 2019 г.