Executando verificação de segurança...
0
GkIgor
3 min de leitura ·

Configurar um repositório React é muito trabalhoso

Sabe, muita gente acha que fazer projetos pequenos em React é melhor do que em Angular,

Etapa 1: Instalação (uns 11 passos mesmo)

  1. npx create-react-app ou vite
  2. Instala react-router-dom
  3. Instala axios
  4. Instala eslint + prettier
  5. Instala styled-components ou tailwind
  6. Instala react-hook-form ou formik
  7. Instala yup pra validação
  8. Instala zustand, redux ou qualquer estado global porque o useState já não serve
  9. Instala ícones (react-icons, lucide, etc)
  10. Instala um loader tipo react-spinners
  11. Instala o pacote do momento que vai ser abandonado mês que vem

Etapa 2: Configuração (isso dá mais trabalho que programar)

  1. Cria pastas: components, pages, services, hooks, utils, types, contexts, assets, routes, config, themes, constants, guards, layouts
  2. Configura ESLint + Prettier + editorconfig (pra ninguém te xingar no PR, acresite que eu xingaria)
  3. Cria o Router.tsx com 50 linhas pra 3 telas
  4. Define layout padrão com navbar, sidebar e um wrapper invisível só pra manter a estrutura(ou css de cria mermo)
  5. Cria ThemeProvider mesmo sem mudar nenhuma cor (nunca vi um projeto react sem isso)
  6. Cria API client com interceptors, mas usa só um endpoint
  7. Cria Context de autenticação e esquece de usar(faz o tratamento na rota faz kssk)
  8. Define tipos de todas as interfaces como se fosse TypeScript em banco de dados
  9. Cria um useDebounce, um useModal e nunca usa
  10. Configura loading global e toast de erro/sucesso genérico
  11. Faz mock de backend só pra deletar depois
  12. Cria um form genérico mas termina copiando e colando form em cada tela
  13. Implementa controle de acesso e esquece de usar
  14. Cria constantes pra rotas, roles, páginas, cores e mensagens
  15. Escreve 4 testes que quebram quando alguém dá npm install de novo

Etapa 3: Estrutura do repositório (a parte que você finge que é senior)

  1. Separa telas por domínio (ex: User, Product, Dashboard)
  2. Cria serviço de API por entidade (userService.ts, etc)
  3. Organiza actions, reducers, selectors
  4. Adiciona barrel files (index.ts) em tudo
  5. Organiza components em shared/, ui/, domain/ e trash/
  6. Separa os hooks por contexto, depois junta tudo de novo
  7. Cria arquivos com nome types.ts, interfaces.ts, models.ts no mesmo lugar
  8. Enfia um monstro chamado helpers.ts com 900 funções(aqui eu n julgo, todo projeto tem isso)
  9. Cria um README que mente dizendo que o projeto está simples
  10. Sobe no GitHub e já vem alguém pedir SSR e suporte a mobile

Resultado:

Nenhum, apenas precisava falar mal de React em algum lugar.

Tirando as brincadeiras espalhadas pela lista, configurar um repo react pra ser rousbo é outros 500, a complexidade sobe demais. Se você tem 4 telas, 6 cruds e 20 regras de negocios por trás, esqueça! React vai te trazer muita dor de cabeça.
Compara com angular:

Etapa 1: Instalação

  1. ng new projeto --standalone
  2. Seleciona routing (sim), SCSS (ou outro pré-processador se quiser)
  3. Instala pacote de UI (Material, Tailwind, etc.)
  4. Instala biblioteca de toast, se quiser (ngx-toastr, angular-notifier, etc.)
  5. Instala libs adicionais se precisar (icons, date-fns, etc.)

Etapa 2: Configuração

  1. ng g component pages/home
  2. ng g component components/navbar
  3. ng g component pages/login
  4. ng g service services/auth
  5. ng g guard guards/auth
  6. Define rotas direto no app.config.ts com os componentes standalone
  7. Adiciona providers e imports no bootstrapApplication(AppComponent, {...})
  8. Layout padrão via app.component.ts com router-outlet + navbar
  9. ReactiveForms direto nos componentes, sem enrolação
  10. Toasts, loading, interceptors configurados direto no main.ts ou no providers do bootstrapApplication
  11. Tema global configurado via SCSS ou com a lib UI
  12. Autenticação via serviço + guard, sem contexto/mágica
  13. Páginas separadas por pastas com seus próprios componentes

A estrutura seria mais ou menos assim:

src/
	app/
		app.component.ts (standalone)
		app.config.ts (routes + providers)
		pages/
			login/
				login.component.ts (standalone)
			home/
				home.component.ts (standalone)
		components/
			navbar/
				navbar.component.ts (standalone)
		services/
			auth.service.ts
		guards/
			auth.guard.ts
		interceptors/
			auth.interceptor.ts
		models/
			user.model.ts
	assets/
	environments/
	main.ts
	styles.scss
Carregando publicação patrocinada...
6
rafael

A sua crítica é, em parte, válida. O problema é que é, em grande parte, inválida. Então caímos em duas situações:

  1. O leitor entende bem o assunto, mas não sabe o que da sua crítica é por falta de conhecimento ou por humor.
  2. O leitor não entende o assunto, e vai interpretar que React realmente é um absurdo e Angular é um milagre.

Então, por exemplo:

  1. npx create-react-app: O create-react-app tem um aviso grande no repositório de que está obsoleto (deprecated) desde 2021 e recomenda seguir a documentação oficial.
  2. Instala react-router-dom: Se seguir a documentação, pode usar npx create-react-router@latest. Sim, você ainda está instalando coisas, mas no Angular também são instaladas, talvez só não fique tão aparente.
  3. Instala axios: O fetch do navegador já não faz tudo o que você precisa?
  4. Instala eslint + prettier: Útil para qualquer projeto JavaScript, não tem nada a ver com React.
  5. Instala styled-components ou tailwind: Também não tem nada a ver com React. Eu mesmo nunca instalei esses pacotes.
  6. Instala react-hook-form ou formik: Se o projeto for mais complexo, as bibliotecas ajudam, mas não são necessárias para projetos simples (o TabNews, por exemplo, não usa).
  7. Instala yup pra validação: Também não tem nada a ver com React. Novamente, eu mesmo não uso yup, zod etc. para validações no frontend.
  8. Instala zustand, redux ou qualquer estado global porque o useState já não serve: Provavelmente você deveria usar um contexto. Novamente, eu não uso essas bibliotecas que você mencionou.

Eu poderia continuar ponto a ponto, mas vê que praticamente nada tem a ver com React? Ou tem, mas é desconhecimento seu sobre qual a forma certa de fazer. Se vai usar Tailwind com React, por que não usaria no Angular? Se vai usar linters com React, por que não com Angular? Se vai instalar uma biblioteca de ícones ao invés de apenas copiar/criar os ícones que precisa, por que não faria isso com Angular?

E os benefícios do Angular se resumem a... scripts que geram os arquivos? Ele tem tanto boilerplate assim que você não pode só criar um arquivo e fazer export const Componente () => <p>Componente</p>? E precisa de model, guard, interceptor e service só para uma autenticação simples?

Não conheço Angular, só usei um pouco em 2019 para aprender como era e na época já era mais complicado que o React (que eu também estava aprendendo na época).

Entendo que sua crítica sobre o React, em grande parte, não faz sentido. Infelizmente, não posso fazer afirmação sobre o Angular porque não o conheço bem como conheço o React, e a forma que você listou os benefícios do Angular me faz parecer que preciso fazer muitas coisas para algo simples funcionar, e que um dos pontos positivos dele é ter páginas separadas por pastas (que você pode ter em qualquer tipo de projeto).

Além disso, comparar o React com Angular nessa forma ampla não faz tanto sentido, visto que o React se diz uma biblioteca e deixa o desenvolvedor decidir como fará as coisas. Provavelmente faria mais sentido comparar com um framework, como Next ou agora o React Router, visto que frameworks são "opinados" (opinionated) e resolvem várias coisas sem o desenvolvedor precisar pensar sobre.

Se quiser comparar o React com o Angular, precisaria se restringir ao funcionamento dos componentes e outras similaridades deles.

1
GkIgor
  • Autor
    Autor

Isso provavelmente porque, você não leu o conteúdo até o final.
O titulo diz: Configurar um repositório React é muito trabalhoso. A comparação é sobre configurar o repositório, não sobre usar a tecnologia.

Vamos aos itens:

  1. Beleza, bacana que mudou a forma de iniciar um projeto.
  2. Sim, quando você seleciona que quer usar rotas, o angular instala o "@angular/router".
  3. O fetch do navegador é confuso e dificil de usar. Se você optar não instalar um cliente http, vai ter que repetir código sempre que for fazer uma chamada http ou vai ter que criar o proprio cliente http (uma classe ou função se precisar ser simples).
  4. Pode ser instalado com o CLI do Angular, ele se configura sozinho.
  5. Se você leu, também citei lib de UI no Angular.
  6. okay, tudo certo.
  7. Novamente vai precisar repetir código ou criar o propio validador.
  8. Contexto é limitado e difícil de usar. E tudo bem usar.

Eu poderia continuar ponto a ponto, mas vê que praticamente nada tem a ver com React?

Claro, porque eu nunca disse que o problema é o React.

Ele tem tanto boilerplate assim que você não pode só criar um arquivo e fazer export const Componente () => <p>Componente</p>?

Não, você pode sim criar uma pasta, 3 arquivos (4 se tiver testes) e escrever o seu html, css e javascript. Mas se o framework te da um recurso (que você pode configurar), porque não usar? E se for um componente simples? Você pode declarar tudo no mesmo arquivo se quiser também. (veja você mesmo https://component-party.dev/#templating.minimal-template)

E precisa de model, guard, interceptor e service só para uma autenticação simples?

Sim, é questão arquitetural. Você pode meter tudo em um arquivo só se quiser, mas se o framework de dá um recurso pra isolar responsabilidade, porque não usar?
Ou você está dizendo, que devo em toda chamada http, repetir código pra inserir um bearer token? Vai fazer o redirect se não tiver autenticado ao iniciar um componente? Em todos eles? Em cada roda eu tenho que repetir código? E vai fazer as regras dentro do componente? Não vai isolar a responsabilidade? Mesmo em códigos react, você precisa de uma service pra separar responsabilidade, isso é básico.

Provavelmente faria mais sentido comparar com um framework, como Next ou agora o React Router, visto que frameworks são "opinados" (opinionated) e resolvem várias coisas sem o desenvolvedor precisar pensar sobre.

E a mesma coisa, muda que ele tem algumas features nativas, mas configurar o repositório, mesmo que tenha umas coisas que já vem prontas, ainda é mais complicado que o Angular. E não só o Angular, ele foi apenas o que usei como exemplo.

1