Criando uma biblioteca de componentes usando Create React App

Atualização: Você pode usar o npm package create-component-lib para automatizar todas as etapas descrita neste post.

Create React APP é facilmente a melhor ferramenta para criar e desenvolver aplicações React. Com um pouco de trabalho, também é possível usar para criar uma biblioteca de componentes React que pode ser publicado no npm e outras aplicações React. Aqui está o que você precisa fazer:

1 - Criando um novo projeto usando create-react-app:

create-react-app simple-component-library 

2 - Delete todos arquivos dentro da pasta src/. e depois crie um novo arquivo App.js com algum código inicial:

3 - Crie uma nova pasta src/lib e coloque seus componentes React dentro dele. src/lib vai servir como a pasta raiz do módulo publicado no npm. Aqui está o código para um componente exemplo:

// src/lib/components/TextInput.jsimport React from "react"; import "./TextInput.css"; const TextInput = ({ type = "text", label, placeholder, value, onChange, helpText }) => ( <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)} placeholder={placeholder} /> {helpText && <small className="simple-form-text">{helpText}</small>} </div> ); export default TextInput; 

O estilo pode ser feito inline, ou em um arquivo CSS separado:

// src/lib/components/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); } .simple-form-text { color: #6c757d !important; display: block; margin-top: 0.25rem; font-size: 80%; font-weight: 400; } 

Por último, podemos exportar o componente do src/lib/index.js para facilitar o importe:

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

Opcional, você pode também escrever testes para os componentes dentro de src/lib:

//src/lib/components/TextInput.test.js 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 - (Opcional) Use os componentes no src/App.js para criar exemplos para testes e debugging durante o desenvolvimento. Qualquer código colocado fora do src/lib não vai ser publicado no npm. Aqui está um exemplo usando o TextInput:

import React from "react"; 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> ); export default App; 

Rode o comando npm start e navegue para http://localhost:300 para visualizar o resultado:

Dica: Use o react-live para criar um site de documentação editável ao vivo!

5 - Instale o babel-cli usando o comando npm i babel-cli — save-dev e crie um aquivo .babelrc na raiz do seu projeto com o seguinte conteúdo:

{ "presets": ["react-app"] } 

6 - Altere o script build dentro do package,json com o seguinte conteúdo:

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

O comando npm run build agora transpilará o código dentro do src/lib (ignorando os testes e snapshots) dentro da pasta dist.

7 - Remova a linha “private”: true do package.json. Além disso remova o react-scripts, react e react-dom da dependencias, e coloque eles na devDependencies. Além disso você pode adicionar o react e react-dom como peerDependencies.

8 - Preparando a publicação, adicione o seguinte linha de código no package.json:

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

9 - Remova o texto default do arquivo README.md e crie um novo texto com alguma informação sobre a biblioteca.

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

10 - Publicando no npm!

npm run publish 

É isso! Agora você pode instalar sua biblioteca com o comando npm install simple-component-library e usar isso em qualquer projeto criado usando o Create React App.

Aqui está o código completo deste artigo:

Simple Component Library

Você pode clonar o repositório e usar ele para começar como ponto de partida para pular algumas dessas etapas. Espero que ajude!

Créditos

Creating a library of React components using Create React App, escrito originalmente por Aakash Rao N S

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter.