|
|
|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) | [Analytics](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
|
|
|
|
|
|
|
|
```plaintext
|
|
|
|
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:
|
|
|
|
|
