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/
│
├── app/                          # Diretório principal do aplicativo
│   ├── core/                     # Serviços e classes centrais (singleton services, interceptors, guards)
│   │   ├── interceptors/         # Interceptores HTTP
│   │   ├── guards/               # Guards de rotas
│   │   └── services/             # Serviços globais (e.g., AuthService)
│   │
│   ├── shared/                   # Componentes, pipes e diretivas compartilhadas
│   │   ├── components/           # Componentes compartilhados (botões, modais, etc.)
│   │   ├── directives/           # Diretivas reutilizáveis
│   │   ├── pipes/                # Pipes reutilizáveis
│   │   ├── models/               # Modelos de dados (interfaces, classes)
│   │   └── utils/                # Funções utilitárias
│   │
│   ├── features/                 # Módulos específicos de funcionalidades
│   │   ├── feature-a/            # Módulo da funcionalidade A
│   │   │   ├── components/       # Componentes específicos da funcionalidade A
│   │   │   ├── pages/            # Páginas específicas da funcionalidade A
│   │   │   └── services/         # Serviços específicos da funcionalidade A
│   │   ├── feature-b/            # Módulo da funcionalidade B
│   │   │   ├── components/       # Componentes específicos da funcionalidade B
│   │   │   ├── pages/            # Páginas específicas da funcionalidade B
│   │   │   └── services/         # Serviços específicos da funcionalidade B
│   │   └── ...                   # Outros módulos de funcionalidades
│   │
│   ├── layouts/                  # Layouts de aplicação (e.g., MainLayout, AuthLayout)
│   │   ├── main-layout/          # Layout principal
│   │   └── auth-layout/          # Layout de autenticação
│   │
│   ├── assets/                   # Arquivos estáticos (imagens, fontes, etc.)
│   │   ├── images/               # Imagens do projeto
│   │   ├── fonts/                # Fontes do projeto
│   │   └── styles/               # Estilos globais (e.g., SCSS, CSS)
│   │
│   └── environments/             # Arquivos de configuração de ambiente (e.g., dev, prod)
│       ├── environment.ts        # Configurações de desenvolvimento
│       └── environment.prod.ts   # Configurações de produção
│
├── styles/                       # Estilos globais (CSS, SCSS)
│
├── index.html                    # Página HTML principal
│
├── main.ts                       # Ponto de entrada do aplicativo Angular
│
└── polyfills.ts                  # Arquivo de polyfills para compatibilidade de navegadores

Explicação da Estrutura: