Skip to content

GitLab

Last edited by Thomas Mundstock
Page history
This is an old version of this page. You can view the most recent version or browse the history.

frontend

Home Escopo Processo Design/Mockups Configuração Arquitetura Gerência Código BD Qualidade Frontend Backend Analytics

Estrutura da Aplicação Frontend em React NextJs

Tecnologias Principais

  • React: Biblioteca JavaScript para construir interfaces de usuário.
  • Next.js: Framework para React que permite renderização no lado do servidor (SSR) e otimização de desempenho.
  • JavaScript/TypeScript: Linguagens de programação para escrever a lógica da aplicação.

Bibliotecas e Ferramentas Específicas

  • Axios: Biblioteca para fazer requisições HTTP.
  • React Router (se necessário em Next.js): Biblioteca para roteamento em aplicações React.

Padrões e Arquiteturas

  • Arquitetura Limpa: Princípios para estruturar aplicações de forma a separar claramente as preocupações.

Estrutura de Pastas

src/
├── assets/            # Imagens, fontes, ícones, etc.
├── components/        # Componentes reutilizáveis e genéricos
│   ├── Button.tsx
│   ├── Input.tsx
│   └── ...
├── hooks/             # Custom Hooks
│   ├── useFetch.ts
│   └── useAuth.ts
├── layouts/           # Componentes de layout
│   ├── MainLayout.tsx
│   └── AuthLayout.tsx
├── pages/             # Páginas da aplicação (cada uma com seu próprio subdiretório)
│   ├── Home/
│   │   ├── index.tsx
│   └── ...
├── services/          # Serviços de API e outros serviços externos
├── store/             # Gerenciamento de estado (Redux, Zustand, etc.)
├── styles/            # Estilos globais, incluindo Tailwind CSS
│   ├── tailwind.css
│   ├── globals.css
│   └── ...
├── utils/             # Funções utilitárias e helpers
├── App.tsx            # Componente raiz da aplicação
└── index.tsx          # Ponto de entrada

Explicação da Estrutura: