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
fbc623

Tenho um repositório pronto com essas configurações iniciais, rota de login e ui prontos, e so clonar para um novo projeto 😊😊