Как да създадете React компонент и да го публикувате в NPM

Да предположим, че това е изображение за React и NPM

Мислех да направя някакъв катарзис, преди да започна тази история, но нека да преминем към решенията. Катарсисът вече не е необходим, защото алтернативата на Redux без сложност вече е създадена: D

Pttsss! Не забравяйте да прочетете новата статия на React Conditional Rendering (прочетена 1 минута)

Актуализация за 2018 г.: За всеки друг, който се сблъсква с грешки, които Webpack се оплакваше от синтаксиса на jsx с неочакван маркер, тогава, моля, проверете коментара на Крис

Ако искате да създадете компонент React и да го публикувате в NPM, трябва да направите две неща:

  • Създайте компонента
  • Създайте проект, в който ще тествате своя компонент

Създаване на компонента

Да предположим, че нашият компонент ще бъде наречен реакция-фантазия

След това ръчно създайте тези файлове:

.babelrc

webpack.config.js

package.json (не забравяйте да промените името в този файл)

Нека да продължим да изпълняваме нещата:

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

След това създайте своя компонент в /src/index.js

Нека опитаме с този пример. Създайте този файл:

SRC / index.js

Свършен! Нашият фантазиран компонент е завършен!

Създаване на нашия тестов проект

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

След това нека променим нашия src / App.js файл, добавяйки импорта и използването на компонента. Така че, трябва да добавите тези 2 реда:

импортиране на Fancy от „реагира-фантазия-компонент“;

<Фантазия />

Вашият src / App.js трябва да изглежда така:

И тогава, най-накрая, стартирайте npm start и вижте какъв красив фантастичен компонент сте създали току-що! Разбрал си, човече!

Трябва да изглежда така

Faaancy човек

Като последна стъпка, нека публикуваме нашия Компонент.

Като първа стъпка, моля, отидете в папката на вашия компонент (react-fancy-компонент) и добавете всички данни, които трябва да добавите във файла package.json, като име, версия, описание и автор.

След това в папката на компонента нека да конфигурираме npm за публикуване на вашия компонент (не забравяйте, че имате нужда от акаунт в http://npmjs.com/. Не се притеснявайте, той е безплатен ... засега ...).

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

След това пуснете npm публикуване и ... ТОВА ВСИЧКО!

Вижте това човек: https://www.npmjs.com/package/react-fancy-component

Толкова фантазия!

Фантастичен мааааан!

А магията? Къде е Магията?

Магията е в два реда в целия проект. И двата реда са във файла webpack.config.json.

  • libraryTarget: 'commonjs2': Този ред казва "Ей, нашият изход трябва да бъде модул, който може да се изнася!". Проверете повече информация в официалната документация.
  • externals: {'react': 'commonjs react'}: Този ред казва "Ей, нека използваме зависимостта React, която използва този, който ме използва!". Внимавайте с несъвместимостта на версиите.

Ами времето за разработка?

Трябва да стартирате npm start в два различни терминала. Един терминал в папката на компонента и друг в папката test-project.

Webpack ще прекомпилира вашия компонент всеки път, когато направите промяна в който и да е файл (във вашия компонент), след което автоматично, Webpack, който имаме в нашия тестов проект, ще открие промяната и ще прекомпилира нашия тестов проект. Ще видите промените си в браузъра си.

Ами музиката?

Ето, Fancy Man: