12 Bibliotecas do React que voc√™ deveria conhecer ūüéČ

Já não é novidade que o React tem dominado diversas empresas por diversos motivos, um deles é a facilidade de utilizar a mesma lógica tanto na parte web quanto na parte mobile (React Native), sabendo disso nós preparamos 12 bibliotecas que você deveria considerar em usar nos seus projetos.

Nossa lista foi dividida em Design, funcionalidades legais, estilo de código e pagamento, simbora!

 

 

Libs de Design ūüĎ®ūüŹĽ‚Äćūüé®

 

1 РAnt design: Esse framework é o segundo mais popular na parte de UI (User Interface), ele é super simples de implementar, bem documentado, com aspectos minimalistas e super completo.

Talvez ele não atenda todos os casos, mas se você tem algo para fazer que é super comum, você pode dar uma chance para o framework e fazer isso usando o Ant Design.

Veja um exemplo de um site feito com o Ant Design:

biblioteca reactSupondo que eu queira fazer algo assim:

 

Poder√≠amos fazer um bot√£o nesse tal de ūüźú Design, desse modo:

Link do exemplo no CodePen

Link oficial da documentação

 

2 – Material-UI: Esse bel√≠ssimo framework foi desenvolvido pela Google, ele √© oferecido para diversas aplica√ß√Ķes, seja em React, HTML puro, Vue, entre outros.

Ele permite voc√™ criar sistemas extremamente completos e bonitos, repetir diversos comportamentos padr√Ķes que s√£o usados pelo a Google em seus sites e √© o framework mais popular de UI do React.

Um exemplo pronto na parte de templates do Material UI:

ūü•≥ Firebase

Vamos supor que eu queira fazer algo assim, utilizando o MaterialUI para deixar os componentes j√° estilizados:

O nosso código seria esse:

Link do exemplo no CodeSandBox

Link oficial da documentação

 

 

Libs com Funcionalidades legais ūüėĀ

 

3 РEnzyme (Test): Talvez você não saiba ou não esteja acostumado com a idéia mas quando a gente começa a ganhar algum tipo de senioridade no desenvolvimento de software, é preciso que a gente teste o que nós fizemos.

Por dois bons motivos:
– Para sabermos se de fato pensamos nos casos certos e codamos para funcionar nesses casos.
РE caso um desenvolvedor mexa numa parte do código, nós saberemos se os nossos testes quebraram (falharam).

√Č a√≠ que entre o Enzyme que √© uma biblioteca para o Javascript que permite testarmos

Talvez fique um pouco mais f√°cil de entender vendo na pr√°tica, vamos l√°:

Com isso, se um novo dev remover um dos bot√Ķes, esse teste acima, iria falhar e com isso n√≥s iriamos conseguir ver se esse √© o novo comportamento desejado ou somente uma falha de implementa√ß√£o.

Link oficial da documentação

 

4 – React Hook Form: Ao come√ßar a programar e fazer algum tipo de aplica√ß√£o, j√° deve ter pensado em fazer um formul√°rio, certo? E com certeza j√° pensou, poxa isso √© algo t√£o comum, ser√° que existe uma biblioteca que me ajuda a fazer isso ? A resposta √© SIM!!! ūüôĆūüŹĽ

Vamos ver um exemplo a seguir:

Link do exemplo no CodeSandBox

Link oficial da documentação

 

5 РReact DnD (drag and drop): Essa biblioteca é bem interessante, o React DnD é um conjunto bem consistente de utilitários para o React que te ajuda a construir interfaces mais complicadas que precisam da funcionalidade Drag and Drop (Arrastar e soltar), como por exemplo o Trello ou o Storify.

Se por exemplo, nós quiséssemos fazer um quadro onde temos nomes e desejamos arrastar esses nomes, poderíamos fazer algo parecido com isso:

Link oficial da documentação

 

6 РRecoil: Quando a sua aplicação começar a ficar maior e com mais responsabilidades, nós normalmente queremos não ter nenhuma dor de cabeça gerenciando o estado da aplicação e é exatamente para isso que o Recoil serve, vamos fazer um exemplo bem simples para vermos como funciona:
To brincando!! Aqui na OneBitCode nós já fizemos um tutorial bem completo para vocês usarem o Recoil, passo a passo, da uma olhada.

Link oficial da documentação

 

7 – React 360: Se voc√™ j√° teve interesse de criar algo usando as experi√™ncias 360¬į que s√£o oferecidas em aplicativos como por exemplo o Google Street View, o React 360 pode te ajudar nisso.

Os exemplos normalmente são bem grandes, porém é possível vermos um pouquinho do que é que dá pra criar e também como ficaria o código final:

Se quis√©ssemos fazer uma “sala” com uma a√ß√£o no meio da sala, poder√≠amos fazer algo parecido com isso:

Link para documentação

 

8 РFirebase: O firebase não é só uma mão na roda, talvez já seja o próprio carro Tesla, automático com I.A. pra você, sério.
Se você conhece um pouco sobre o firebase sabe que eu estou falando a verdade e se não conhece, sem problemas, hoje vou mostrar a pontinha do iceberg.

Com o firebase √© poss√≠vel ter integra√ß√Ķes com: Google Ads, AdMob, Google Marketing Platform, Play Store, BigQuery, Slack, Jira, PagerDuty e mais.
O firebase basicamente é um serviço que oferece uma super estrutura para você poder focar no aplicativo e menos na infraestrutura.

Porém vale lembrar que com o passar do tempo, o Firebase tem ganhado maturidade e agora oferece serviços de testes A/B, aprendizado de máquina, análise de performance do app, estabilidade dos serviços, autenticação e outras funcionalidades.

Vamos ver um código simples (de autenticação), que já da pra entender o que podemos fazer usando o firebase:

Basicamente o primeiro passo é criar uma conexão do nosso Aplicativo/Site com o serviço do firebase e pra isso precisamos somente instalar a dependência e colocar as credenciais no nosso projeto:

Agora com o Firebase configurado, precisamos encapsular nossa classe principal utilizando o Firebase para disponibilizar as suas fun√ß√Ķes para toda a aplica√ß√£o, ent√£o podemos fazer isso:

Vamos primeiro criar um contexto para o firebase:

Agora vamos usar esse contexto na nossa aplicação

E depois disso fica fácil oferecer a funcionalidade de resetar a senha, através do email:

 

Link oficial da documentação

 

 

Libs de Estilo de c√≥digo ūüßôūüŹĽ

 

9 РES-lint: Essa nossa biblioteca ES-lint é usada para corrigir bugs e sugerir melhorias no nosso código.
Talvez voc√™ n√£o saiba, mas existe diversos padr√Ķes que podem ser usados ao programar em JavaScript, padr√Ķes esses que podem ser determinados pelo lugar onde voc√™ trabalha, pela comunidade ou por um org√£o como √© o caso do Ecma International.

A minha opini√£o sobre o uso do ES-lint √© basicamente que em projetos da empresa ou open source, onde tem diversos devs, se todos usarem as mesmas configura√ß√Ķes no ES-lint nos seus editores voc√™ acabar√° tendo menos diverg√™ncias no c√≥digo produzido.

Ent√£o vamos ver um exemplo:

Primeiro você precisa instalar a biblioteca e executar a configuração do eslint:

Depois disso você deve criar um arquivo .eslintrc.js ou .yml ou .json, com as regras que você deseja configurar seu projeto, no meu caso estou dizendo que o projeto não pode ter console espalhado pelo código.

Pronto é isso, agora com o .eslintrc.json configurado no nosso projeto, sempre que houver um console perdido no código, ele vai acusar de erro.

 

Link oficial da documentação

 

10 – Prettier: O Prettier (“mais bonito”) como o nome j√° diz, tem o intuito de deixar o seu c√≥digo mais bonito, baseado em padr√Ķes e conven√ß√Ķes de programa√ß√£o.

Vamos ver um caso onde o Prettier pode me ajudar a formatar meu código para ficar mais legível:

Com o Prettier:

 

Link do exemplo

Link oficial da documentação

 

 

Libs de Pagamentos ūüíį

 

11 РPaypal: Você já deve ter desejado receber dinheiro com a sua aplicação ou até mesmo integrar um meio de pagamento com um serviço existente, é nesse momento que você pode cogitar em usar o Paypal, a integração dele na verdade é com o JavaScript, mas usaremos no nosso exemplo para um componente feito em React.

Basicamente o processo da integração com o Paypal funciona assim:

Vamos pegar as credenciais, vamos criar um botão com a ação de compra usando nossas credenciais e depois disso vamos criar uma função de retorno (chama-se também callback) para informar ao usuário o sucesso da compra.

Pegando as credenciais:

Link do Paypal para desenvolvedores

Agora vamos criar nossas 2 fun√ß√Ķes :

Uma que criar o pedido.

Ao finalizar o pagamento, ela vai saber informar ao usu√°rio o sucesso da compra.

Vamos agora criar nosso componentes que v√£o usar essas fun√ß√Ķes:

Algumas partes do código foram omitidas para diminuir tudo que foi digitado, mas a ideia principal aqui é mostrar o quão simples pode ser começar a vender algo utilizando React como framework de frontend.

Link da documentação

 

12 – Stripe elements (ūüáßūüá∑Beta ūüáßūüá∑): O Stripe √© um servi√ßo que tem crescido muito no mundo todo, atualmente ele est√° em vers√£o beta no Brasil, somente alguns usu√°rios podem utilizar ele para fazer as vendas por√©m como j√° √© conhecido em diversos pa√≠ses, n√≥s decidimos mostrar como voc√™ futuramente poder√° implementar um formul√°rio de pagamento:

A ideia deles é basicamente facilitar todo o código de pagamento e só deixar você gerenciar o valor e meio de pagamento, depois disso eles sabem lidar com a compra baseado na sua chave da API.

Link oficial da documentação

 

Conclus√£o

Nesse artigo √© poss√≠vel ver que existem diversas bibliotecas para resolver problemas comuns no desenvolvimento web, seja na cria√ß√£o de formul√°rios, no meio de pagamento, envio de recupera√ß√£o de senha e em v√°rias outras situa√ß√Ķes.

Voc√™ n√£o precisa ficar inventando a roda toda vez, inclusive, se voc√™ gostar de alguma biblioteca, sinta-se livre para contribuir com o c√≥digo dela, fazendo pull requests nos seus reposit√≥rios p√ļblicos.

Obrigado por ler este artigo, se voc√™ gostou dele, compartilhe com seus amigos, isso nos ajuda e motiva a levar mais conhecimento a mais pessoas. Se voc√™ quiser contribuir com sua opini√£o, estarei de olho nos coment√°rios, ūüĎÄ.

Até a próxima e um grande abraço,

Matheus Mello

 


 

Programador(a), uma pergunta importante!

 

Você sente verdadeiramente que é um Programador(a) completo(a)?


Por muito tempo eu fiquei em d√ļvida se eu estava pronto ou n√£o e essa inseguran√ßa me levou a pesquisar profundamente sobre o que realmente √© necess√°rio para ser um programador web completo.

Depois de fazer muitos treinamentos, ler muitos livros, conversar com outros desenvolvedores, ir a eventos e até trabalhar em empresas do Brasil e do exterior foi que eu pude encontrar as bases fundamentais para ser um programador Web com confiança (sem medo de buscar jobs e assumir grandes projetos).

Eu peguei todo esse conhecimento e somei com toda a did√°tica que eu aprendi criando cursos e tutoriais que s√£o acessados por milhares de pessoas todos os meses e criei um treinamento chamado Programador Full Stack Javascript.

Nele eu vou te mostrar o ‚Äėcaminho das pedras‚Äô, ou seja, o essencial para voc√™ dominar a programa√ß√£o web, se sentir mais completo(a) e conseguir o seu t√£o merecido Job de respeito.

Então se você quer evoluir de verdade (sem perda de tempo), clica no link abaixo e conheça o treinamento agora.

Link: Programador Full Stack Javascript em 8 semanas ->

 


 

5 1 vote
Article Rating
julho 22, 2020
Subscribe
Notify of
guest
0 Coment√°rios
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: