Перед тем, как начать эту историю, я подумывал провести какой-то катарсис, но давайте перейдем к решениям. Катарсис больше не нужен, потому что альтернатива Redux без сложности уже создана: D
Птцсс! Не забудьте прочитать новую статью React Conditional Rendering (чтение 1 мин)
Обновление на 2018 год: для всех, кто сталкивался с ошибками, которые Webpack жаловался на синтаксис jsx с Unexpected token, тогда, пожалуйста, проверьте этот комментарий Криса
Если вы хотите создать компонент React и опубликовать его в NPM, вам нужно сделать две вещи:
- Создать компонент
- Создайте проект, в котором вы протестируете свой компонент
Создание компонента
Предположим, наш компонент будет называться react-fancy-component
Затем вручную создайте эти файлы:
.babelrc
webpack.config.js
package.json (не забудьте поменять name в этом файле)
Давайте продолжим:
npm link будет использоваться для тестирования нашего компонента в нашем тестовом проекте, пока мы его разрабатываем.
Затем создайте свой компонент в /src/index.js
Давайте попробуем на этом примере. Создайте этот файл:
src/index.js
Выполнено! Наш модный компонент готов!
Создание нашего тестового проекта
Теперь давайте создадим действительно простой проект для тестирования нашего модного компонента.
Затем давайте изменим наш src/App.js файл, добавив импорт и использование компонентов. Итак, вы должны добавить эти 2 строки:
import Fancy from 'react-fancy-component';
<Fancy />
Ваш src/App.js должен выглядеть так:
А затем, наконец, запустите npm start и посмотрите, какой красивый модный компонент вы только что создали! Ты понял, мужик!
Это должно выглядеть так
В качестве последнего шага давайте опубликуем наш компонент.
В качестве первого шага перейдите в папку компонентов (react-fancy-component) и добавьте все данные, которые вы должны добавить в файл package.json, такие как имя, версия, описание и автор.
Затем в папке компонентов настроим npm для публикации вашего компонента (помните, что вам нужна учетная запись на http://npmjs.com/. Не волнуйтесь, это бесплатно… пока…).
Что вам нужно сделать, это запустить npm login и указать свое имя пользователя, пароль и общедоступный адрес электронной почты.
Затем запустите npm publish и… ВСЕ!
Посмотри на этого человека: https://www.npmjs.com/package/react-fancy-component
Так здорово!
А магия? Где магия?
Магия заключается в двух строчках всего проекта. Обе строки находятся внутри webpack.config.json файла.
libraryTarget: 'commonjs2':В этой строке говорится: Эй, наш вывод должен быть экспортируемым модулем!. Дополнительную информацию смотрите в официальной документации.externals: { 'react': 'commonjs react' }: В этой строке говорится: «Эй, давайте использовать зависимость React, которая использует того, кто использует меня!». Будьте осторожны с несовместимостью версий.
А как насчет времени разработки?
Вы должны запустить npm start в двух разных Терминалах. Один терминал в папке компонентов, а другой в папке тестового проекта.
Webpack будет перекомпилировать ваш компонент каждый раз, когда вы вносите изменения в какой-либо файл (в свой компонент), а затем автоматически Webpack, который есть в нашем тестовом проекте, обнаружит изменение и перекомпилирует наш тестовый проект. Вы увидите свои изменения в своем браузере.
А как насчет музыки?
Вот причудливый человек:
