Create React App - лучший инструмент для создания и разработки приложений React. Его также можно использовать для создания библиотеки компонентов React, которые можно публиковать в npm и использовать в других приложениях React. Вот что вам нужно сделать:

1. Создайте новый проект, используя create-react-app:

create-react-app simple-component-library

2. Удалите все файлы внутри src/ и создайте новый index.js файл с некоторым начальным кодом:

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<div>Hello world</div>, document.getElementById("root"));



3. Создайте новую папку src/lib и поместите ваши компоненты React внутри. src/lib будет служить корневой папкой модуля, опубликованного npm, вот код для примера компонента:

import React from "react";
import "./TextInput.css";

const TextInput = ({ type = "text", label, value, onChange }) => (
  <div className="simple-form-group">
    {label && <label className="simple-text-label">{label}</label>}
    <input
      type={type}
      className="simple-text-input"
      value={value}
      onChange={e => onChange && onChange(e.target.value)}
    />
  </div>
);

export default TextInput;

Стилизация может быть встроена или в отдельных файлах CSS:

.simple-form-group {
  margin-bottom: 1rem;
}
.simple-text-label {
  display: block;
  color: red;
}
.simple-text-input {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 400;
  color: rgb(33, 37, 41);
}

Наконец, компонент может быть экспортирован из src/lib для удобства:

import TextInput from "./TextInput";
export { TextInput };

При желании вы также можете написать тесты для компонентов внутри src/lib:

import React from "react";
import TextInput from "./TextInput";
import renderer from "react-test-renderer";

describe("TextInput", () => {
  it("renders properly", () => {
    const tree = renderer
      .create(<TextInput label="Email" placeholder="name@example.com" />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

4. (Необязательно) Используйте компоненты в src/index.js создавая примеры для тестирования и отладки в процессе разработки. Любой код, размещенный вне src/lib не будет опубликовано в npm, вот пример использования TextInput:

import React from 'react';
import { render } from "react-dom";
import { TextInput } from "./lib";

const App = () => (
  <div style={{ width: 640, margin: "15px auto" }}>
    <h1>Hello React</h1>
    <TextInput label="Email Address" placeholder="name@example.com" />
  </div>
);

render(<App />, document.getElementById("root"));

Ведите npm start и перейдите к http://localhost:3000, чтобы просмотреть результат.

5. Установите babel-cl i используя команду npm i babel-cli --save-dev  создайте файл .babelrc в корне проекта со следующим содержанием:

{
  "presets": [["react-app", { "absoluteRuntime": false }]]
}

6. Заменить build сценарий внутри package.json на следующий:

"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"

Команда npm run build теперь будет переносить код внутри src/lib (игнорируя тесты) в папку dist

7. Удалите линию "private": true от package.json, также удалите eact-scripts .Кроме того, вы также можете добавить react и react-dom в peerDependencies

8. Чтобы подготовиться к публикации, добавьте следующие строки в package.json:

"main": "dist/index.js",
  "module": "dist/index.js",
  "files": [ "dist", "README.md" ],
  "repository": {
    "type": "git",
    "url": "URL_OF_YOUR_REPOSITORY"
  }

9. Удалите по умолчанию README.md файл, и создайте новый с некоторой информацией о библиотеке.

# simple-component-library
A library of React components created using `create-react-app`.## Installation
Run the following command:
`npm install simple-component-library`

10. Опубликуйте в npm!

npm run publish

Вот и все! Теперь вы можете установить библиотеку с помощью команды npm install simple-component-library и использовать его в любом проекте, созданном с помощью Create React App. Вот полный код этой статьи:

aakashns/simple-component-library 

Вы можете клонировать репозиторий и использовать его в качестве отправной точки, чтобы пропустить некоторые шаги. Надеюсь, это поможет!

Источник перевода