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.