O problema do React para quem é iniciante
Tags: react, braziliandevs, beginners, webdev
Published: 2022-11-18 21:48:39

**[TL;DR]**: React por ser uma biblioteca permite que novos desenvolvedores desenvolvam hábitos ruins e terceirizem soluções que seriam evitados caso utilizassem outras frameworks que definissem padrões no desenvolvimento.  

_Disclaimer: Entrei recentemente na área de desenvolvimento então ainda estou aprendendo muita coisa e a opinião expressa não tem o intuito de condenar ou julgar, mas refletir e melhorar._ 

Nesses últimos anos vem surgindo uma onda de pessoas interessadas em entrar na área de programação muito por conta de um marketing abusivo já conhecido, mas também pela grande disponibilidade de tutoriais e cursos gratuitos ou com valores acessíveis que estimulam o aprendizado. E quem decide ir para o desenvolvimento web, mais especificamente na área frontend, recebem indicações para iniciar com React por três motivos:  

1. É fácil aprender já que necessita de um conhecimento básico em Javascript
2. Tem uma grande comunidade, então caso o aluno tenha algum problema geralmente encontra-se uma resposta fácil
3. Por ser uma biblioteca, a estrutura do código é simples e fácil compreensão

E é nesse terceiro ponto que quero pegar pois toda essa facilidade no começo faz com que o aluno deixe de aprender assuntos essenciais que ao lidar com projetos reais começam a criar [códigos sujos](https://medium.com/@FilipeDeschamps/clean-code-2-o-que-%C3%A9-c%C3%B3digo-limpo-869047c1492a) ou com uma organização mal estruturada.  

Eu mesmo iniciei em React e mesmo concluindo vários cursos e bootcamps e no primeiro projeto com desafios reais decorri com vários problemas referentes a **Design de sistema(System design)** [_[não confundir com Sistema de design(Design system)]_](https://brasil.uxdesign.cc/sistemas-de-design-e-design-de-sistemas-qual-%C3%A9-a-diferen%C3%A7a-72fe7d01b47) como nomenclaturas e estruturação e que nunca foi ensinado ou discutido sobre esses tópicos. No final do desenvolvimento por conta dessas questões me fez pensar que frontend não era para mim e explorei o outras áreas no backend.  

A imagem abaixo é uma pequena ilustração de como é um projeto feito apenas em React (sem Next), nele estão inclusas chamadas de API, interfaces (também chamado de props), objetos em JSON além de vários componentes, porém é difícil saber o escopo (para onde que é aplicado) destes componentes, e mesmo levando em consideração que é um projeto pequeno será difícil dar manutenção e escalar, caso alguém decida contribuir no código também não será intuitivo compreender 

![Exemplo da organização de pastas do React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inrgp8c1hc7j6kaesiax.png)

Meses depois surgiu a oportunidade de aprender Angular e minha impressão foi que o fato de ser uma framework e ter que seguir  regras fez com que fosse necessário compreender mais afundo algumas questões como:   
- Gerenciamento de rotas
- Entender WebPack
- Separação de arquivos para cada funcionalidade (e não um arquivo que: mostra um texto, controla o estilo, lida com comunicação com o servidor, tudo isso junto)

A imagem abaixo seria de um projeto em Angular e **calma!** Só quero destacar a questão de como estão organizadas as pastas e o projeto em si. Temos a pasta onde encontra-se todos os componentes, o app/, e dentro temos a pasta modules que é responsável por agrupar componentes essenciais _(core)_, componentes utilizados em várias partes _(shared)_ e um módulo para cada página, que seria a _home(site.com/home)_ e _timer(site.com/timer)_
Assim se vejo que tem um erro no roteamento do Timer, sei exatamente onde que se encontra. Se eu quiser adicionar um outro módulo como por exemplo o _Contato(site.com/contact)_, basta criar uma nova pasta e não afetará em nada o restante do site, então a chance do chamado efeito colateral é quase 0
![Exemplo da organização de pastas do Angular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg0nf64hagvgy9ucjbqf.png)

E sinto que caso eu ficasse apenas no React iria demorar para aprender e entender esses conceitos, claro que muito disso seria resolvido com o NextJS, já que a framework define regras e segue padrões por conta da sua estrutura de diretórios e páginas tornando o projeto até mais fácil de ser [escalável](https://blog.tecnospeed.com.br/escalabilidade-de-software-o-que-e/#:~:text=Em%20resumo%2C%20um%20software%20%C3%A9,de%20tornar%20seu%20software%20escal%C3%A1vel.), contudo, estaria apenas terceirizando essas decisões já que quem lida com tudo isso no final das contas é a própria framework e deixando ao desenvolvedor somente criar componentes sem entender o que está por trás disso tudo. O que não seja algo necessariamente ruim já que permite ao desenvolvedor passar mais tempo programando, ainda assim problemas de otimização podem surgir se mal explorado.  

E por conta dessa _cultura imediatista_ que veio a surgir, novos _devs_ procuram obter conhecimento de maneira rápida passando por cima de conceitos básicos, e por conta da simplicidade do React é criação hábitos considerados ruins, não porque querem, mas sim por conta de orientação e estímulos (ou falta deles) a apenas criar mas não entender.  

Assim acredito que uma melhor alternativa seria após aprender Javascript manusear o DOM e entender como manipular os elementos da página e sua estilização, para depois então aprofundar esses conhecimentos testando e explorando frameworks e se possível estudar junto conceitos que são necessários para o mercado como: SOLID, Unit Test, TDD, System Design e tantos outros.  

Lembrando que não é em relação de se obter expertise sobre todos os assuntos mas ter uma noção geral e explorar aos poucos e revisar os conceitos já aprendidos, buscando aprender mais conforme for surgindo a necessidade e curiosidade. 

-- Fontes:  
- [Filipe Deschamps - O que é Clean Code](https://medium.com/@FilipeDeschamps/clean-code-2-o-que-%C3%A9-c%C3%B3digo-limpo-869047c1492a)  
- [Tecnospeed - O que é Escalabilidade de software](https://blog.tecnospeed.com.br/escalabilidade-de-software-o-que-e/#:~:text=Em%20resumo%2C%20um%20software%20%C3%A9,de%20tornar%20seu%20software%20escal%C3%A1vel.)   
- [Geeks for Geeks - Getting started with System Design](https://www.geeksforgeeks.org/getting-started-with-system-design/)   
- [Jonatan Zylbersztejn - Sistemas de design e design de sistemas — qual é a diferença?](https://brasil.uxdesign.cc/sistemas-de-design-e-design-de-sistemas-qual-%C3%A9-a-diferen%C3%A7a-72fe7d01b47)