README
No dia a dia utilizamos várias bibliotecas para React ou Javascript com o objetivo de facilitar nosso trabalho. Bibliotecas de componentes, datas, rotas, gerenciamento de estados, entre outras, são comuns na criação de aplicações. Mas você já parou para pensar em tudo que necessita para criar bibliotecas?
Se você chegou até aqui é porque tem interesse em aprender como desenvolver essas bibliotecas. Existem algumas ferramentas, CLIs e scripts, que facilitam e automatizam esse processo, você pode encontrar mais sobre essas ferramentas aqui. Mas aqui vamos entender de forma manual como configurar e desenvolver uma biblioteca.
A biblioteca que iremos criar será um componente que estiliza uma mensagem de erro em requisições dentro de uma aplicação. Ele terá como propriedade um código de erro e uma descrição. Ao seguir esse tutorial já pode mudar as referências de nome para sua biblioteca.
Primeiro vamos criar as pastas e inicializar um projeto através do yarn
Nosso primeiro passo é iniciar um projeto através do yarn e criar algumas pastas, você pode mudar o nome da pasta para o de sua biblioteca.
Agora vamos instalar o react e sua base de bibliotecas
O objetivo aqui é desenvolver biblioteca para React, então vamos instalar sua base de bibliotecas.
Já podemos iniciar nosso componente que se tornará uma biblioteca
Nessa fase iremos de fato criar a nossa biblioteca react.
Crie o arquivo src/ErrorComponent.js
e coloque o seguinte código
src/ErrorComponent.js
e coloque o seguinte códigoCrie o arquivo src/index.js
e coloque o seguinte código
src/index.js
e coloque o seguinte códigoVamos agora criar uma área para visualizar o componente
É muito importante podermos testar a nossa biblioteca e visualizar o resultado do nosso componente, vamos a seguir trabalhar nessa etapa.
Crie o arquivo public/index.html
public/index.html
Para iniciarmos a aplicação através do webpack precisamos de um arquivo base de html, para isso iremos criar o arquivo index.html
e colocar o seguinte conteúdo:
Crie o arquivo public/index.js
public/index.js
Precisamos também criar nosso arquivo jsx de entrada, normalmente nas aplicações esse arquivo é a base da mesma, aqui só usaremos para testar como aplicação.
Está na hora de criarmos as configurações
Se tudo deu certo até aqui, agora vamos colocar as configurações iniciais. Iremos configurar o Babel para transpilar nossa biblioteca para js e o Webpack para podermos iniciar uma aplicação e verificar como ficou nossa biblioteca.
Configurando o Babel
O Babel é um famoso transpilador javascript, que nos possibilitará converter nossa aplicação react em javascript puro através de alguns presets. Vamos primeiro instalar as dependências necessárias.
Após isso vamos criar o arquivo .babelrc
e colocar a seguinte configuração:
Configurando o Webpack
O Webpack é um empacotador de módulo JavaScript de código aberto, vamos utilizar o mesmo junto com alguns plugins para iniciar uma aplicação e assim podermos testar nossa biblioteca. Vamos primeiro instalar as dependências necessárias.
Agora vamos criar o arquivo webpack.config.js
, que é o arquivo de configuração do webpack. E colocar o seguinte conteúdo:
Já estamos chegando ao fim, vamos agora criar nossos scripts e ajustar o package.json
Para criar os scripts, vá no arquivo package.json
e insira o seguinte código:
Perceba que no build todo o conteúdo será transpilado para uma pasta chamada dist, para que outra lib ao utilizar seu módulo consiga utilizar na raiz modifique as propriedades main
e module
.
Além disso nosso projeto tem várias configurações que não serão necessárias no pacote final da nossa biblioteca. Para diminuir o tamanho do pacote e só colocar o essencial, utilize a propriedade files
para isso, fazendo da seguinte maneira.
Agora sim, vamos ver o componente da nossa biblioteca
Rode o comando abaixo na raiz do projeto.
Acesse http://localhost:8080/
e verá seu componente.
Vamos agora testar a transpilação
Rode o comando abaixo na raiz do projeto.
No diretório dist
que está na raiz do seu projeto, você verá seu componente transpilado.
Hora de publicar
Você já deve ta muito feliz por ver seu componente funcionando e querendo usar em seu projeto. Então vamos agora publicar esse componente, e essa é a etapa mais simples. Rode o seguinte comando:
É possível que o componente já exista com esse nome, caso isso aconteça mude o nome do seu componente no arquivo package.json
. Lembre que é possível colocar um escopo, utilizando a seguinte nomenclatura:
Estrutura de Arquivos
Caso tenha dúvida sobre a estrutura de arquivos geradas após o tutorial, acesse esse link.
Last updated