Criando uma biblioteca de componentes usando Create React App

Henrique Melanda
Oct 29, 2019 · 4 min read

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:

Exemplo pasta src/

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.jsimport 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:

Funciona!

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:

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 .

Henrique Melanda

Written by

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade