Criando uma biblioteca de componentes usando Create React App
Tags: react, createreactapp, lib, biblioteca
Published: 2020-02-28 13:47:06

---
title: Criando uma biblioteca de componentes usando Create React App
published: true
description: criar uma biblioteca de componentes React que pode ser publicado no npm e outras aplicações React
tags: ReactJs, Create-React-App, Lib, biblioteca
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dhwnqdkrrjtjou1ulps3.png)

**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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lqv6pny1qw81nxwy13lb.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/incolz7br2t3rmsk38om.png)

**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"
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ao38ii5j7tyzvl7ptqj.png)

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](https://github.com/aakashns/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](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b), escrito originalmente por [Aakash Rao N S](https://hackernoon.com/@aakashns)

----------------

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](https://twitter.com/coisadedev).