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 

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

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