Dica: Como aumentar a legibilidade do seu código React e melhorar na linguagem · hudsonArr

O React é uma ferramenta poderosa para o desenvolvimento frontend e atualmente é a biblioteca mais usada. Além disso o paradigma funcional e a componentização faz com que até não usuários da tecnologia consigam entender o que ela está fazendo, no entanto, é comum que ao escalar nossa aplicação, tenhamos problemas comuns de repetição de código, linhas desnecessárias, excesso de complexidade e outros problemas.

Hoje trago 5 dicas que vao além de aumentar a qualidade do seu código, te fazer evoluir na linguagem.

Usar padrões de linguagem

Essa dica não se aplica apenas ao JS, é sempre bom procurar um modelo de padronização para facilitar a comunicação entre os devs do mesmo time ou a sua própria interpretação.
Eu posso um favoritismo pelo standard.js mas você pode escolher outro se quiser.
Outra dica valiosa é ler sobre a possibilidade de rodar um analisador no seu terminal ou configurar na IDE do seu gosto para a automatização do processo e acusação de erros. ( NVIM, VScode )

Code Climate

O codeclimate inclui diversas features, diversas pagas mas a que eu quero dar ênfase é o code climate quality, ele permite que você integre seu repositório do github nele e ele analisa a qualidade do seu codigo em 10 pontos, sendo os mais legais, excesso de linha por arquivo, excesso de linha por função, repetição de código e excesso de complexidade.

Além de classificar o código de A a F nessse critérios, voce pode configurar para receber no seu email qualquer melhora ou declínio do código.

OpenGPT

Eu não sei vocês mas já estou com preconceito de conteúdo que tem chatgpt no título, é sempre uma opinião se vai ou não substituir os devs, se quem usa é pior ou melhor mas o que eu quero trazer hoje foi uma abordagem que me ajudou bastante a evoluir na linguagem.

Quando eu iniciei meus estudos em JavaScript, tinha aquela quantidade de conteúdo de diferentes formas que me pareciam muito iniciantes já mas eu não conseguia escalar pro React, foi aí que eu tive a idéia de ler toda a documentação de js da w3scholls, de fato, eu consegui entender o que me faltava mas com certeza eu não me lembrava de 10% do que eu li, principalmente dos métodos de arrays, strings e objetos.

Isso porquê o conhecimento é imersivo, você só aprende fazendo e repetindo várias vezes, o que eu recomendo para você fazer no chatgpt é enviar uma função com excesso de complexidade ou duas funções que foram analisadas como duplicadas e peça para ela refatorar para você.

Em qualquer iteração com objetos ou arrays, experimente pedir para a IA fazer inline, para ver como ela filtra e lida com os dados

Lembrando que o foco é compreender de uma forma diferente como um certo método que às vezes você já até conhece funciona e assim você poder montar algo semelhante

NÃO COPIE !!! CHATGPT ÀS VEZES CRIA CÓDIGOS QUEBRADOS

Experiência própria rs

Medium, TabNews, e Artigos

A comunidade React é muito ativa então se tem algo que te incomoda no seu código que você acredita que o deixa muito verboso, com certeza alguém já tem um artigo para isso, construa o hábito e entrar casualmente para ler sobre tópicos desta área, tenho certeza que aprenderá bastante

Estudo contínuo

Um pouco óbvio mas sempre importante lembrar, as ferramentas inovam dia após dia e é sempre importante ficar atualizado, sobre o tema vou deixar alguns tópicos que eu acho que vale a pena dar uma estudada:

Custom hooks: crie seu próprio hook, um exemplo é um useFetch que substitue a call de api, state para loading e data, reduzindo uma quantidade incrível de linhas
react.dev: O react está de cara nova e a documentação está com vários exemplos sobre novas features, eu ressalto o tópico "quando o useEffect não é necessário" e o uso do HOC para a leitura
Recursividade em componentes React

Este é meu primeiro artigo e gostaria que avaliassem minha escrita, grato pela atenção!!!

fontes:

https://react.dev
https://standardjs.com/
https://codeclimate.com/