Desenvolvimento de Libs em React - o caminho fácil

Incluindo deploy local (sem necessidade de fazer o deploy no npm durante o desenvolvimento), TypeScript, suporte a Hooks, Unit Test, ESLint. E deploy para o repositório npm quando a lib estiver pronta.

Se você está lendo este post, talvez esteja apenas aprendendo a criar bibliotecas React, ou quem sabe já quebrou muito a cabeça tentando - criar bibliotecas não é trivial. Há muitas coisas a fazer, entre instalar bibliotecas especializadas, ferramentas e uma complexa sequência de procedimentos para testar localmente sua lib.

Bem, a boa notícia é que creio que criei uma maneira bem prática e fácil de desenvolver bibliotecas React, incluindo principalmente um playground para testar suas bibliotecas sem a necessidade de publicar no repositório npm. Você cria/edita algum conteúdo em sua biblioteca, executa apenas um comando específico e - é isso. Seu aplicativo de teste é aberto automaticamente no navegador após a execução de todo o processo de compilação e implantação local.

Vamos ao que interessa. Vamos fazer tudo funcionar na prática, falando o mínimo de teoria - fica como desafio você entender e estudar cada etapa do processo :)

Observação: esses procedimentos foram testados em Mac e Linux. Para o Windows, pode ser necessário fazer alguns ajustes.

Criei uma espécie de template, uma pequena biblioteca que servirá de ponto de partida para o seu projeto. Vamos instalar e testar essa biblioteca localmente.

git clone [email protected]:imbroisi/react-lib-starter.git
cd react-lib-starter
npm install
code .

Agora você tem o projeto inicial instalado e aberto no VSCode.

Como você pode ver no VSCode, temos dois diretórios principais:

library: onde sua biblioteca será desenvolvida.
playground: onde você terá um React App para importar e testar sua biblioteca localmente.

O projeto inicial vem com um exemplo de biblioteca, com um componente e um hook.

Além disso, no playground você tem uma app Creat-React-App, pronto para consumir a biblioteca.

Agora, finalmente, na raiz do projeto execute o comando:

npm run local-publish

e aguarde alguns segundos enquanto sua biblioteca é criada, empacotada e implantada (deploy) localmente. Se você quiser entender o que está acontecendo nos bastidores, dê uma olhada no arquivo scripts/local-publish.sh.

Ao final do processo seu navegador será aberto mostrando a página do App com a biblioteca importada.

Só isso.

Agora você pode experimentar com o projeto, alterando coisas na biblioteca e no App, e ver os resultados.

Toda vez que você fizer alterações na lib, basta parar o programa (ctrl+c) e executar o comando npm run local-publish novamente.

Se você fizer alterações apenas no aplicativo de teste no playground, não precisará reconstruir a biblioteca — o resultado aparecerá automaticamente no navegador.

Existem outros comandos neste projeto, como por exemplo

npm run npm-publish

Que publicará sua lib no repositório npm.

Se você ainda não sabe como ter uma conta no npm para poder publicar sua lib, em breve isso será assunto de um novo post continuando este aqui, incluindo um exemplo prático.